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 -p 8080:8080 -e KEYCLOAK_ADMIN=admin -e KEYCLOAK_ADMIN_PASSWORD=admin quay.io/keycloak/keycloak:latest start-dev

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

Since Keycloak version 22, the openid scope must be passed. Add this to the supabase.auth.signInWithOAuth() method.

<Tabs scrollable size="small" type="underlined" defaultActiveId="js" queryGroup="language"

<$Partial path="create_client_snippet.mdx" />

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

import { createClient } from '@supabase/supabase-js'
const supabase = createClient('<your-project-url>', '<sb_publishable_... or anon key>')

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

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

Future<void> signInWithKeycloak() async {
  await supabase.auth.signInWithOAuth(
    OAuthProvider.keycloak,
    redirectTo: kIsWeb ? null : 'my.scheme://my-host', // Optionally set the redirect link to bring back the user via deeplink.
    authScreenLaunchMode:
        kIsWeb ? LaunchMode.platformDefault : LaunchMode.externalApplication, // Launch the auth screen in a new webview on mobile.
  );
}

When your user signs in, call signInWith(Provider) with Keycloak as the Provider:

suspend fun signInWithKeycloak() {
	supabase.auth.signInWith(Keycloak) {
		scopes.add("openid")
	}
}

<$Partial path="oauth_pkce_flow.mdx" />

<Tabs scrollable size="small" type="underlined" defaultActiveId="js" queryGroup="language"

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()
}

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

Future<void> signOut() async {
  await supabase.auth.signOut();
}

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

import { createClient } from '@supabase/supabase-js';
const supabase = createClient('<your-project-url>', '<sb_publishable_... or anon key>');

// ---cut---
suspend fun signOut() {
	supabase.auth.signOut()
}

Resources

• You can find the Keycloak OpenID endpoint configuration under the realm settings.