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
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
This guide will be assuming that you are running keycloak in a docker container as described in the command above.
Keycloak OAuth consists of five broad steps:
- Create a new client in your specified keycloak realm.
- Obtain the
issuer
from the "OpenID Endpoint Configuration". This will be used as theKeycloak URL
. - 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
- 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".
- After you've added a new realm, you can retrieve the
issuer
from the "OpenID Endpoint Configuration" endpoint. Theissuer
will be used as theKeycloak URL
. - You can find this endpoint from the realm settings under the "General Tab" or visit
http://localhost:8080/realms/my_realm_name/.well-known/openid-configuration
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.