Login with GitLab
To enable GitLab Auth for your project, you need to set up a GitLab OAuth application and add the application credentials to your Supabase Dashboard.
Overview
Setting up GitLab logins for your application consists of 3 parts:
- Create and configure a GitLab Application on GitLab
- Add your GitLab Application keys to your Supabase Project
- Add the login code to your Supabase JS Client App
Steps
Access your GitLab account
- Go to gitlab.com.
- Click on
Login
at the top right to log in.
Find your callback URL
The next step requires a callback URL, which looks like this:
https://<project-ref>.supabase.co/auth/v1/callback
- Go to your Supabase Project Dashboard.
- Click on the
Settings
icon at the bottom of the left sidebar. - Click on
API
in the list. - Under Config / URL you'll find your API URL, you can click
Copy
to copy it to the clipboard. - Now just add
/auth/v1/callback
to the end of that to get your fullOAuth Redirect URI
.
Create your GitLab Application
- Click on your
profile logo
(avatar) in the top-right corner. - Select
Edit profile
. - In the left sidebar, select Applications.
- Enter the name of the application.
- In the
Redirect URI
box, type the callback URL of your app. - Check the box next to
Confidential
(make sure it is checked). - Check the scope named
read_user
(this is the only required scope). - Click
Save Application
at the bottom. - Copy and save your
Application ID
(client_id
) andSecret
(client_secret
) which you'll need later.
Add your GitLab credentials into your Supabase Project
- Go to your Supabase Project Dashboard.
- In the left sidebar, click the
Authentication
icon (near the top). - Click
Settings
from the list to go to theAuthentication Settings
page. - Enter the final (hosted) URL of your app under
Site URL
(this is important). - Under
External OAuth Providers
turnGitLab Enabled
to ON. - Enter your
client_id
andclient_secret
saved in the previous step. - Click
Save
.
Add login code to your client app
The JavaScript client code is documented here: Supabase OAuth Client Code
const { user, session, error } = await supabase.auth.signIn({
provider: 'gitlab',
})
Add this function which you can call from a button, link, or UI element.
async function signInWithGitLab() {
const { user, session, error } = await supabase.auth.signIn({
provider: 'gitlab',
})
}
To log out:
async function signout() {
const { error } = await supabase.auth.signOut()
}