For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /es/docs/web/google-sign-in.md (or send Accept: text/markdown).
Añadir el inicio de sesión con Google
Crea un cliente OAuth de Google Cloud gratuito y conecta «Continuar con Google» a la app.
Guía paso a paso para principiantes
Prerrequisitos: la app web corriendo en local (Lanza en 5 minutos) y una base de datos migrada para cuentas reales (Configurar la base de datos). Necesitas una cuenta de Google normal; todo aquí es gratis y lleva unos 10 minutos.
Términos rápidos: OAuth es el estándar en el que Google inicia la sesión del usuario en la página de Google y entrega una prueba a tu app. Un proyecto de Google Cloud es un contenedor en la consola de Google que guarda las credenciales de tu app. La pantalla de consentimiento OAuth es la página que Google muestra a los usuarios antes de devolverlos. Un client ID identifica tu app ante Google; el client secret es su contraseña y se queda en el servidor.
1. Crea un proyecto de Google Cloud. 2. Configura la pantalla de consentimiento. 3. Crea un cliente OAuth Web y copia su ID y secreto. 4. Pega tres valores en apps/web/.env.local y reinicia el servidor de desarrollo.
Un solo proyecto basta para todo el producto: el mismo proyecto de Google Cloud alojará después tu despliegue en Cloud Run, y el inicio de sesión móvil pasa por el mismo backend web — no creas un cliente separado por plataforma o función.
Crear el proyecto de Google Cloud
1. Abre console.cloud.google.com e inicia sesión con tu cuenta de Google.
2. Haz clic en el desplegable de proyecto de la barra superior (junto al logo de Google Cloud) y elige New Project.
3. Dale un nombre — el nombre de tu producto vale — y haz clic en Create. No se necesita organización, tarjeta ni cuenta de facturación para las credenciales de inicio de sesión.
Esperado: la consola se recarga en el nuevo proyecto y su nombre aparece en la barra superior. Reutiliza este proyecto cuando llegues a la guía de despliegue en lugar de crear otro.
Configurar la pantalla de consentimiento OAuth
1. En la navegación izquierda abre APIs & Services → OAuth consent screen y haz clic en Get started.
2. Escribe el nombre de app que verán los usuarios (el nombre de tu producto), elige un correo de soporte al usuario, selecciona External como audiencia, rellena el correo de contacto del desarrollador y haz clic hasta Create.
3. No se necesita nada más en esta pantalla: la app solo pide los scopes por defecto openid, email y profile, que no requieren scopes extra ni verificación.
El estado de publicación permanece en Testing mientras desarrollas. En ese modo solo pueden iniciar sesión las cuentas listadas — añade tu propia dirección de Gmail en Audience → Test users, si no Google te bloquea incluso a ti. Cuando el producto esté en vivo, haz clic en Publish app; como no se piden scopes sensibles, publicar no inicia una revisión de verificación de Google.
Crear el cliente OAuth
1. Abre APIs & Services → Credentials → + Create Credentials → OAuth client ID.
2. Pon Application type en Web application y llámalo algo como supastack local.
3. En Authorized JavaScript origins añade http://localhost:3000. En Authorized redirect URIs añade http://localhost:3000/api/auth/callback/google — esa ruta de callback pertenece a Better Auth, el motor de autenticación por defecto del kit: {APP_URL}/api/auth/callback/google.
4. Haz clic en Create y copia el Client ID y el Client Secret del diálogo. Puedes reabrirlos en la página del cliente más tarde, pero copiarlos ahora te ahorra un paso.
Para producción crea un segundo cliente Web (recomendado) o añade a este: origen JavaScript https://yourdomain.com y URI de redirección https://yourdomain.com/api/auth/callback/google. Mantener clientes separados por entorno significa que un secreto local filtrado no puede llegar a producción.
Añadir los valores a la app
Abre apps/web/.env.local — Next.js lee este archivo, no el .env de la raíz — y escribe las tres líneas de abajo. AUTH_GOOGLE_ENABLED=true enciende el botón; el par cliente identifica tu cliente de Google Cloud.
El client secret es solo de servidor: nunca debe aparecer en una variable NEXT_PUBLIC_ o EXPO_PUBLIC_ ni subirse a Git. En producción, define los mismos tres nombres en el almacén de secretos de tu host en lugar de un archivo env.
Reinicia el servidor de desarrollo tras editar — los cambios de entorno solo se leen al arrancar.
# apps/web/.env.local
AUTH_GOOGLE_ENABLED=true
GOOGLE_CLIENT_ID=your-client-id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your-client-secretVerificar y solucionar problemas
Abre http://localhost:3000/auth, haz clic en el botón de Google, completa la pantalla de consentimiento de Google y confirma que la app vuelve con la sesión iniciada.
redirect_uri_mismatch significa que la URI de redirección registrada en Google no coincide exactamente — revisa el protocolo (http vs https), el puerto y la ruta: debe terminar en /api/auth/callback/google, no en /callback/google/ ni en una variante con barra final.
Access blocked / has not completed the Google verification process significa que la pantalla de consentimiento sigue en Testing y la cuenta que inicia sesión no está en Test users — añádela en la sección Audience.
Si falta el botón de Google o el inicio de sesión sigue fallando tras editar .env.local, reinicia el servidor de desarrollo. Si el arranque falla nombrando una variable, el flag está activo sin su par de cliente completo.