Configure Google OAuth for a new domain (Next.js and .NET API)

When a system moves to a new admin email and a new domain, its Google OAuth credentials have to be redone: register the app in Google Cloud Console, get a new Client ID and Client Secret, then update the environment variables of both the Frontend (Next.js) and the Backend (.NET API). This guide walks through each step.

Throughout, example.com is the Frontend domain and api.example.com is the Backend domain - replace them with your real domains. <client-id> and <client-secret> are the two values Google gives you in Step 2.

Quick reference

1. Google Cloud: create a Web application Client ID under Credentials.
2. Authorized JavaScript origins: the origin URLs (http://localhost:3000, https://example.com).
3. Authorized redirect URIs: the callback paths (e.g. .../api/auth/google/callback).
4. Copy the generated Client ID and Client Secret.
5. Frontend: update NEXT_PUBLIC_API_URL and NEXT_PUBLIC_GOOGLE_CLIENT_ID in .env.
6. Backend: update Google__ClientId, Google__ClientSecret, Google__RedirectUri and Frontend__BaseUrl.

Step 1: Register the app in Google Cloud (OAuth consent screen)

If you have not created a consent screen for the new email yet:

1. Sign in to Google Cloud Console.
2. Create a new project or pick the existing one.
3. Go to APIs & Services -> OAuth consent screen (or click Get Started in the new UI).
4. Choose User Type: External and continue.
5. Fill in the details:
   • App name: your application's name.
   • User support email and Developer contact email: your email.
   • Authorized domains: the root domain (e.g. example.com).
6. Click Save and Continue until you reach the end (Finish).

Step 2: Create credentials to get the Client ID and Client Secret

1. Switch to Credentials (left-hand menu).
2. Click the blue + CREATE CREDENTIALS button (or CREATE CLIENT) -> choose OAuth client ID.
3. For Application type, choose Web application.
4. Give the client a Name (e.g. Project Web Client).
5. Under Authorized JavaScript origins, add:
   • http://localhost:3000
   • https://example.com
6. Under Authorized redirect URIs, add every callback link:
   • http://localhost:3000/vi/auth/callback
   • http://localhost:3000/en/auth/callback
   • https://example.com/vi/auth/callback
   • https://example.com/en/auth/callback
   • https://api.example.com/api/auth/google/callback (handled by the Backend)
7. Click Create. Copy the Client ID and Client Secret right away.

Step 3: Update the Frontend environment variables

Open the .env file (or the deploy environment settings) of the Frontend (Next.js) project and change:

# Point the Backend base URL at the new domain
NEXT_PUBLIC_API_URL=https://api.example.com/api

# The Google Client ID from Step 2
NEXT_PUBLIC_GOOGLE_CLIENT_ID=<client-id>

Step 4: Update the Backend environment variables

Open the .env file (or the production config file) of the Backend (.NET API) project and edit:

# Google OAuth settings
Google__ClientId=<client-id>
Google__ClientSecret=<client-secret>
Google__RedirectUri=https://api.example.com/api/auth/google/callback

# Frontend base URL, used for CORS and the related redirect logic
Frontend__BaseUrl=https://example.com

Troubleshooting