Merge pull request #6104 from supabase/km/docs-add-keycloak

docs: add keycloak docs

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://<project-ref>.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)

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',

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',