Show Your Custom Domain on Google OAuth with Firebase

By default, Firebase Auth sends users to a Firebase‑hosted domain (e.g., your-project.web.app or your-project.firebaseapp.com) during Google sign‑in. If you want the Google account chooser to show your own domain instead, you need a dedicated Hosting site on a custom subdomain and you must update your OAuth client settings.

This guide shows the exact steps I used to switch the flow to auth.yourdomain.com.

Overview

• Create a separate Firebase Hosting site and map it to auth.yourdomain.com.
• Ensure your domain is authorized for OAuth in Google Cloud.
• Edit the auto‑created OAuth client to add your custom domain to JavaScript Origins and Redirect URIs.
• Point your app’s authDomain at the custom subdomain.

1) Add a dedicated Hosting site for auth

In Firebase Console → Hosting:

1. Click “Add another site” and give it a name (e.g., auth-site).
2. Under that site, click “Add custom domain” and enter auth.yourdomain.com.
3. Complete DNS verification (TXT/CNAME). If you use Namecheap and Firebase’s values don’t resolve, see the companion post: Fixing Firebase DNS on Namecheap: Remove the Domain From Host.

When verification completes, Firebase serves the auth handler path on your domain at https://auth.yourdomain.com/__/auth/handler.

2) Confirm Authorized domains in Firebase Auth

In Firebase Console → Build → Authentication → Settings → Authorized domains:

• Ensure your base domain (e.g., yourdomain.com) and any subdomains you use (auth.yourdomain.com, app.yourdomain.com) appear. Add them if missing.

3) Configure the OAuth consent screen

In Google Cloud Console → APIs & Services → OAuth consent screen:

• Set App domain to your site (e.g., yourdomain.com).
• Provide links (Homepage, Privacy Policy, Terms) that live on your domain.
• In Authorized domains, add yourdomain.com (root only). The subdomain is implicitly covered.

Publish or re‑verify if required.

4) Update the auto‑created OAuth client

Google creates a client named “Web client (auto created by Google Service)”. Open it:

• Authorized JavaScript origins: add all web origins you serve from, for example:

http://localhost
http://localhost:3000
https://your-project.firebaseapp.com
https://your-project.web.app
https://yourdomain.com
https://app.yourdomain.com

• Authorized redirect URIs: include the Firebase handler for your custom auth site:

https://your-project.firebaseapp.com/__/auth/handler
https://auth.yourdomain.com/__/auth/handler

Keep both the default Firebase domain and your custom domain during migration. Remove the old one later if you’re confident everything uses the new domain.

5) Point your app to the custom domain

Update your Firebase config so the SDK uses your custom domain.

// firebase.ts
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, // ← set to auth.yourdomain.com
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
}

# .env
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=auth.yourdomain.com

Notes:

• The SDK expects just the domain in authDomain (no scheme, no path). It will route to https://auth.yourdomain.com/__/auth/handler internally. If your framework asks for an explicit redirect URL elsewhere, use the full handler path.

6) Test the flow

1. Open your site and start Google sign‑in (popup or redirect).
2. The account chooser URL should now show your domain, not the Firebase default.
3. If you see “redirect_uri_mismatch”, double‑check step 4 values.

Troubleshooting

• redirect_uri_mismatch: The exact https://auth.yourdomain.com/__/auth/handler must be in Authorized redirect URIs.
• blocked by CORS/origin_mismatch: Add your site(s) to Authorized JavaScript origins.
• Consent screen still shows old domain: Clear cookies or try an incognito window; Google caches brand/app details.
• Custom domain won’t verify: Re‑check DNS. For Namecheap, use only the left‑hand host label (no domain suffix) in the Host field.

Once these are in place, users will see your own brand’s domain throughout the Google sign‑in journey.