Skip to main content

Lesson 2 of 5 · 5:08 · Intermediate · Webflow

Add Facebook login

Create the Facebook app and connect it to Memberstack.

Where this fits

You just connected Google login. Facebook works the same way: create an app on their side, then connect it in Memberstack.

By the end of this lesson you can

  • Create a Facebook app and add the email permission
  • Turn on client OAuth login and paste in Memberstack’s redirect URI
  • Add the app ID and secret to Memberstack
  • Fill in the app details Facebook needs before you publish

Heads up: You need to verify your business with Facebook before you can publish the app. The video skips that part.

Lesson notes

How it works

How Facebook login connects to Memberstack

Facebook login works like Google login. You create an app on Facebook's side that trusts Memberstack's callback address, then give Memberstack the app ID and app secret. When a member clicks Continue with Facebook, Facebook confirms who they are and sends them back to Memberstack, which logs them in or creates their account.

The extra work on Facebook's side is the app details and business verification it needs before the app can go live.

Creating the Facebook app

Memberstack's Facebook settings under Settings, Auth Providers link to Facebook's developer site, which is a good place to start.

  1. In Facebook for Developers, click Create App and enter an app name and contact email.
  2. Pick the use case Authenticate and request data from users with Facebook Login.
  3. Connect a business portfolio, or skip it for now. You'll need a verified business before you can publish.
  4. From the dashboard, customize the Facebook Login button and add the Email permission.
  5. In the login settings, make sure client OAuth login and web OAuth login are on, and add https://client.memberstack.com/auth/callback under Valid OAuth Redirect URIs. Save.
  6. In Settings, Basic, fill in display name, app domains, privacy policy URL, user data deletion instructions URL, app icon and category.

Connecting it in Memberstack and going live

Copy the app ID and app secret from Settings, Basic. Click Show to reveal the full secret first. Copying the masked version causes an invalid_client error. In Memberstack, go to Settings, Auth Providers, click Configure next to Facebook, paste both, turn Facebook on and save.

In Webflow, put a Facebook button inside your Memberstack signup form. The Social Auth Components have one ready, or add data-ms-auth-provider="facebook" to your own button.

Finally, start business verification under Review, Verification, then publish the app from the Publish section. Facebook's review can take a few days. Login works during review, though some actions may keep asking for verification until it's done.

Before you move on

0 of 5

Tick these off on your own site. Done with all of them? You’re ready for the next lesson.

Up next: Next you’ll let members skip passwords entirely with a one-time code.

Chapters

Common questions

Why do I get invalid_client when connecting Facebook to Memberstack?

Usually the app secret was copied in its masked form. In your Facebook app's Settings, Basic, click Show to reveal the full secret, then paste that into Memberstack.

Do I need to verify my business to use Facebook login?

To publish the app, yes. Facebook login works during review, but some actions may keep prompting for verification until it's complete.

Keep going

Checked against the Memberstack docs

TranscriptAuto-generated captions
  1. 0:00

    Hello my name’s Duncan in this video we’re going to go through the steps to get this continue with Facebook button to work here’s an example of what we’re going to see and in order to get started we’re going to go here in Memberstack first to the settings page off providers and then Facebook then um I recommend clicking here on learn more and then scrolling down so you have the link to the

  2. 0:30

    Facebook developer site open that and you might need to do some setup work but once you’re in you’ll be able to view your apps and you can create a new app first off we’re going to authenticate and request data click next I am not building a game we’ll give this a name so we’ll call this Memberstack demo go with our contact e email and then

  3. 1:00

    if you have an Associated uh business go ahead and select that and here we go we’re on our dashboard let’s go ahead and just work our way through these steps starting with customizing the Facebook login button okay so one thing I just did here is I went ahead and added the permissions for the email and it looks like the public profile is already added so we don’t need to worry about that then we we can go to settings we’ll

  4. 1:32

    enable client ooth login make sure that is on web is on good that’s all fine and then we’re going to paste in our redirect UI from Memberstack select this and paste it right there excellent if we’re using custom domains we’re going to need to add add all of our allowed

  5. 2:01

    domains right here so that that works properly and then we’ll save changes okay that’s saved the page is blank but we’ll just click back over to our dashboard so what I did is I just refreshed the page it reloaded this now I can can go back to customize and then we’ll go back one more to use cases and what we need to find next are the

  6. 2:32

    client secret and ID so if we go to here to app settings and then basic here we’ll find our app ID and our app secret plus a few other things that we need to fill out but first off let’s get the app ID paste that there H the app secret paste that right there and save cool so that’s all in in order to get this working we’ll need to update

  7. 3:07

    these so display name um the app domains we should fill that out if we’re using custom domains or at least with our own the our own domains I’m pretty sure we could enter a list yes so you can add multiple domains there uh the privacy policy terms there we go the category is required we need to add an

  8. 3:40

    image get a nice logo in here and the deletion instructions this is a page that instructs your users how to get their information deleted usually that’s just a help center document in this case I’m linking it to our terms and then we’ll save those changes the last thing we need to do is go to publish and then we need to publish our site and we need to

  9. 4:11

    verify um so you need to make sure that you have verified your business so here I’ll go in to begin verification I might skip this yes I’m going to go ahead and skip this part of the video but just know that you need to verify your business and then once that is done you should be able to publish once that is done when you go to continue with Facebook then and and the review has been finished then you’ll be

  10. 4:45

    able to have users log in and sign up using Facebook authentication if you have any questions feel free to leave a comment at the bottom of the documentation that’s going to be the best way to reach us quickly and to get help in case anything goes weird all right thanks for watching hope you have a great rest of your day and I’ll talk to you later

This is v1 of Memberstack University, built from the tutorials we’ve put so much work into over the years. We’d like to make a more organized series.