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
If you're using Memberstack's pre-built sign-up, login, or profile UI, then social auth button will appear automatically.
If you'd like to add a social auth button to your custom Webflow forms this next 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.
FAQ
Can I remove memberstack.com from the Consent screen?
Yes! But need to update a few DNS settings and configure your custom domains first.
Can members login using a sign up form?
Yes! By default, members who already have an account will automatically be logged.
Can members sign up using a login form?
By default no, but you can enable sign ups in login forms by adding a new attribute to your login modal buttons. Here's a 1-minute video tutorial showing how to add the attributes.
- Add the
data-ms-social-auth-allow-signupattribute to your custom login forms (data-ms-form="login"). - Add the
data-ms-social-auth-allow-signupattribute to your login modal buttons (data-ms-modal="login").
Once complete, your social auth buttons will create accounts for new members.
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
Remove "memberstack.com" from the consent screen.
Errors are usually caused by a miss-matched redirect URI. Click here to learn more.
How to fix the "Access Blocked" error:
Comments
32 comments
Hello,
Will it be possible to let our historic user use the Google login if they have a Gmail address ?
Thanks,
William
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.
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.
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.
Hey Duncan from Memberstack,
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.
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.
Hello Duncan from Memberstack
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!
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"
Hey Duncan from Memberstack,
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?
Hey Duncan Hamra,
Are we able to fetch "first name" from Google Login? Is it something that Memberstack hasn't supported yet?
Hey Team JobWizard 👋 Yes, if you have a custom field called First Name or Name, we will automatically pull that information from Google 👍
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.
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.
Hi,
How do I map the user info like name coming from google oAuth to custom fields.
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.
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.
Hi Shreyas, please send your custom field IDs to me at duncan@memberstack.com.
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!
Hello Duncan from Memberstack 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
Hello , how can I solve private info processed link?
Is this the error you are referring to?
https://www.loom.com/share/98579530b50f47d489b492764bb84bbe?sid=a81edf03-a41e-4c1f-9fd1-5165987f1526
Can you also use google authentication to fill in the full-name custom field?
Dylan Backes I think it has to be "first-name" and "last-name."
Tyler Bell is it easy to add support for "full-name"?
What are all the google attributes, you can get and fill into your memberstack?
Tyler Bell do you have this list handy? "What are all the google attributes, you can get and fill into your memberstack?"
Hello Duncan from Memberstack. is it possible to just get the user's email when we use Google Auth. ? I don't want the profile picture and the name for example. I want the user to set them manually.
Abdelhalim WithDev it's going to pull in the profile image no matter what. But you can change the first name and last name id's to something other than first-name and last-name and then those will not be mapped.
Hey Duncan from Memberstack, I'm pretty confused. I've followed the steps in the videos but when I publish my site and try to use the 'continue with google' button nothing happens. Wondering if i'm missing something, here is my login form page: https://www.halai.ai/sign-up
Hey Jake 👋 I found a few possible issues https://www.loom.com/share/23a5eef02f954f328bffa5f0af4ceb4d
https://docs.memberstack.com/hc/en-us/articles/18191676511515-Getting-Started-Checklist-Webflow
Please sign in to leave a comment.