Spotify Authentication

This article will guide you through adding a "Continue with Spotify" button to your signup, and login forms. Part one walks you through setting up your Spotify Developer account step by step. Part two covers how to configure Spotify Authentication in Memberstack and add the button to your front-end forms. 

📋 Prerequisites

Before you begin, make sure you have:

• A Memberstack account
• A Spotify Developer account
• Access to your website code or Webflow project

1) Spotify Developer Console

Step 1: Create a Spotify App

1. Go to the Spotify Developer Dashboard.

⚠️ When you visit the Spotify Developer Dashboard for the first time, you'll be asked to accept Spotify's Terms and Conditions before you can proceed.

1. Click “Create An App”.

1. Fill in the required fields:

https://client.memberstack.com/auth/callback

https://memberstack-client.yourdomain.com/auth/callback

1. Click Create and accept the Developer Terms.

ℹ️ Note: By default, Spotify sets your app to Development Mode, which limits access to 25 users.

When you’re ready to allow more users, you can switch to Extended Quota Mode. Follow the steps outlined in this Spotify article.

Step 2: Get Your Client ID and Client Secret

1. After creating the app, you’ll be redirected to the app overview page.
2. Copy your Client ID and click View Client Secret to copy your Client Secret.

⚠️ Make sure you copy and keep the Client ID and Client Secret secure. You’ll need both of these when configuring Memberstack.

2) Setup in Memberstack

Step 1: Connect Spotify in Memberstack

1. Log in to your Memberstack dashboard.
2. Navigate to Settings > Auth Providers.
3. Click the Configure button next to Spotify.

1. Enter your Client ID and Client Secret obtained from Spotify.
2. Toggle the switch to enable Spotify Auth, then click Save.

Step 2: Add the Spotify Button to Your Signup Form

1. Copy either the Light Theme Spotify Button or the Dark Theme Spotify Button from Memberstack's Social Auth Components. These buttons are fully built in Webflow, come with all the necessary attributes, and are easy to customize.

   (If you prefer to create your own button, make sure to add the data-ms-auth-provider="spotify" attribute to it.)

2. Paste it inside your signup form (not a form block)

⚠️ The Spotify button must be inside a proper Memberstack signup form. Placing it in a form block or outside the form may cause it to stop working.

Step 3: Publish and Test

1. Publish your Website.
2. Open your site and click the “Continue with Spotify” button. You should be redirected to Spotify, authenticate, and be returned to your site logged in.

3) FAQ

Can members login using a sign up form?

Yes! By default, members who already have an account will automatically be logged.

Can members sign up using a login form?

By default no, but you can enable sign ups in login forms by adding a new attribute to your login modal buttons. Here's a 1-minute video tutorial showing how to add the attributes.

1. Add the data-ms-social-auth-allow-signup attribute to your custom login forms (data-ms-form="login").
2. Add the data-ms-social-auth-allow-signup attribute to your login modal buttons (data-ms-modal="login").

Once complete, your social auth buttons will create accounts for new members.

Profile Forms

In this other tutorial, we'll create a UI for members to connect providers, view previously connected providers, and (optionally) disconnect providers.

Social Auth Buttons in Profile Forms

4) Troubleshooting & Common Errors

❌ Error: invalid_client

Cause: The Client Secret was copied incorrectly.

✅ Fix:

• Go to your Spotify App dashboard.
• Click Show client secret, copy it again carefully.
• Paste into Memberstack and click Save.

❌ Error: 404 Page Not Found

Cause: A space or typo was added to the Client ID or Client Secret in Memberstack.

✅ Fix:

• Double-check both fields in Memberstack for any extra spaces.
• Remove and paste clean versions of the values from Spotify.
• Save and retest.

❌ Error: Redirect URI Mismatch INVALID_CLIENT: Invalid redirect URI

Cause: The Redirect URI you used in your Spotify app does not exactly match the one Memberstack is expecting.

✅ Fix:

• Go to your Spotify Developer Dashboard.
• Click into your app, then click Edit.

• Under Redirect URIs, ensure you’ve added:

  https://client.memberstack.com/auth/callback

  Otherwise, if you're using a custom domain, use:

  https://memberstack-client.yourdomain.com/auth/callback

  (Make sure to replace yourdomain.com with your actual domain name.)

• Save changes and try again.