Dev UI with OIDC

To be able to log in to the UI with OIDC, both the UI and API need to be accessible on localhost:8000. To do this the UI can be served at localhost:8000 which then proxies the API calls to the backend.

To achieve this the UI and API need to be running in different containers (the UI can also be run from your host machine) to prevent conflicts on port 8000.

Backend

Begin by creating a Multipass container.

Inside that container set up the backend using the development setup instructions.

You will also need to add the oauth client credentials.

Edit the config map:

kubectl edit configmap identity-platform-admin-ui

Enter the values for OAUTH2_CLIENT_ID and OAUTH2_CLIENT_SECRET with the "OAuth2 credentials" founds in LastPass.

Then restart the deployment:

kubectl rollout restart deployment identity-platform-admin-ui

Finally cancel the make dev that is running and run the following port forward to expose the API via the hosts's address. You will also need to do this each time you start the Multipass to be able to access the API.

kubectl port-forward services/identity-platform-admin-ui 8000:80 --address 0.0.0.0

Frontend

In another Multipass, or on your host machine check out this repo.

Go to the UI directory:

cd identity-platform-admin-ui/ui/

Install the dependencies:

yarn install

Create a file named .env.local and enter the IP to your Multipass running the backend:

VITE_PROXY_API_URL=http://<backend.ip>:8000/

Now you can run the UI. If you're running the UI locally then you'll need it to be served using port 8000:

yarn dev-serve --port 8000

If you're running the the UI in a Multipass then you don't need to set the port:

yarn dev-serve

To access the UI running inside a Multipass from your host's localhost you can use a SSH port forward:

ssh -L :8000:<ui-multipass.ip>:3000 ubuntu@<ui-multipass.ip>

Now you should be able to visit http://localhost:8000 and log in!

Permissions

To give yourself privileged access install the FGA CLI and jq:

sudo snap install jq

Set some env vars for store access:

STORE_ID=$(fga --api-url http://127.0.0.1:14457 store list | jq '.stores[0].id' -r)
MODEL_ID=$(fga --api-url http://127.0.0.1:14457 model list --store-id $STORE_ID | jq '.authorization_models[0].id' -r)

Set your user email (you can find out which one is being used here: http://localhost:8000/api/v0/auth/me):

USER_EMAIL=<[email protected]>

Finally create the tuple to give you elevated permissions:

fga --api-url http://127.0.0.1:14457 tuple write --model-id $MODEL_ID --store-id $STORE_ID user:$USER_EMAIL admin privileged:superuser