Firebase Auth con dominio personalizado en Next.js

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.