mirror of
https://github.com/supabase/supabase.git
synced 2026-10-14 13:49:09 +03:00
107 lines
3.3 KiB
Plaintext
107 lines
3.3 KiB
Plaintext
---
|
|
id: auth-slack
|
|
title: 'Login with Slack'
|
|
description: Add Slack OAuth to your Supabase project
|
|
---
|
|
|
|
import Tabs from '@theme/Tabs'
|
|
import TabItem from '@theme/TabItem'
|
|
|
|
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](https://api.slack.com/apps).
|
|
- Add your Slack `API Key` and `API Secret Key` to your [Supabase Project](https://app.supabase.com).
|
|
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js).
|
|
|
|
## Access your Slack Developer account
|
|
|
|
- Go to [api.slack.com](https://api.slack.com/apps).
|
|
- 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](https://app.supabase.com).
|
|
- 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 full `OAuth Redirect URI`.
|
|
|
|
<video width="99%" muted playsInline controls="true">
|
|
<source
|
|
src="/docs/videos/api/api-url-and-key.mp4"
|
|
type="video/mp4"
|
|
muted
|
|
playsInline
|
|
/>
|
|
</video>
|
|
|
|
## Create a Slack OAuth app
|
|
|
|
- Go to [api.slack.com](https://api.slack.com/apps).
|
|
- 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 click `Add`
|
|
- Click `Save URLs`
|
|
|
|
## Enter your Slack credentials into your Supabase Project
|
|
|
|
- Go to your [Supabase Project Dashboard](https://app.supabase.com).
|
|
- In the left sidebar, click the `Authentication` icon (near the top).
|
|
- Click `Settings` from the list to go to the `Authentication Settings` page.
|
|
- Enter the final (hosted) URL of your app under `Site URL` (this is important).
|
|
- Under `External OAuth Providers` turn `Slack Enabled` to ON.
|
|
- Enter your `Client ID` (`client_id`) and `Client Secret` (`client_secret`) saved in the previous step.
|
|
- Click `Save`.
|
|
|
|
## Add login code to your client app
|
|
|
|
When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `slack` as the `provider`:
|
|
|
|
```js
|
|
async function signInWithSlack() {
|
|
const { data, error } = await supabase.auth.signInWithOAuth({
|
|
provider: 'slack',
|
|
})
|
|
}
|
|
```
|
|
|
|
When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
|
|
|
|
```js
|
|
async function signout() {
|
|
const { error } = await supabase.auth.signOut()
|
|
}
|
|
```
|
|
|
|
## Resources
|
|
|
|
- [Supabase Account - Free Tier OK](https://supabase.com)
|
|
- [Supabase JS Client](https://github.com/supabase/supabase-js)
|
|
- [Slack Developer Dashboard](https://api.slack.com/apps)
|