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. 

Verification 

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

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

Troubleshooting

Errors are usually caused by a miss-matched redirect URI. Click here to learn more.

How to fix the "Access Blocked" error:

 

Was this article helpful?

Comments

26 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. 

     

    2
  • 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"

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

    1
  • Comment author
    Team JobWizard

    Hey Duncan Hamra,

    Are we able to fetch "first name" from Google Login? Is it something that Memberstack hasn't supported yet?

    1
  • Comment author
    Duncan Hamra

    Hey Team JobWizard 👋 Yes, if you have a custom field called First Name or Name, we will automatically pull that information from Google 👍 

    0
  • Comment author
    Furqan Chishti

    Hi. 

    I have custom fields outside of first and last name (in radio button formats). How can I add a step so that those signing in with google need to select one of those options in that custom field? This is crucial in terms of adding them to the right type of profile. 

    0
  • Comment author
    Duncan Hamra

    Julian Galluzzo Do we have any tutorials that answer Furqan Chishti's question?

    Off the top of my head I would do one of the following:

    1. Move the custom fields outside of signup, and place them in an onboarding form. All new users would land on this page. This is the most simple solution.

    2. Use this MemberScript to display a modal until the custom field are filled. 

    3. Or use the same MemberScript to block the social auth button until all of the custom fields are complete. 

    0
  • Comment author
    shreyas k

    Hi,

    How do I map the user info like name coming from google oAuth to custom fields.

    0
  • Comment author
    Duncan Hamra

    Hi shreyas k the mapping happens automatically.

    For example, first-name and last-name will map when available. But it only works if your custom fields have the ID "first-name" and "last-name." I think we support a few other languages too.

    If you need us to update this for you, please let me know.

    1
  • Comment author
    shreyas k

    Hi thanks for the quick response, yes I need it to be mapped to my own custom fields. Can you please help me with that.

    0
  • Comment author
    Duncan Hamra

    Hi Shreyas, please send your custom field IDs to me at duncan@memberstack.com

    0
  • Comment author
    MJ Petroni

    Hi there. This is a super-helpful video. A couple of questions which seem… part-answered above?

    1) When a new-to-us-user signs in with Google, will we be able to see their email address? I saw other fields mentioned like name, etc. What fields can be sourced from the SSO? (I will be asking the same question about LinkedIn login shortly :)
    2) If a user is already in our system with the email that corresponds to a Google account, but is logged out (eg, maybe they don’t remember they are in our system, or can’t remember how they originally signed in) does signing in with google link the accounts? Is the matching key the email address or something else?
    3) If the answer to two is no, then is there some way to merge accounts so people don’t end up with clones?
    4) Can a user de-couple their Google account from their account with us and go to another kind of login? I assume they might have to use ‘forgot password’ or something. Use case: they have a Google account at work, move to a new company, and want to de-couple their Google for Work account and have a login with a new email address.
    5) If unbinding from the SSO is an option, as described above in 4, can we specifically enable it or disable it? Use case: an individual member who pays out of pocket for our services because their employer doesn’t have a contract with us should be able to couple and de-couple their accounts how they want to. But a company-sponsored account would expect that they retain the control over the account and that the user should not be able to de-couple from the SSO or change the email address out-of-domain. So different plan types might need different SSO permissions.
    6) What happens if a user has more than one SSO binding? Is that possible? Are there pros/cons to that (Eg, work Google account, but personal LinkedIn login).

    Thanks for considering all of this!

    0
  • Comment author
    Duncan Hamra
    1. Yup! We pull in the name info and they can update it later. Also pull in profile pic.
    2. It does not match the account and it does not log them in. They will be asked to login via Google instead. 
    3. NA.
    4. Yup! This article explains how that works.  
    5. Hmmm... no we do not have a way to disable this. 
    6. Yup! They can connect multiple accounts + have a password too. Super flexible.
    0
  • Comment author
    Gustavo Razzetti

    Hello Duncan Hamra I'm having a miss-matched redirect URI
    I checked it many times. Reset the app, copied the URI provided by my memberstack and I continue to have the same problem...

    my signup page: is https://fearlessculture.design/sign-up
    Any tips or advice?
    Thank you,

    Gustavo
     

    0
  • Comment author
    /동양어문학과 박진우

     Hello , how can I solve private info processed link?

    0
  • Comment author
    Duncan Hamra

    Is this the error you are referring to?

    https://www.loom.com/share/98579530b50f47d489b492764bb84bbe?sid=a81edf03-a41e-4c1f-9fd1-5165987f1526

    0
  • Comment author
    Dylan Backes

    Can you also use google authentication to fill in the full-name custom field?

    0
  • Comment author
    Duncan Hamra

    Dylan Backes I think it has to be "first-name" and "last-name."

    Tyler Bell is it easy to add support for "full-name"?

    1
  • Comment author
    Dylan Backes

    What are all the google attributes, you can get and fill into your memberstack?

    1
  • Comment author
    Duncan Hamra
    • Edited

    Tyler Bell do you have this list handy? "What are all the google attributes, you can get and fill into your memberstack?"

    0

Please sign in to leave a comment.