Firebase Auth with Custom Domain in Next.js

Want the "Continue with Google" button to say "Choose an account to continue to myweb.com" instead of showing your Firebase project URL? This guide covers the full setup: DNS, Firebase Hosting, and Google Cloud Console configuration.

1. Why Firebase Hosting Is Required for Auth

Firebase Auth redirects to /__/auth/handler, a route that only exists on Firebase Hosting. If your domain isn't connected to Hosting, this route returns 404 and breaks the OAuth flow. You need to point your domain (or a subdomain) to Firebase Hosting for this to work.

2. Configuration Options

You have two paths:

• Host your entire site (e.g. myweb.com) on Firebase Hosting.
• Host only auth on a subdomain (e.g. auth.myweb.com) and keep your main site on Vercel or another service.

Option 2 is recommended if you're already deployed on Vercel. It keeps your deployment pipeline intact while still getting custom domain auth.

3. Firebase Console Setup: Connecting Your Domain

Go to Firebase Hosting and add your domain or subdomain. Firebase will ask you to verify ownership with a TXT record, then point DNS:

• Root domain: Use A records pointing to Firebase's IPs.
• Subdomain: Use a CNAME pointing to yourproject.web.app.

4. Configuring Auth in Google Cloud Console

In the Google Cloud Console, edit your OAuth 2.0 Client ID:

• Authorized JavaScript origins: https://myweb.com (or https://auth.myweb.com), plus http://localhost:3000 for local dev.
• Redirect URIs: https://yourdomain.com/__/auth/handler

5. Configuring firebaseConfig in Your Next.js Project

Update the authDomain field to match your custom domain:

// For root domain
authDomain: "myweb.com"

// For subdomain
authDomain: "auth.myweb.com"

6. Deploying to Firebase Hosting (Root Domain)

If you're hosting the full site on Firebase:

npm install -g firebase-tools
firebase login
firebase init hosting
firebase deploy

7. Hosting Only Auth on Firebase (Subdomain)

If you keep your site on Vercel, connect only auth.myweb.com to Firebase Hosting. Set authDomain: "auth.myweb.com" in your config and make sure the Cloud Console contains this subdomain and its handler URI.

8. Local Testing

Add http://localhost:3000 to Authorized Origins and http://localhost:3000/__/auth/handler to Redirect URIs in the Cloud Console. Test the login flow and verify the redirect works correctly.

9. Common Issues and Solutions

• 404 on /__/auth/handler: Your domain isn't connected to Firebase Hosting. Check DNS records and the Hosting console.
• SSL certificate issues: Wait a few minutes after DNS changes. Firebase provisions SSL automatically but it takes time.
• Mismatched origin: Make sure the domain in firebaseConfig matches exactly what's in the Cloud Console.
• Subdomain not redirecting: Verify the CNAME points to yourproject.firebaseapp.com.

Quick Summary

1. Connect your domain or subdomain to Firebase Hosting.
2. Set authorized domains and redirect URIs in the Google Cloud Console.
3. Update firebaseConfig with your custom authDomain.
4. Deploy your app or host only the auth handler on the subdomain.