Google Authentication

Article author
Duncan Hamra

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

sign_in_with_google_button.jpg

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.

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:

A) Light Theme Google Button
B) Dark Theme Google Button.

To create your own from scratch:

  1. Review Google's Branding Guidelines for Sign-in buttons. 
  2. Create a link block with the attribute data-ms-auth-provider="google".
  3. Add the Google 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

Was this article helpful?

Comments

4 comments

  • Comment author
    Chad P

    Hey MS, I've followed through with these steps to integrate Google Auth. When a Google user logins/signs up, the member is not recorded in memberstack dashboard and so doesn't get redirected. What's the right process to fix this?

    0
  • Comment author
    Duncan Hamra

    Chad P Are you still having issues? We made a few last-minute changes that could have made a difference for you.

    0
  • Comment author
    Chad P

    Duncan Hamra Yes this problem still exists. Google accounts do not show up in the members dashboard

    0
  • Comment author
    Steve Peak

    Hey MS, I want my users to sign-up with Google with extra scopes to Google API for me to manage later. Is this possible?

    More context; I'm added restricted scopes (like Gmail) to my Oauth Consent Screen with the expectation of users accepting this scope during signup. However, I'm not seeing the consent screen.

    0

Please sign in to leave a comment.