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 the Keycloak 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 the client id.
• Obtain the Secret from the credentials tab which will be used as the client secret.
• Add the callback url of your application to your allowlist.

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. The issuer will be used as the Keycloak 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:

1. The "Client Protocol" should be set to "openid-connect".
2. The "Access Type" should be set to "confidential".
3. 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#

When your user signs in, call signInWithOAuth() with keycloak as the provider:

async function signInWithKeycloak() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'keycloak',
    options: {
      scopes: 'openid',
    },
  })
}

When your user signs out, call signOut() to remove them from the browser session and any objects from localStorage:

async function signout() {
  const { error } = await supabase.auth.signOut()
}

Resources#

• You can find the keycloak openid endpoint configuration under the realm settings.