mirror of
https://github.com/supabase/supabase.git
synced 2026-07-06 12:44:31 +08:00
97 lines
3.8 KiB
Plaintext
97 lines
3.8 KiB
Plaintext
---
|
|
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
|
|
|
|
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`.
|
|
- Whitelist the callback url of your application.
|
|
|
|
## Steps
|
|
|
|
### Access your Keycloak Admin console
|
|
|
|
- Login by visiting [`http://localhost:8080`](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`](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
|
|
|
|
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.
|
|
|