Login with Keycloak
To enable Keycloak Auth for your project, you need to set up an Keycloak OAuth application and add the application credentials to your Supabase Dashboard.
Overview
Keycloak OAuth consists of five broad steps:
- Create a new client in your specified keycloak realm.
- Ensure that the new client has the "Client Protocol" set to "openid-connect" and the "Access Type" is set to "confidential".
- The
Client ID
of the client created will be used as theclient id
. - Obtain the
Secret
from the credentials tab which will be used as theclient secret
. - Whitelist the callback url of your application.
Steps
Access your Keycloak Admin console
- To get started with Keycloak, you can run it in a docker container with:
docker run -e KEYCLOAK_USER=admin -e KEYCLOAK_PASSWORD=admin -p 8080:8080 jboss/keycloak:latest
- Login by visiting
http://localhost:8080
and clicking on "Administration Console".
Create a Keycloak Realm
- Once you've logged in to the Keycloak console, you can add a realm from the side panel. The default realm should be named "Master".
Create a Keycloak Client
The "Client ID" of the created client will serve as the client_id
when you make API calls to authenticate the user.
Client Settings
After you've created the client successfully, ensure that you set the following settings:
- The "Client Protocol" should be set to "openid-connect".
- The "Access Type" should be set to "confidential".
- The "Valid Redirect URIs" should be set to:
https://<project-ref>.supabase.co/auth/v1/callback
.
Obtain the Client Secret
This will serve as the client_secret
when you make API calls to authenticate the user.
Under the "Credentials" tab, the Secret
value will be used as the client secret
.
Add login code to your client app
The JavaScript client code is documented in the Supabase OAuth Reference.
const { user, session, error } = await supabase.auth.signIn({
provider: 'keycloak',
})
Add a function which you can call from a button, link, or UI element.
async function signInWithKeycloak() {
const { user, session, error } = await supabase.auth.signIn({
provider: 'keycloak',
}
}
To log out:
async function signout() {
const { error } = await supabase.auth.signOut()
}
Resources
- You can find the keycloak openid endpoint configuration under the realm settings.