Firebase Auth con dominio personalizado en Next.js

Muestra el mensaje "Elegir una cuenta para continuar en myweb.com" en vez de firebaseapp.com al iniciar sesión con Google. Esta guía cubre la configuración completa: DNS, Firebase Hosting y Google Cloud Console.

1. ¿Por qué necesitamos Firebase Hosting?

Firebase Auth redirige a la ruta /__/auth/handler, que solo existe en Firebase Hosting. Si tu dominio no está conectado, recibirás un 404. Para usar un dominio personalizado en la pantalla de login, necesitas apuntarlo a Firebase Hosting.

2. Opciones de configuración

Tienes dos opciones:

1. Alojar toda tu web en Firebase Hosting (ej. myweb.com).
2. Usar un subdominio solo para autenticación (ej. auth.myweb.com) y mantener tu sitio en Vercel u otro hosting.

La opción 2 es la recomendada si ya tienes tu app en Vercel. Mantienes tu pipeline de despliegue intacto y solo delegas la autenticación.

3. Conexión del dominio en Firebase Console

En Firebase Console, añade tu dominio en la sección de Hosting. Verifica la propiedad con un registro TXT y apunta los registros DNS:

• Dominio raíz: Registros A apuntando a las IPs de Firebase.
• Subdominio: CNAME apuntando a tuproyecto.web.app.

4. Configuración en Google Cloud Console (OAuth)

En la Google Cloud Console, edita el "OAuth 2.0 Client ID":

• Authorized JavaScript origins: https://myweb.com y/o https://auth.myweb.com, más http://localhost:3000 para desarrollo local.
• Redirect URIs: https://tudominio.com/__/auth/handler

5. Configurar firebaseConfig en tu proyecto

Cambia el valor de authDomain en tu configuración de Firebase:

// Dominio principal
authDomain: "myweb.com"

// Subdominio
authDomain: "auth.myweb.com"

6. Despliegue a Firebase Hosting

Si tu sitio va completamente en Firebase:

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

7. Solo autenticación en Firebase (subdominio)

Si mantienes tu sitio en Vercel, conecta solo auth.myweb.com a Firebase Hosting. Configura authDomain: "auth.myweb.com" y asegúrate de que la Cloud Console tenga este subdominio y su handler URI.

8. Pruebas locales

Añade http://localhost:3000 y http://localhost:3000/__/auth/handler como orígenes y URIs de redirección en la Cloud Console. Prueba el flujo de login y verifica que redirige correctamente.

9. Problemas comunes

• 404 en /__/auth/handler: El dominio no está conectado a Firebase Hosting. Revisa los registros DNS.
• SSL no emitido: Espera unos minutos después de cambiar los DNS. Firebase genera el certificado automáticamente.
• Origen no autorizado: Los valores en firebaseConfig deben coincidir exactamente con la Cloud Console.
• Subdominio mal configurado: El CNAME debe apuntar a tuproyecto.firebaseapp.com.

Resumen rápido

1. Conecta tu dominio o subdominio a Firebase Hosting.
2. Configura OAuth en Google Cloud Console.
3. Cambia el authDomain en tu app.
4. Haz deploy si alojas todo en Firebase.