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.
In order to fully publish and verify your app, you'll need to follow these instructions provided by Google. 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.