An auth provider for react-admin which handles authentication via a Keycloak server.
This repository contains:
- The actual
ra-keycloak
package - A simple demo app you can run locally to try out
ra-keycloak
This demo requires Docker and docker compose in order to start a local Keycloak server.
- Clone this project
- Run
make install run
to install the dependencies, start the local Keycloak Server and start the Demo App
We need to add some minimal configuration to our Keycloak server in order to use it. This need to be done from the Keycloak Admin Console.
- Browse to http://localhost:8080/auth/ (note: keycloak takes some time to start...)
- Go to Administration Console
- Login with the default credentials (admin / password)
- Create a new Realm named for instance
Marmelab
- Create a new Realm Role named
admin
- Create a new Realm Role named
user
- Create a new User named
[email protected]
- For
[email protected]
, under Credentials, set a new password (disable the temporary password tick) - For
[email protected]
, under Role mapping, click Assign role, select Filter by realm roles and chooseadmin
- Create a new User named
[email protected]
- For
[email protected]
, under Credentials, set a new password (disable the temporary password tick) - For
[email protected]
, under Role mapping, click Assign role, select Filter by realm roles and chooseuser
- Create a new Client and choose as Client ID
front-marmelab
. Leave all the other options to default. - For Client
front-marmelab
, under Settings, edit the Access settings to the following:
- Root URL: http://localhost:8081/
- Home URL: http://localhost:8081/
- Valid redirect URIs: http://localhost:8081/*
- Valid post logout redirect URIs: http://localhost:8081/*
- Web origins: *
- Click Save. Your keycloak instance is fully configured.
Now that all is configured and running, you can browse to http://localhost:8081/ to access the React Admin App.
- Signing in with
[email protected]
will only grant theuser
role permissions - Signing in with
[email protected]
will grant fulladmin
role permissions, allowing for instance to see the 'Users' resource in the main menu
Feel free to play around with this demo, along with the Keycloak config, to understand better how it works!
This repository and the code it contains is licensed under the MIT License and sponsored by marmelab.