This repository is an extension of the example proof-of-concept located at https://github.com/authts/react-oidc-context/tree/main/example.
It is meant to be used in conjunction with an OIDC capable identity provider. In my demonstration I used the Authentik basic starter docker-compose.
For easy reproducibility, I’ve included the docker-compose I used in ./authentik.
Feel free to use it as you see fit ! 😉
-
Docker and docker-compose
-
Create a
.envfile having the requiredPG_PASSandAUTHENTIK_SECRET_KEYvariables, as documented by Authentik:
$ echo "PG_PASS=$(openssl rand -base64 36 | tr -d '\n')" >> .env
$ echo "AUTHENTIK_SECRET_KEY=$(openssl rand -base64 60 | tr -d '\n')" >> .env-
Run this to add
keycloakas a valid FQDN forlocalhost. Authentik need to communicate with Keycloak in the docker network (thus throughkeycloakFQDN), but in doing so the redirect address will bekeycloakfor login. That’s why we need this kinda hack:
$ echo "127.0.0.1 keycloak" | sudo tee -a /etc/hosts-
Now go into the
./dockerdirectory and run
$ docker compose pull
$ docker compose up -dThen you will have access to the following services:
- http://localhost:1234 is the React WebApp
- http://localhost:9000 is the Authentik instance
- http://localhost:8080 is the Keycloak instance (admittedly you can now also use http://keycloak:8080 but it’s not required for administration purposes)
The connexions are as follows:
- The WebApp is declared as a my-app client in Authentik, with a dedicated Provider for my-app OIDC provider.
- Authentik uses Keycloak OIDC as a "Federated Social Login" option through a client authentik-login created in the my-realm Keycloak realm.
- A user my-user with password my-password is created in Keycloak. It belongs to the my-users Keycloak group.
Thus you can test the whole workflow by going to the webapp, clicking on Log In, selecting Keycloak OIDC and using the aforementionned credentials for my-user to be logged as my-user on the webapp.
|
Note
|
I recommend that you use a different browser profile for Authentik admin session, in order to mix up your administrator session with a test user session with the sample app 😉 |
And…that’s it ! 😁