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.
- 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. - 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. - You must complete a Data Use Checkup.
- 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 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.
- Add the
data-ms-social-auth-allow-signup
attribute to your custom login forms (data-ms-form="login"
). - 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.
Comments
0 comments
Please sign in to leave a comment.