Dribbble Authentication

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

📋 Prerequisites

Before you begin, make sure you have:

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

1) Dribbble Developer Portal Setup

Step 1: Create a Dribbble Application

1. Go to the Dribbble Developer Portal.
2. Click Register your application
3. Register an account or Log in if you already have an account.
4. After registering account, kindly go to the Dribbble Developer Portal
5. Fill in the Application Details:

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 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) Dribbble Auth Setup in Memberstack and Webflow

Step 1: Connect Dribbble in Memberstack

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

1. Paste your Client ID and Client Secret from the previous step.

2. Toggle the switch to enable Google Auth and click Save.

   

Step 2: Add the Dribbble Button to Your Signup Form

1. Copy either the Light Theme Dribbble Button or the Dark Theme Dribbble Button from Memberstack's Social Auth Components.

1. Paste the button inside your signup form (not just inside a form block).

⚠️ The Dribbble button must be placed correctly inside a Memberstack signup form for it to work properly.

Step 3: Publish and Test

1. Publish your Webflow site.
2. Open the live version and click "Sign in with Dribbble".
3. You should be redirected to Dribbble, authenticate, and return with a successful login.

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: Redirect URI Mismatch

Cause: The Callback URL in your Dribbble application settings doesn't match the one configured in Memberstack.

✅ Fix:

• Go to your Dribbble Developer Applications.

• Click on your application.

• Ensure the Callback URL is set to:

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

• Save the changes and retry the authentication process.

❌ Error: Invalid Client

Cause: The Client ID or Client Secret entered in Memberstack is incorrect.

✅ Fix:

• Double-check the Client ID and Client Secret in your Dribbble application settings.
• Ensure there are no extra spaces or missing characters when copying them into Memberstack.
• Update the credentials in Memberstack and test the authentication again.