Login with Discord
To enable Discord Auth for your project, you need to set up a Discord Application and add the Application OAuth credentials to your Supabase Dashboard.
Overview
Setting up Discord logins for your application consists of 3 parts:
- Create and configure a Discord Application Discord Developer Portal
- Add your Discord OAuth Consumer keys to your Supabase Project
- Add the login code to your Supabase JS Client App
Steps
Access your Discord account
- Go to discord.com.
- Click on
Login
at the top right to log in.
- Once logged in, go to discord.com/developers.
Find your callback URL
In the next step you require 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 a Discord Application
- Click on
New Application
at the top right. - Enter the name of your application and click
Create
. - Click on
OAuth2
underSettings
in the left side panel. - Click
Add Redirect
underRedirects
. - Type or paste your
callback URL
into theRedirects
box. - Click
Save Changes
at the bottom. - Copy your
Client ID
andClient Secret
underClient information
.
Add your Discord 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
turnDiscord 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: 'discord',
})
note
If you call signIn()
when already logged in, Discord will prompt the user again for authorization.
Add this function which you can call from a button, link, or UI element.
async function signInWithDiscord() {
const { user, session, error } = await supabase.auth.signIn({
provider: 'discord',
})
}
To log out:
async function signout() {
const { error } = await supabase.auth.signOut()
}