Cómo integrar un proyecto Next.js con Firebase Auth usando un dominio personalizado
Muestra el mensaje "Elegir una cuenta para continuar en myweb.com" en vez de firebaseapp.com al iniciar sesión con Google en Firebase Auth. Una guía completa con configuración DNS, Firebase Hosting y Google Cloud.
1. ¿Por qué necesitamos Firebase Hosting para la autenticación?
Firebase Auth redirige a la ruta especial /__/auth/handler, que solo existe en Firebase Hosting. Si tu dominio no está conectado a Hosting, recibirás un error 404. Para usar un dominio personalizado en la pantalla de login de Google, 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 solo un subdominio para autenticación (ej. auth.myweb.com) y mantener tu sitio principal en otro hosting como Vercel.
3. Conexión del dominio personalizado en Firebase
En Firebase Console, agrega tu dominio personalizado en la sección de Hosting. Sigue los pasos para verificarlo con un registro TXT y apuntar un registro A (para el dominio raíz) o CNAME (para subdominio).
Ejemplo para auth.myweb.com:
- TXT: auth.myweb.com = google-site-verification=xxxxx
- CNAME: auth.myweb.com ➝ myproject.firebaseapp.com
4. Configuración en Google Cloud Console (OAuth)
Entra en Google Cloud Console, selecciona tu proyecto y edita el "OAuth 2.0 Client ID".
- Authorized JavaScript origins: https://myweb.com y/o https://auth.myweb.com, más http://localhost:3000 si desarrollas localmente.
- Redirect URIs: https://myweb.com/__/auth/handler o https://auth.myweb.com/__/auth/handler.
5. Configura firebaseConfig en tu proyecto
Cambia el valor de authDomain en tu config de Firebase:authDomain: "myweb.com" si usas el dominio principal.authDomain: "auth.myweb.com" si usas un subdominio.
6. Despliegue a Firebase Hosting
Si tu sitio Next.js va a estar completamente en Firebase:npm install -g firebase-tools
firebase login
firebase init hosting
firebase deploy
7. Usar solo autenticación en Firebase (subdominio)
Si mantienes tu sitio en Vercel, conecta un subdominio auth.myweb.com a Firebase Hosting. Actualiza firebaseConfig, la consola de Google Cloud y asegúrate de tener configurado el CNAME correctamente.
8. Pruebas locales
Añade http://localhost:3000 y http://localhost:3000/__/auth/handler como orígenes y URIs de redirección en Google Cloud Console. Esto te permitirá probar la autenticación localmente sin errores.
9. Problemas comunes
404 en /__/auth/handler: El dominio no está conectado a Firebase Hosting.
SSL no emitido: Espera unos minutos o revisa los registros DNS.
Origen no autorizado: Verifica que los valores coincidan exactamente entre firebaseConfig y Google Cloud Console.
Subdominio mal configurado: El CNAME debe apuntar a xxxxx.firebaseapp.com.
10. Conclusión
Usar un dominio personalizado con Firebase Auth mejora la marca y evita el uso de firebaseapp.com. Ya sea que alojes todo tu sitio en Firebase o solo la autenticación en un subdominio, esta guía cubre todos los pasos.
Resumen:
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.
