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:
A) Light Theme Google Button
B) Dark Theme Google Button.
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.
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.
Comments
17 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 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.
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 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!
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 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?
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.
Please sign in to leave a comment.