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 KeyandAPI Secret Keyto 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
Authenticationicon in the left sidebar - Click on
Providersunder the Configuration section - Click on Spotify from the accordion list to expand and you'll find your Redirect URL, you can click
Copyto 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
Saveat the bottom
Enter your Spotify credentials into your Supabase Project#
- Go to your Supabase Project Dashboard
- In the left sidebar, click the
Authenticationicon (near the top) - Click on
Providersunder 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#
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}
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}