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
andAPI 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 Callback URL, you can click
Copy
to copy it to the clipboard
For testing OAuth locally with the Supabase CLI please see the local development docs.
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
Add login code to your client app
The following outlines the steps to sign in using Spotify with Supabase Auth.
- Call the signin method from the client library.
- The user is redirected to the Spotify login page.
- After completing the sign-in process, the user will be redirected to your app with an error that says the email address needs to be confirmed. Simultaneously the user receives a confirmation email from Supabase Auth.
- The user clicks the confirmation link in the email.
- The user is brought back to the app and is now signed in.
Make sure you're using the right supabase
client in the following code.
If you're not using Server-Side Rendering or cookie-based Auth, you can directly use the createClient
from @supabase/supabase-js
. If you're using Server-Side Rendering, see the Server-Side Auth guide for instructions on creating your Supabase client.
When your user signs in, call signInWithOAuth() with spotify
as the provider
:
_10async function signInWithSpotify() {_10 const { data, error } = await supabase.auth.signInWithOAuth({_10 provider: 'spotify',_10 })_10}
For a PKCE flow, for example in Server-Side Auth, you need an extra step to handle the code exchange. When calling signInWithOAuth
, provide a redirectTo
URL which points to a callback route. This redirect URL should be added to your redirect allow list.
In the browser, signInWithOAuth
automatically redirects to the OAuth provider's authentication endpoint, which then redirects to your endpoint.
_10await supabase.auth.signInWithOAuth({_10 provider,_10 options: {_10 redirectTo: `http://example.com/auth/callback`,_10 },_10})
At the callback endpoint, handle the code exchange to save the user session.
Create a new file at app/auth/callback/route.ts
and populate with the following:
When your user signs out, call signOut() to remove them from the browser session and any objects from localStorage:
_10async function signOut() {_10 const { error } = await supabase.auth.signOut()_10}