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.

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:

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". Make sure to add the attribute to the inside of the <form> so we know which plan the google authorization is for. 
  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

9 comments

  • Comment author
    William de Broucker

    Hello, 

    Will it be possible to let our historic user use the Google login if they have a Gmail address ?

    Thanks, 

    William

    1
  • 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.

    2
  • Comment author
    Duncan Hamra
    • Edited

    Hey William de Broucker 👋  Members who signup with their Gmail address and password will need to 1) Login with their email and password 2) Navigate to your site's profile page 3) Click on the profile Google auth button to update their account. This is required so we know that the member is actively logged into both accounts. Could leave to security issues if we connected the accounts automatically. 

    0
  • Comment author
    Duncan Hamra

    Hey Steve Peak 👋

    I don't think we support any extra scopes at this point. If this feature is super important for your project, can you submit a ticket with support? I'll make sure your question reaches the eng team and/or gets added to our roadmap. 

    0
  • Comment author
    Nicholas Platt

    Hey Duncan Hamra,

    With the Google Auth I'm having trouble getting the signup process to add some one to my plan and redirect to the appropriate website. Am I missing something in the onboarding process? I don't see any specific attributes to add here. 

     

    1
  • Comment author
    Duncan Hamra

    Nicholas Platt Can you send me a link to your site? Bonus points if you can make me a super quick loom video showing the problem 🙏

    I'd like to see where have you added your plan attribute. The member will need to either click on a button with the plan attribute or you will need to add the plan attribute to the signup form for it to register. 

    0
  • Comment author
    Ryan Brown
    • Edited

    Hello Duncan Hamra

    Is there a way to fetch a Google (or in my case LinkedIn) users name from their profile when they register with google/linkedin Auth?

    So if I were to login to my website with LinkedIn, I'd hope I could fetch my name, Ryan Brown. Not to mention it would also be awesome to be able to fetch the avatar image url. (of course with the use of integromat or zapier)

     

    Thanks!

    0
  • Comment author
    Duncan Hamra

    Hey Ryan Brown 👋

    Yes, that information should be collected automatically... yup! After a test I see that you'll need First Name and Last Name fields in Memberstack. If you do, we'll automatically pull their name from LinkedIn.

    Looked like Google is able to populate "Name" "First Name" or "Last Name"

    0
  • Comment author
    What Plans

    Hey Duncan Hamra,

    I have a similar problem as Nicholas Platt above. I have one membership plan and I'd like all users to be assigned that plan. When users sign up with their email they get assigned the plan but when they signup with Google they don't get assigned any plan. I've added the plan attributes to the Google auth button but it still doesn't work. What am I doing wrong?

    0

Please sign in to leave a comment.