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

If you're using Memberstack's pre-built sign-up, login, or profile UI, then you're already finished. Enabled social auth providers will automatically appear in the pre-built UI.

If you'd like to add a social auth button to your Webflow project this 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.

To create your own from scratch:

1. Review Facebook's Branding Guidelines for Sign-in buttons.
2. Create a link block with the attribute data-ms-auth-provider="facebook".
3. Add the Facebook logo.
4. Add your button text. We recommend something like "Continue with Facebook"

That's it for signup and login buttons. Profile buttons have a few additional elements.

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