Firebase Backend custom domain for NextJS App Hosted on Vercel

Question

So I've made a NextJS App and am using firebase for authentication and firestore. I've bought a domain from GoDaddy and am currently hosting it on Vercel.

Everything is working as intended except that I cannot add a custom domain for firebase (when users click the login button). It still shows project-uid.firebaseapp.com

Is there any way to change that?

I cannot host my app on firebase hosting (since I lose SSR & ISR and I've some APIs too, also NextJS + Cloud Functions/ Cloud Run setup is unnecessarily complicated).

I tried adding a custom domain but it never gets verified ( been at it for 3 weeks now).

Answer 1

By default, Firebase Auth uses the default subdomain for your project, which is <project-id>.firebaseapp.com. You can customize that to any Firebase Hosting-hosted domain using the steps here. (You'll need to update the authDomain in your Firebase config, and add the domain as authorized in Firebase Auth and Google OAuth).

While it cannot use a domain hosted on Vercel for this (since the redirect handler won't exist), you still have a couple options:

1. Use a subdomain (like auth.mydomain.com), and set that up with Firebase Hosting and Auth. You'll need to update your DNS to point all request to that subdomain to Firebase.
2. Add a new non-custom domain site to Firebase Hosting (<custom-name>.web.app) and configure that with Firebase Auth.