This article will guide you through adding a "Continue with Google" button to your signup, login, and profile forms. Part one walks you through setting up your Google Cloud Console project step by step. Part two covers how to configure Google Authentication in Memberstack and add the button to your front-end forms.
NEW: Faster Google Authentication Setup!
You now have two options for Google authentication:
- Quick Setup: Enable Google auth instantly using Memberstack's credentials - no client ID or secret required. Just enable Google auth without filling the fields.
- Custom Setup: Connect your own Google account (following the instructions below) for full customization. The quick setup option lets you get started in seconds while maintaining the option to switch to your own credentials later if needed.
📋 Prerequisites
Before you begin, ensure you have:
- A Memberstack account
- A Google Cloud Console account
- Access to your website code or Webflow project
1) Google Cloud Console Setup
Step 1: Create a Google Cloud Project
- Go to the Google Cloud Console.
- Click the project dropdown at the top and select New Project.
- Enter a Project Name, choose an Organization (if applicable), and click Create.
Step 2: Configure OAuth Consent Screen
- Click the bars (☰) icon in the top-left corner to open the left sidebar if it’s hidden.
- In the left sidebar, navigate to APIs & Services > OAuth consent screen.
- Click Get Started.
- Fill in the app info:
| Field | Description |
|---|---|
| App name | Public name shown during login |
| User support email | Email users can contact for help |
| Audience (Internal/External) | Choose External to allow public access |
| Developer contact email(s) | These email addresses are for Google to notify you about any changes to your project. |
| Google API Services User Data Policy | You’ll need to review and agree to this policy before proceeding |
- Click Next for each step of the app info until the final step, then click Continue, and Create.
Step 3: Create OAuth 2.0 Credentials
On the page that displays after saving your OAuth consent screen:
- Click Create OAuth Client ID.
💡 Note: If you're not automatically taken to this page, you can also get there by navigating to:
APIs & Services > Credentials in the left sidebar, then click + Create Credentials > OAuth client ID.
- For Application type, choose Web application.
- Give your OAuth client a name (e.g., Johnson Web App).
- In the Authorized redirect URIs section, click + Add URI and paste the following:
Use:
https://client.memberstack.com/auth/callbackOtherwise, if you're using a custom domain, use:
https://memberstack-client.yourdomain.com/auth/callback(Make sure to replace
yourdomain.comwith your actual domain name.)
- Click Create.
⚠️ You’ll now be shown your Client ID and Client Secret — copy both, as you'll need them for Memberstack.
Step 4: Configure the branding
- Hover over the left sidebar, and navigate to Branding.
- Fill in the app info:
| Field | Description |
|---|---|
| App logo | Optional |
| App domain | Your domain (e.g., yourdomain.com) |
| Authorized domains | Add your domain (e.g., yourdomain.com) |
- Click Save.
✅ Your Google project is now configured for OAuth authentication.
Step 5: Publish Your App (Optional but Required for Public Access)
- Hover over the left sidebar, and navigate to Audience.
- Click Publish App, then confirm.
🚀 Publishing is required if you want your app to be publicly accessible (i.e., for people who aren’t test users).
🧪 You can leave the app in Testing mode if you're still building. In this case:
- Up to 100 test users can authenticate.
- You'll need to manually add each test user under the Test Users section of your OAuth settings.
- Only these users will see the consent screen and be able to log in with Google.
2) Google Auth Setup in Memberstack and Webflow
Step 1: Connect Google in Memberstack
- Log in to your Memberstack dashboard.
- Navigate to Settings > Auth Providers.
- Click the Configure button next to Google.
- Paste your Client ID and Client Secret from the previous step.
To find them, hover over the left sidebar, navigate to Clients, and click on the name of your OAuth 2.0 Client ID.
- Toggle the switch to enable Google Auth and click Save.
Step 2: Add the Google Button to Your Signup Form
- Copy either the Light Theme Google Button or the Dark Theme Google Button from Memberstack's Social Auth Components.
- Paste the button inside your signup form (not just inside a form block).
⚠️ The Google button must be placed correctly inside a Memberstack signup form for it to work properly.
Step 3: Publish and Test
- Publish your Webflow site.
- Open the live version and click "Continue with Google".
- You should be redirected to Google, authenticate, and return with a successful login.
3) 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
4) Troubleshooting & Common Errors
❌ Button Not Opening Google Auth Popup?
✅ Fix:
- Ensure the button is inside the correct form.
- Confirm
data-ms-auth-provider="google"is set.
❌ Error: invalid_client or redirect_uri_mismatch
✅ Fix:
-
Double-check the redirect URI in Google Console matches exactly:
Use:
https://client.memberstack.com/auth/callbackOtherwise, if you're using a custom domain, use:
https://memberstack-client.yourdomain.com/auth/callback(Make sure to replace
yourdomain.comwith your actual domain name.)
❌ Google Consent Screen Not Showing Your Domain
✅ Fix:
- Go to the OAuth consent screen in Google Cloud.
- Ensure your domain is added under Authorized domains.
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.