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

We will be replacing the existing Slack provider with a new Slack (OIDC) provider. Developers with Slack OAuth Applications created prior to 24th June 2024 should create a new application and migrate their credentials from the Slack provider to the Slack (OIDC) provider. Existing OAuth Applications built with the old Slack provider will continue to work up till 10th October. You can refer to the list of supported scopes for the new Slack (OIDC) User.

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 and API 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

<$Partial path="social_provider_setup.mdx" variables={{ "provider": "Slack" }} />

Create a Slack OAuth app

• Go to api.slack.com.
• Click on Create New 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

Under the sidebar, select OAuth & Permissions and look for Redirect URLs:

• Click Add New Redirect URL
• Paste your Callback URL then click Add
• Click Save URLs

Under Scopes:

• Add the following scopes under the User Token Scopes: profile, email, openid. These scopes are the default scopes that Supabase Auth uses to request for user information. Do not add other scopes as Sign In With Slack only supports profile, email, openid.

Enter your Slack credentials into your Supabase project

<$Partial path="social_provider_settings_supabase.mdx" variables={{ "provider": "Slack" }} />

You can also configure the Slack (OIDC) auth provider using the Management API:

# Get your access token from https://supabase.com/dashboard/account/tokens
export SUPABASE_ACCESS_TOKEN="your-access-token"
export PROJECT_REF="your-project-ref"

# Configure Slack (OIDC) auth provider
curl -X PATCH "https://api.supabase.com/v1/projects/$PROJECT_REF/config/auth" \
  -H "Authorization: Bearer $SUPABASE_ACCESS_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "external_slack_oidc_enabled": true,
    "external_slack_oidc_client_id": "your-slack-client-id",
    "external_slack_oidc_secret": "your-slack-client-secret"
  }'

Add login code to your client app

<Tabs scrollable size="small" type="underlined" defaultActiveId="js" queryGroup="language"

<$Partial path="create_client_snippet.mdx" />

When your user signs in, call signInWithOAuth() with slack_oidc as the provider:

import { createClient } from '@supabase/supabase-js'
const supabase = createClient('<your-project-url>', '<sb_publishable_... or anon key>')

// ---cut---
async function signInWithSlack() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'slack_oidc',
  })
}

When your user signs in, call signInWithOAuth() with slack as the provider:

Future<void> signInWithSlack() async {
  await supabase.auth.signInWithOAuth(
    OAuthProvider.slack,
    redirectTo: kIsWeb ? null : 'my.scheme://my-host', // Optionally set the redirect link to bring back the user via deeplink.
    authScreenLaunchMode:
        kIsWeb ? LaunchMode.platformDefault : LaunchMode.externalApplication, // Launch the auth screen in a new webview on mobile.
  );
}

When your user signs in, call signInWith(Provider) with SlackOIDC as the Provider:

suspend fun signInWithSlack() {
	supabase.auth.signInWith(SlackOIDC)
}

<$Partial path="oauth_pkce_flow.mdx" />

<Tabs scrollable size="small" type="underlined" defaultActiveId="js" queryGroup="language"

When your user signs out, call signOut() to remove them from the browser session and any objects from localStorage:

import { createClient } from '@supabase/supabase-js'
const supabase = createClient('<your-project-url>', '<sb_publishable_... or anon key>')

// ---cut---
async function signOut() {
  const { error } = await supabase.auth.signOut()
}

When your user signs out, call signOut() to remove them from the browser session and any objects from localStorage:

Future<void> signOut() async {
  await supabase.auth.signOut();
}

When your user signs out, call signOut() to remove them from the browser session and any objects from localStorage:

suspend fun signOut() {
	supabase.auth.signOut()
}

Resources

• Supabase - Get started for free
• Supabase JS Client
• Slack Developer Dashboard