How to Integrate a Next.js Project with Firebase Auth Using a Custom Domain

Want the button "Continue with Google" to say "Choose an account to continue to myweb.com"? Here's how to fully integrate Firebase Auth with your custom domain.

This guide provides a complete step-by-step setup, including DNS details, Firebase Hosting, and Google Cloud Console configuration to use your domain with Firebase Auth.

1. Why Do We Need Firebase Hosting for Authentication?

Firebase Auth redirects to /__/auth/handler, a route that only exists on Firebase Hosting. If your domain isn't hosted there, this route returns 404, breaking the OAuth flow.

2. Configuration Options

You have two main options:
1. Host your entire site (e.g. myweb.com) on Firebase.
2. Host only auth on a subdomain (e.g. auth.myweb.com) and keep your site on Vercel or another service.

3. Firebase Console Setup: Connecting Your Domain

Go to Firebase Hosting and add your domain or subdomain. Verify ownership with a TXT record, then point DNS records:
- Root domain: Use A records.
- Subdomain: Use a CNAME pointing to yourproject.web.app.

4. Configuring Auth in the Google Cloud Console

In the Cloud Console:
- Add https://myweb.com or https://auth.myweb.com to Authorized JavaScript origins.
- Add https://yourdomain.com/__/auth/handler to Redirect URIs.
- Also include http://localhost:3000 and /__/auth/handler for local testing.

5. Configuring firebaseConfig in Your Next.js Project

Update the authDomain field to match your domain or subdomain:
- authDomain: "myweb.com"
- or authDomain: "auth.myweb.com"

6. Deploying Your Project to Firebase Hosting (Root Domain)

If you host the full site on Firebase:
Run:
npm install -g firebase-tools
firebase login
firebase init hosting
firebase deploy

7. Hosting Only Auth on Firebase (Subdomain Setup)

Use auth.myweb.com for Firebase Hosting.
Set authDomain: "auth.myweb.com" in config.
Ensure Cloud Console contains this subdomain and its handler URI.

8. Local Testing

Add http://localhost:3000 to Authorized Origins.
Add http://localhost:3000/__/auth/handler to Redirect URIs.
Test login and ensure it redirects correctly.

9. Common Issues and Solutions

- 404 on /__/auth/handler: Check DNS + Firebase Hosting setup.
- SSL Certificate issues: Wait or review DNS.
- Mismatched Origin: Ensure consistency across config and Cloud Console.
- Subdomain not redirecting: Confirm CNAME is pointing correctly.

10. Conclusion

By pointing your domain (or subdomain) to Firebase Hosting and updating your authDomain and Cloud Console config, you ensure a seamless login experience for users with your custom branding.

Quick Summary

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