This article will guide you through adding a "Continue with Google" button to your signup, login, and profile forms. Part one walks you through, step by step, setting up your Google Cloud Console project. 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:

1. Quick Setup: Enable Google auth instantly using Memberstack's credentials - no client ID or secret required. Just enable Google auth without filling the fields.
2. 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

1. Go to the Google Cloud Console.

1. Click the project dropdown at the top and select New Project.
2. Enter a Project Name, choose an Organization (if applicable), and click Create.

Step 2: Configure OAuth Consent Screen

1. Click the bars (☰) icon in the top-left corner to open the left sidebar if it’s hidden.
2. In the left sidebar, navigate to APIs & Services > OAuth consent screen.
3. Click Get Started.
4. Fill in the app info:

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

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

1. For Application type, choose Web application.
2. Give your OAuth client a name (e.g., Johnson Web App).

3. In the Authorized redirect URIs section, click + Add URI and paste the following:

   Use:

   https://client.memberstack.com/auth/callback

   Otherwise, if you're using a custom domain, use:

   https://memberstack-client.yourdomain.com/auth/callback

   (Make sure to replace yourdomain.com with your actual domain name.)
   
   

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

1. Hover over the left sidebar, and navigate to Branding.
2. Fill in the app info:

1. Click Save.

✅ Your Google project is now configured for OAuth authentication.

Step 5: Publish Your App (Optional but Required for Public Access)

1. Hover over the left sidebar, and navigate to Audience.
2. 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

1. Log in to your Memberstack dashboard.
2. Navigate to Settings > Auth Providers.
3. Click the Configure button next to Google.

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

1. Toggle the switch to enable Google Auth and click Save.

Step 2: Add the Google Button to Your Signup Form

1. Copy either the Light Theme Google Button or the Dark Theme Google Button from Memberstack's Social Auth Components.

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

1. Publish your Webflow site.
2. Open the live version and click "Continue with Google".
3. 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.

1. Add the data-ms-social-auth-allow-signup attribute to your custom login forms (data-ms-form="login").
2. Add the data-ms-social-auth-allow-signup attribute 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/callback

  Otherwise, if you're using a custom domain, use:

  https://memberstack-client.yourdomain.com/auth/callback

  (Make sure to replace yourdomain.com with 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.