Google OAuth Setup

Configure Google OAuth to enable social login for your ZapStart application

On this page

Introduction

Google OAuth allows users to sign up and log in to your application using their Google accounts. This provides a seamless authentication experience without requiring users to create and remember another set of credentials.

Social login increases conversion rates by making it easier for users to create accounts and access your application.

Google Cloud Setup

To use Google OAuth, you'll need to create a project in the Google Cloud Console:

  1. Go to the Google Cloud Console
  2. Click on APIs & Services
  3. Click on Create project
  4. Enter a name for your project, e.g. ZapStart
  5. Click on Create
  6. Fill in the required fields like App name and User support email
  7. Choose External for audience
    8. then continue.
  8. One the overview page click on Create OAuth client or go directly to Client from the left menu and then click on Create client
Please note that the UI in the Google Cloud Console is changing from time to time. But the steps or the filling information should be the same.

Create OAuth Client

  1. Select Web application as the application type
  2. Set a name for your OAuth client like ZapStart
  3. Under Authorized JavaScript origins, add:http://localhost:3001 and add the your production domain https://yourdomain.com
  4. Under Authorized redirect URIs, add:http://localhost:3000/api/auth/callback/google and add the your production callback URL https://api.yourdomain.com/api/auth/callback/google
    Later we will make the api prefix of our domain points to the backend server.
  5. Click Create
  6. Copy the Client ID and Client Secret to your .env file into these two variables:
    7. GOOGLE_CLIENT_ID=your_client_id_here 
GOOGLE_CLIENT_SECRET=your_client_secret_here
GOOGLE_REDIRECT_URI=http://localhost:3000/api/auth/callback/google

    Note for the GOOGLE_REDIRECT_URI we added the local uri, but in production it should be the callback uri of your backend server.

Configure Data Access

In the Google Cloud Console, you'll need to configure what data your application can access:

  1. Navigate to APIs & Services -> OAuth consent screen
  2. Under Scopes, click Add or Remove Scopes
  3. Select the necessary scopes for your application:
    • openid - For OpenID Connect authentication
    • https://www.googleapis.com/auth/userinfo.email - For email access
    • https://www.googleapis.com/auth/userinfo.profile - For profile information

Only request the scopes your application actually needs. Requesting unnecessary scopes may make users hesitant to grant access to your application.

At this point you should be able to use the google oauth in your app but under the test mode.

Configure Branding

Customize how your application appears to users during the OAuth flow:

  1. In the OAuth consent screen, go to the Branding section from the left menu
  2. Fill in the required fields like App name and User support email
  3. For privacy policy and terms of service, go to the tos/ and privacy-policy/ pages in your frontend app and create those pages using the instructions in the files, even though the app is not yet launched but you will need to enter the urls in the google console, https://yourdomain.com/tos and https://yourdomain.com/privacy-policy

While some branding elements are optional, having a complete and professional branding setup helps build trust with your users during the authentication process.

Domain Verification

Before you can publish your OAuth app to production, Google requires that you verify ownership of your domain:

  1. Go to Google Search Console
  2. Select the URL prefix property type and enter your domain (e.g., https://yourdomain.com)
  3. Follow the verification steps, which typically involve adding a DNS record to your domain's DNS configuration
  4. Once verified, you can reference this domain in your Google Cloud OAuth configuration

Domain verification is a critical step for publishing your OAuth application. Without it, Google may limit your application's functionality or require additional verification steps.

Moving to Production

When you're ready to deploy your application to production:

  1. Ensure you've completed the domain verification process
  2. Return to the Google Cloud Console's OAuth consent screen
  3. Click Publish App to move from testing to production, you will probably always find the Publish App button in the audience section
  4. Add your production URLs to the OAuth client credentials:
    • Add your production domain (e.g., https://yourdomain.com) to Authorized JavaScript origins
    • Add your production callback URL (e.g., https://api.yourdomain.com/api/auth/callback/google) to Authorized redirect URIs if you didn't add them already
  5. Update your production environment variables with the correct redirect URI:
    GOOGLE_REDIRECT_URI=https://api.yourdomain.com/api/auth/callback/google

The verification process can be time-consuming, especially if your app uses sensitive scopes. Plan accordingly and start the verification process well before your intended launch date because it takes few days and sometimes weeks.

Troubleshooting

Common issues and their solutions:

Error: redirect_uri_mismatch

The redirect URI in your request doesn't match the ones authorized for your OAuth client.

Solution:

  • Ensure the GOOGLE_REDIRECT_URI in your .env exactly matches what you added in the Google console
  • Check for typos and HTTP vs. HTTPS inconsistencies

Error: invalid_client

The OAuth client was not found or is invalid.

Solution:

  • Double-check your GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET values
  • Ensure your OAuth client is properly created and enabled

Error: Test users only

A non-test user tried to log in while your app is in Testing mode.

Solution:

  • Add the user to your test users list, or
  • Publish your app to production if you're ready

For a tutorial on User Authentication and Authorization, please see the User Authentication tutorial.

Next Steps

Now that you've configured your JWT secrets, MongoDB, and Google OAuth, you can continue setting up the rest:

Back to DocumentationBack to top