Provider – Spotify

Nextend Social Login Documentation

Spotify Button Sample

Table of contents

How to enable Spotify login in WordPress

1. Create a Spotify App

To be able to log in via Spotify you must create a Spotify app first.

  1. Navigate to https://developer.spotify.com/dashboard
  2. Log in with your Spotify credentials if you are not logged in.
  3. Click on the purple “Create App” button!
  4. Enter an “App Name” and “App Description” of your choice (they will be displayed to the user on the grant screen).
  5. Fill the “Website” field with the URL of your homepage.
  6. Enter the “Redirect URI“, use the URL we recommend at step 6 in the Getting Started Guide of the provider in Nextend Social Login.
  7. Choose the “Web API” option at “Which API/SDKs are you planning to use?“.
  8. Read through the “Developer Terms of Service” and put a tick in the checkbox.
  9. Click on “Save“. Your application is now registered, and you’ll be redirected to the app overview page.
  10. Click on the the “Settings” button.
  11. Copy and save the “Client ID” value. This is what you will use later on the Settings tab for the “Client ID” field.
  12. Click on “View client secret“, copy and save the “Client Secret” value. This is what you will use later on the Settings tab for the “Client Secret” field.
  13. Currently your app is in Development mode which means that, up to 25 authenticated Spotify users can use your app. If you want anybody with a Spotify account to use your app, then you need to move to “Extended quota mode”. To request “Extended quota mode”, use the navigation menu and go to “Extension Requests“, then hit “Start“, and go through the “Extension Request” process. In the last step you will need to choose the following OAuth scope: user-read-private and all the other extra scopes connected to the Sync data fields you enabled.
  14. Once Spotify reviewed and approved your request ( it can take up to 6 weeks ), find the “Client ID” and “Client Secret” values you copied earlier. Enter these for the fields with the same name on the “Settings” tab.

2. App setup

Once your Spotify app is ready you’ll need to copy and paste the Client ID and Client Secret to the Spotify provider’s Settings tab.

3. Verifying

Once your Client ID and Client Secret have been added, you need to verify the setup first. This verification helps you identify possible problems with the app.

Settings

Spotify Settings

Client ID

The Client ID of your Spotify app. You can find it at under your App’s “Settings” page.

Client Secret

The Client Secret of your Spotify app. You can find it at under your App’s “Settings” page.

Spotify Other Settings

Username prefix on Register

Whenever a new user registers with their Spotify account they can get a custom prefix so you can easily identify them.

Fallback username prefix on register

Whenever a new user registers with their Spotify account and we can not generate a valid username from the first name or last name, a random username will be generated. With this option they can get a custom prefix so you can easily identify them.

Profile image size

The avatar will be stored with the selected size.

Sync data

By default Nextend Social Login stores the first name, last name, email, avatar url and access token if it is possible, however some additional information can also be retrieved and stored.
When an option is checked, that field will be stored in a meta key with the specified name.

Spotify Sync Data

Sync fields

It determines when the synchronization shall happen.

  • Register: whenever a new user registers with a provider, their data will be retrieved and stored.
  • Login: whenever user logs in with a provider, their data will be retrieved and stored.
  • Link: whenever user links and existing WordPress account with a provider, their data will be retrieved and stored.

Design Guidelines

According to the Spotify Design Guidelines, the button needs to comply with the requirements. Our design matches these requirements. Avoid using custom designs, as that can get your Spotify login disabled.

Common error messages returned by Spotify during verification

INVALID_CLIENT: Invalid client

You are missing or you have used the wrong Client ID.

Error: invalid_client: Invalid client secret

You are missing or you have used the wrong Client Secret.

INVALID_CLIENT: Invalid redirect URI

You are missing or you have used a wrong Redirect URI.