Facebook Authentication

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

Prerequisites

Before you begin, ensure you have:

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

1) Facebook Developer Console

Step 1: Create a Facebook App

1. Navigate to the Facebook for Developers portal.
2. Click Create App.
3. Fill in the required fields:

• App Display Name
• App Contact Email

1. Click Next.

Step 2: Select the Use Case

1. On the page that appears, which is under the Use Cases section, tick the Authenticate and request data from users with Facebook Login option

   

2. Click Next

Step 3: Connect a Business Portfolio

On the page that appears you’ll be prompted to connect a business portfolio.

1. When asked “Which business portfolio do you want to connect to this app?”, select from the available options

2. If you don’t want to connect a business yet, you can choose:

   “I don’t want to connect a business portfolio yet.”

   However, note that this might limit your app’s ability to access certain data and complete verification until later.

3. Click Next

4. Click Go to dashboard

5. Enter your Facebook password in the popup that comes up.

✅ Connecting a verified business portfolio is required for full access to Facebook Login and related permissions.

Step 4: Configure OAuth Settings

1. Upon completing Step 3, you’ll be redirected to the dashboard. On the dashboard, click on Customize adding a Facebook Login button option

   

2. Under the Permission Settings, click Add next to Email to grant access to the user’s primary email address.

   

3. In the left sidebar, click Settings

4. Under Valid OAuth Redirect URIs,

   Enter:

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

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

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

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

⚠️ This step is essential! Without the correct OAuth redirect URI, authentication will fail.

1. Click Save Changes
2. Navigate to Settings > Basic page and complete the following fields:

⚠️ Please take note of your App ID and App Secret — you’ll need them when setting up Facebook Auth in Memberstack.

Step 5: Complete Business Verification

1. In your Facebook App Dashboard, go to the Review tab on the sidebar and click Verification.

1. Click the Start Verification button and walk through the steps:

• Provide your business details (name, address, phone, email, and website).
• Choose a method for Facebook to contact you and verify your connection to the business.
• Upload official documents to confirm your business identity.

⏳ Once submitted, Facebook will review your application. This can take a few days.

⚠️ Note: Facebook Authentication will still work during the review process, but certain actions or data access may continue prompting for verification until it's completed.

Step 6: Publish Your App

1. Once your Business Verification is approved, go to the Publish section in the left-hand sidebar of your Facebook App Dashboard.
2. Click the “Publish” button.
3. Confirm the action to switch your app from Development Mode to Live.

✅ Your app is now live and ready to handle real users through Facebook Login on your Memberstack site.

2) Memberstack and Webflow

Step 1: Connect Facebook in Memberstack

1. Log in to your Memberstack dashboard.

2. Navigate to Settings > Auth Providers

3. Click the Configure button next to Facebook.

   

4. Paste your Facebook App ID and App Secret into the respective fields. To find them, go to your Facebook App Dashboard and navigate to Settings > Basic from the left sidebar.

⚠️ Ensure you click Show to reveal the full App Secret — Facebook may prompt you to enter your password first. Copying the masked version (****) will result in authentication errors.

1. Toggle the switch to enable Facebook Auth (bottom-left), then click Save.

   

Step 2: Add the Facebook Button to Your Signup Form

1. Copy either the Light Theme Facebook Button or the Dark Theme Facebook Button from Memberstack's Social Auth Components. These buttons are fully built in Webflow, come with all necessary attributes, and are easy to customize. (If you prefer to create your own button, make sure to add the data-ms-auth-provider="facebook" attribute to it.)

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

   ⚠️ Important: The Facebook 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 Webflow site to make the changes live.
2. Open your live site and click the "Continue with Facebook" button.
3. You should be redirected to Facebook for authentication and then back to your site with a successful login session.

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) Common Errors

❌ Button Not Triggering Popup?

Cause: The Facebook button may not be inside the correct container or missing required attributes.

✅ Fix: Make sure the button is placed inside the signup form, not a form block. Verify that the data-ms-auth-provider="facebook" attribute is correctly set.

❌ Error: OPError: invalid_client (Client authentication failed)

Cause: The App Secret was copied incorrectly — most likely the masked version (****).

✅ Fix: Go to Settings > Basic in your Facebook app. Click Show to reveal the full App Secret (you may be prompted for your password). Copy and paste the actual value into Memberstack.

❌ "Submit for Login Review" Banner Appears

Cause: Facebook requires you to complete app review for certain permissions.

✅ Fix: Go to Review > Verification in the sidebar. Click Start Verification and follow the prompts to complete business verification and app review.

❌ "URL blocked: This redirect failed..."

Cause: Facebook doesn’t recognize or allow the provided redirect URI.

✅ Fix: Go to your Facebook app’s Facebook Login > Settings. Add this to Valid OAuth Redirect URIs:

Use:

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.)