Spotify

Learn how to set up a social connection with Spotify in your Clerk application.

Clerk does not currently support preconfigured shared OAuth credentials for Spotify on development instances. You will have to provide custom credentials for both development and production instances, which includes generating your own Client ID and Client Secret using your Spotify Developer account. Don't worry, this guide will walk you through that process in just a few simple steps.

Before you start

You need to create a Clerk Application in your Clerk Dashboard(opens in a new tab). For more information, check out our Set up your application guide.
You need to have a Spotify developer account. To create one, click here(opens in a new tab).

Configuration

Create a Spotify application

To create a new OAuth Spotify app, go to the Spotify Developer portal(opens in a new tab) and sign in. Once signed in, navigate to the Dashboard(opens in a new tab). Click on either of the Create app buttons.

The Spotify Developer Dashboard. A red arrow points to both 'Create app' buttons.

Once redirected to the application creation form, you need to set an App name, App description, and Redirect URI. Website is optional.

The 'Create app' form in the Spotify Developer Dashboard.

Spotify + your Clerk app

You can retrieve the Redirect URI from the Clerk Dashboard. But first, you need to enable Spotify as a social connection for your Clerk application.

In the Clerk Dashboard, go to User & Authentication > Social Connections(opens in a new tab). From the list of OAuth vendors, toggle on the Spotify option.

The 'Social connections' page in the Clerk Dashboard. A red arrow is pointing to the Spotify toggle.

In the modal that opened, copy Authorized redirect URI. Keep this modal and page open.

The Spotify settings modal in the Clerk Dashboard. A red arrow is pointing to the 'Redirect URI' copy button.

Configure Spotify application

Navigate back to your Spotify app and paste the Authorized redirect URI you copied from the Clerk Dashboard into the Redirect URIs input.

Agree to Spotify's terms and conditions and click Save.

Once your Spotify app is created, you'll be redirected to the app dashboard. From there, navigate to Settings.

The Spotify Developer Dashboard for a specific application. A red arrow points to the 'Settings' button.

Copy the Client ID and Client Secret. Go back to the Clerk Dashboard, where the modal should still be open, and paste these values into the respective fields.

If the modal or page is not still open, go to the Clerk Dashboard and navigate to User & Authentication > Social Connections(opens in a new tab). Click on the settings cog icon next to the Spotify option. You can now paste the Client ID and Client Secret into their respective fields.

The 'Basic information' tab of the Spotify application's settings. A red arrow points to the 'Client ID' and 'Client Secret'.

Finished 🎉

Congratulations! Social connection with Spotify is now configured for your Clerk application.

Last updated on March 12, 2024