Login with Slack
To enable Slack Auth for your project, you need to set up a Slack OAuth application and add the application credentials to your Supabase Dashboard.
Overview#
Setting up Slack logins for your application consists of 3 parts:
- Create and configure a Slack Project and App on the Slack Developer Dashboard.
- Add your Slack
API Key
andAPI Secret Key
to your Supabase Project. - Add the login code to your Supabase JS Client App.
Access your Slack Developer account#
- Go to api.slack.com.
- Click on
Your Apps
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 a Slack OAuth app#
- Go to api.slack.com.
- Click on
Create an App
Under Create an app...
:
- Click
From scratch
- Type the name of your app
- Select your
Slack Workspace
- Click
Create App
Under App Credentials
:
- Copy and save your newly-generated
Client ID
- Copy and save your newly-generated
Client Secret
- Click
Permissions
Under Redirect URLs
:
- Click
Add New Redirect URL
- Paste your
Callback URL
then clickAdd
- Click
Save URLs
Enter your Slack 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
turnSlack Enabled
to ON. - Enter your
Client ID
(client_id
) andClient Secret
(client_secret
) saved in the previous step. - Click
Save
.
Add login code to your client app#
When your user signs in, call signInWithOAuth() with slack
as the provider
:
1async function signInWithSlack() {
2 const { data, error } = await supabase.auth.signInWithOAuth({
3 provider: 'slack',
4 })
5}
When your user signs out, call signOut() to remove them from the browser session and any objects from localStorage:
1async function signout() {
2 const { error } = await supabase.auth.signOut()
3}