Iniciar sesión con Google en Next.js

Objetivo Configurar inicio de sesión con Google en un proyecto Next.js orientado a un CMS interno donde no existe un flujo de registro público y los usuarios son añadidos por un administrador

Resumen del enfoque Se utiliza un kit inicial como base, se configura OAuth 2.0 con Google para permitir solo inicio de sesión, se guarda la información mínima del usuario y se gestiona sesión segura mediante cookies HTTP only y una tabla de sesiones en Postgres gestionada con Drizzle

Repositorio de referencia https://github.com/justin-calleja/next-google-auth-blog-post y kit inicial https://github.com/webdevcody/wdc-saas-starter-kit

Credenciales de Google Crear proyecto en console.cloud.google.com, configurar OAuth Consent Screen, crear credenciales tipo web application, añadir en Authorized JavaScript origins la URL de desarrollo https://localhost:3000 y en Authorized redirect URIs la ruta https://localhost:3000/api/sign-in/google/callback Copiar CLIENT ID y CLIENT SECRET y colocarlos en el fichero de entorno .env como GOOGLE_CLIENT_ID y GOOGLE_CLIENT_SECRET También definir HOST_NAME para construir la URL de callback

Instalación de dependencias Instalar Drizzle y dependencias de base de datos como drizzle-orm pg dotenv y como dependencias de desarrollo drizzle-kit tsx @types/pg Para el flujo OAuth se recomienda usar la librería arctic que abstrae las complejidades de OAuth 2.0 y permite añadir nuevos proveedores con facilidad

Postgres local usar docker-compose con una imagen de Postgres 15 y volumen persistente, crear una base de datos dedicada para el proyecto e inicializarla con un script init-db.sql que cree la base next-google-auth-db Con DATABASE_URL en .env apuntando a postgresql://admin:pass234@localhost:5432/next-google-auth-db se puede usar psql o herramientas como drizzle-kit studio para inspeccionar la base

Definición de esquemas con Drizzle crear una tabla tmp_user con columnas id, email, name, given_name, family_name, picture y una tabla tmp_session con id, userId que referencia tmp_user id con on delete cascade y expires_at timestamp with time zone El índice en userId ayuda en operaciones como cerrar sesión en todos los dispositivos

Migraciones y sincronización ejecutar drizzle-kit generate para generar las migraciones y drizzle-kit migrate para aplicarlas Esto crea las tablas tmp_user y tmp_session según el esquema definido y deja la estructura lista para el uso del CMS interno

Next.js UI básica instalar shadcn y añadir el componente Button para crear una página de inicio de sesión que muestre un botón Continue with Google que apunte a la ruta /api/sign-in/google

Flujo OAuth con arctic instalar arctic y crear dos endpoints principales 1 Ruta GET en /api/sign-in/google que genere un state y un code verifier, construya la URL de autorización con los scopes profile y email, almacene state y code verifier en cookies seguras HTTP only y redirija al usuario a Google 2 Ruta GET en /api/sign-in/google/callback que reciba los parámetros code y state, compare el state recibido con el almacenado en cookie, valide el code usando el code verifier y reciba tokens. Con el access token llamar a https://openidconnect.googleapis.com/v1/userinfo con encabezado Authorization Bearer para obtener los datos del usuario

Validación en el CMS interno al recibir los datos de Google buscar por email en la tabla tmp_user Si no existe el email se considera que el usuario no está autorizado y se redirige a /sign-in con error unauthorized Si existe el usuario actualizar campos faltantes como name, given_name, family_name o picture y continuar con la creación de sesión

Identificador seguro usar siempre sub del payload OpenID Connect como identificador canónico del usuario si se necesita identificar de forma única entre proveedores aunque en un CMS controlado por administrador el control por email puede ser suficiente según la política interna

Gestión de sesiones generar un token de sesión con valores aleatorios cryptograficamente seguros, codificarlo y almacenar en cookie HTTP only sin acceso desde JavaScript Antes de persistir la sesión en la base de datos hashear el token y almacenar el hash en tmp_session junto a expires_at De este modo la cookie contiene el token sin revelar su hash y la verificación se hace hasheando el token recibido

Validación y extensión de sesión proporcionar funciones para obtener el token de la cookie, hashearlo y buscar la sesión en tmp_session Si la sesión expira devolver que no hay usuario autenticado En las páginas protegidas del servidor usar una función assertAuthenticated que obtenga el usuario actual y lance error si no existe La validación puede renovar la expiración si se desea un comportamiento de sliding sessions

Manejo de errores en el flujo OAuth redirigir a la página de inicio de sesión con parámetros en la query para mostrar mensajes como error unauthorized o error something-went-wrong y mostrar al usuario información clara sin exponer detalles sensibles

Beneficios y seguridad Este enfoque evita registros públicos, centraliza el control de acceso mediante un administrador, usa cookies seguras y HTTP only, hash de tokens en la base de datos y validación de state y code verifier para mitigar ataques CSRF y replay en el flujo OAuth

Acerca de Q2BSTUDIO Q2BSTUDIO es una empresa de desarrollo de software y aplicaciones a medida especializada en soluciones empresariales seguras y escalables Ofrecemos software a medida, aplicaciones a medida, inteligencia artificial aplicada, ciberseguridad y servicios cloud aws y azure También realizamos proyectos de servicios inteligencia de negocio, implementación de Power BI, agentes IA y soluciones de ia para empresas Nuestra experiencia cubre desde MVPs hasta plataformas productivas con integraciones cloud y prácticas de seguridad robustas

Por qué elegirnos Q2BSTUDIO combina experiencia en desarrollo a medida y en inteligencia artificial para ofrecer productos que realmente aportan valor trabajamos con arquitecturas cloud en aws y azure y aplicamos buenas prácticas de ciberseguridad para proteger datos críticos Además ofrecemos servicios inteligencia de negocio y Power BI para convertir datos en decisiones operativas y estratégicas Podemos integrar agentes IA para automatizar flujos y potenciar procesos internos con ia para empresas

Servicios relacionados ofrecidos integración de inicio de sesión único con proveedores OAuth y OpenID Connect desarrollo de API seguras gestión de sesiones y autenticación adaptada a entornos internos auditoría y hardening de seguridad migración y despliegue en servicios cloud aws y azure implementación de pipelines de datos y soluciones de servicios inteligencia de negocio desarrollo de aplicaciones a medida e integración de agentes IA y soluciones de inteligencia artificial para procesos de negocio

Conclusión Implementar Google sign-in en Next.js para un CMS interno es totalmente factible y seguro si se siguen las mejores prácticas descritas generar state y code verifier, usar cookies seguras HTTP only, validar el code y usar sub o un criterio interno de identificación, mantener tokens hasheados en la base de datos y validar sesiones en cada página protegida Q2BSTUDIO puede ayudar en el diseño e implementación de este flujo, adaptar la solución a sus necesidades y garantizar que la plataforma sea escalable, segura y alineada con sus objetivos de negocio Contacte con nosotros para construir su solución de software a medida que incluya autenticación segura, inteligencia artificial y capacidades de inteligencia de negocio