diff --git a/web/docs/guides/auth/auth-keycloak.mdx b/web/docs/guides/auth/auth-keycloak.mdx new file mode 100644 index 00000000000..291f80e048c --- /dev/null +++ b/web/docs/guides/auth/auth-keycloak.mdx @@ -0,0 +1,89 @@ +--- +id: auth-keycloak +title: 'Login with Keycloak' +description: Add Keycloak OAuth to your Supabase project +--- + +import Tabs from '@theme/Tabs' +import TabItem from '@theme/TabItem' + +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.](/img/guides/auth-keycloak/keycloak-create-realm.png) + +### 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](/img/guides/auth-keycloak/keycloak-add-client.png) + +### 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://.supabase.co/auth/v1/callback`. + +![Obtain the client id, set the client protocol and access type](/img/guides/auth-keycloak/keycloak-client-id.png) +![Set redirect uri](/img/guides/auth-keycloak/keycloak-redirect-uri.png) + +### 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](/img/guides/auth-keycloak/keycloak-client-secret.png) + +### Add login code to your client app + +The JavaScript client code is documented in the [Supabase OAuth Reference](/docs/reference/javascript/auth-signin#sign-in-using-third-party-providers). + +```js +const { user, session, error } = await supabase.auth.signIn({ + provider: 'keycloak', +}) +``` + +Add a function which you can call from a button, link, or UI element. + +```js +async function signInWithKeycloak() { + const { user, session, error } = await supabase.auth.signIn({ + provider: 'keycloak', + } +} +``` + +To log out: + +```js +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](/img/guides/auth-keycloak/keycloak-openid-endpoint-config.png) diff --git a/web/sidebars.js b/web/sidebars.js index af7ce02fe91..359dd60aa70 100755 --- a/web/sidebars.js +++ b/web/sidebars.js @@ -132,6 +132,7 @@ module.exports = { 'guides/auth/auth-github', 'guides/auth/auth-gitlab', 'guides/auth/auth-google', + 'guides/auth/auth-keycloak', 'guides/auth/auth-linkedin', 'guides/auth/auth-notion', 'guides/auth/auth-slack', diff --git a/web/src/data/authProviders.js b/web/src/data/authProviders.js index 56f50ecb9a7..38b4dedc561 100644 --- a/web/src/data/authProviders.js +++ b/web/src/data/authProviders.js @@ -89,6 +89,14 @@ const authProviders = [ platform: true, selfHosted: true, }, + { + name: 'Keycloak', + href: '/docs/guides/auth/auth-keycloak', + official: true, + supporter: 'Supabase', + platform: true, + selfHosted: true, + }, { name: 'LinkedIn', // logo: '/img/libraries/dart-icon.svg', diff --git a/web/static/img/guides/auth-keycloak/keycloak-add-client.png b/web/static/img/guides/auth-keycloak/keycloak-add-client.png new file mode 100644 index 00000000000..3da23de52c5 Binary files /dev/null and b/web/static/img/guides/auth-keycloak/keycloak-add-client.png differ diff --git a/web/static/img/guides/auth-keycloak/keycloak-client-id.png b/web/static/img/guides/auth-keycloak/keycloak-client-id.png new file mode 100644 index 00000000000..6c73eff6032 Binary files /dev/null and b/web/static/img/guides/auth-keycloak/keycloak-client-id.png differ diff --git a/web/static/img/guides/auth-keycloak/keycloak-client-secret.png b/web/static/img/guides/auth-keycloak/keycloak-client-secret.png new file mode 100644 index 00000000000..743040fd9d5 Binary files /dev/null and b/web/static/img/guides/auth-keycloak/keycloak-client-secret.png differ diff --git a/web/static/img/guides/auth-keycloak/keycloak-create-realm.png b/web/static/img/guides/auth-keycloak/keycloak-create-realm.png new file mode 100644 index 00000000000..0317db60b0b Binary files /dev/null and b/web/static/img/guides/auth-keycloak/keycloak-create-realm.png differ diff --git a/web/static/img/guides/auth-keycloak/keycloak-openid-endpoint-config.png b/web/static/img/guides/auth-keycloak/keycloak-openid-endpoint-config.png new file mode 100644 index 00000000000..0b3a4f98c2c Binary files /dev/null and b/web/static/img/guides/auth-keycloak/keycloak-openid-endpoint-config.png differ diff --git a/web/static/img/guides/auth-keycloak/keycloak-redirect-uri.png b/web/static/img/guides/auth-keycloak/keycloak-redirect-uri.png new file mode 100644 index 00000000000..ce8a9612752 Binary files /dev/null and b/web/static/img/guides/auth-keycloak/keycloak-redirect-uri.png differ