This article will show you how to add a "Continue with Google" button to your signup, login, and profile forms. Part one is a 5-minute video with step-by-step instructions to connect your Memberstack and Google accounts. Part two will show you how to set up the front end.
Part 1: The Backend
Here's a link to the Google Developer Console.
First navigate to the Oauth Consent Screen page in the Google Developer Console.
Scroll down until you see "Publishing Status" and click "Publish App," and then "Confirm."
Once you set your app status as "In production," your app will be available to anyone with a Google Account. Depending on how you configure your OAuth screen, you may have to submit your app for verification. It usually takes 2-3 business days, but can take up to 6 weeks.
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.
Important: Social auth buttons must be inside the signup and login forms to work.
Signup & 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:
To create your own from scratch:
- Review Google's Branding Guidelines for Sign-in buttons.
- Create a link block with the attribute
data-ms-auth-provider="google". Make sure to add the attribute to the inside of the <form> so we know which plan the google authorization is for.
- Add the Google logo.
- 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.
In this other tutorial, we'll create a UI for members to connect providers, view previously connected providers, and (optionally) disconnect providers.
Errors are usually caused by a miss-matched redirect URI. Click here to learn more.
How to fix the "Access Blocked" error: