Login with Spotify

To enable Spotify Auth for your project, you need to set up a Spotify OAuth application and add the application credentials to your Supabase Dashboard.

Overview#

Setting up Spotify logins for your application consists of 3 parts:

Create and configure a Spotify Project and App on the Spotify Developer Dashboard.
Add your Spotify API Key and API Secret Key to your Supabase Project.
Add the login code to your Supabase JS Client App.

Access your Spotify Developer account#

Log into Spotify
Access the Spotify Developer Dashboard

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 Authentication icon in the left sidebar
Click on Providers under the Configuration section
Click on Spotify from the accordion list to expand and you'll find your Redirect URL, you can click Copy to copy it to the clipboard

Create a Spotify OAuth app#

Log into Spotify.
Go to the Spotify Developer Dashboard
Click Create an App
Type your App name
Type your App description
Check the box to agree with the Developer TOS and Branding Guidelines
Click Create
Save your Client ID
Save your Client Secret
Click Edit Settings

Under Redirect URIs:

Paste your Supabase Callback URL in the box
Click Add
Click Save at the bottom

Enter your Spotify credentials into your Supabase Project#

Go to your Supabase Project Dashboard
In the left sidebar, click the Authentication icon (near the top)
Click on Providers under the Configuration section
Click on Spotify from the accordion list to expand and turn Spotify Enabled to ON
Enter your Spotify Client ID and Spotify Client Secret saved in the previous step
Click Save

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

async function signInWithSpotify() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'spotify',
  })
}

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

async function signout() {
  const { error } = await supabase.auth.signOut()
}

Resources#

Edit this page on GitHub