Facebook Authentication

Article author
Duncan from Memberstack
  • Updated

This article will show you how to add a "Continue with Facebook" button to your signup, login, and profile forms. Part one is a 3-minute video with step-by-step instructions to connect your Memberstack account and Facebook Developer account. Part two will show you how to set up the front end. 

Important: If you are having errors please make sure you are copying and pasting the actual Client Secret and not ****.

Part 1: The Backend

Here's a link to the Facebook Developer site.

If you watch this video above and test your site, you'll most likely see a banner during signup that says "Submit for Login Review." To remove that banner and to switch to live mode...
  1. You must provide a valid Privacy Policy URL and a Data Deletion Instructions URL. You can update both of these inputs in Basic Settings on the Facebook App Dashboard.
    - The Data Deletion Instructions URL is a page on your site that members can use to request their data be deleted.
  2. Click "Get Advanced Access" for email and public_profile.
    -
    I had quite a bit of trouble getting the Facebook UI to load properly. If you experience difficulties, I recommend trying again in a private or incognito browser. 
  3. You must complete a Data Use Checkup.
  4. Toggle your app from test mode to live mode. 
 

Part 2: The Frontend

sign_in_with_facebook.jpg

 

If you're using Memberstack's pre-built sign-up, login, or profile UI, then social auth button will appear automatically. 

If you'd like to add a social auth button to your custom Webflow forms this next section is for you.

Sign up & Login Forms

I recommend copying one of our Webflow social auth buttons. They are 100% built in Webflow, already have the attributes you need, and are easy to customize:

A) Light Theme Facebook Button
B) Dark Theme Facebook Button.

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

Troubleshooting

Errors are usually caused by a miss-matched redirect URI. Click here to learn more. 

 

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.