Skip to main content

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 the client id.
  • Obtain the Secret from the credentials tab which will be used as the client 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".

Add a Keycloak Realm.

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.

Add a Keycloak client

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 id, set the client protocol and access type Set redirect uri

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.

Obtain 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. Keycloak OpenID Endpoint Configuration