Aplicaciones modernas rara vez funcionan de forma aislada y requieren una arquitectura segura para proteger la experiencia del usuario y los datos sensibles. En Q2BSTUDIO, empresa de desarrollo de software y aplicaciones a medida especializada en inteligencia artificial, ciberseguridad y servicios cloud aws y azure, implementamos patrones que separan frontend y backend y garantizan que solo usuarios autenticados accedan a recursos protegidos. Aquí explicamos cómo integrar Next.js con Microsoft Entra ID y validar tokens JWT desde un backend en Node y TypeScript.
Arquitectura general y flujo de autenticación 1) El usuario abre la aplicación Next.js y solicita iniciar sesión. 2) NextAuth redirige al usuario a Microsoft Entra ID para autenticación. 3) Entra ID emite un ID Token y un Access Token hacia el frontend. 4) El frontend añade el Access Token en el header Authorization: Bearer TOKEN y llama a la API backend. 5) El backend valida el JWT contra el JWKS publicado por Entra ID y, si es válido, permite el acceso a rutas protegidas; si no, responde 401 Unauthorized.
Registro de la aplicación en Microsoft Entra ID en Azure Portal vaya a App registrations y cree una nueva aplicación con los siguientes valores ejemplo Nombre: nextjs-auth-app Redirect URI: https://localhost:3000/api/auth/callback active ID tokens y Access tokens después de crear la app anote Application client ID y Directory tenant ID y genere un Client Secret en Certificates & secrets
Frontend Next.js con NextAuth instalación npm install next-auth @azure/msal-node variables de entorno ejemplo AZURE_AD_CLIENT_ID=CLIENT_ID AZURE_AD_CLIENT_SECRET=CLIENT_SECRET AZURE_AD_TENANT_ID=TENANT_ID NEXTAUTH_URL=https://localhost:3000 NEXTAUTH_SECRET=CLAVE_ALEATORIA en la configuración de NextAuth utilice el proveedor Azure AD y configure session strategy usando JWT. En los callbacks almacene access_token en el token JWT y propáguelo al objeto session para que el frontend pueda enviar el Access Token al backend.
Consumo de la API desde el cliente use useSession desde next-auth para obtener session y luego haga fetch a la API segura incluyendo el header Authorization con Bearer TOKEN ejemplo fetch a https://localhost:4000/api/secure-data con headers Authorization: Bearer TOKEN y procese la respuesta JSON para mostrar datos protegidos al usuario autenticado
Backend en Node y TypeScript instalación npm install express jsonwebtoken jwks-rsa express-jwt npm install -D @types/express @types/jsonwebtoken en Express cree un middleware de validación JWT usando jwks-rsa para obtener las claves públicas desde la URL JWKS ejemplo https://login.microsoftonline.com/TENANT_ID/discovery/v2.0/keys y configure audience con el Application client ID y issuer con https://login.microsoftonline.com/TENANT_ID/v2.0 utilice el algoritmo RS256 Si el token es válido deje pasar la petición y devuelva los datos sensibles; si no devuelva 401 Unauthorized
Prueba local ejecute el backend en el puerto 4000 y el frontend en el puerto 3000 acceda a la ruta protegida en Next.js inicie sesión con su cuenta corporativa y confirme que el backend valida el token y devuelve la respuesta autorizada
Buenas prácticas protección de secretos nunca exponga client secret en el frontend guarde credenciales en variables de entorno y en servicios de secretos sesiones seguras prefiera cookies httpOnly o JWT gestionados por NextAuth validación rigurosa configure correctamente audience y issuer para evitar tokens mal emitidos observabilidad registre intentos de autenticación fallidos y errores para facilitar auditoría y depuración escalabilidad este patrón facilita añadir múltiples microservicios que validen tokens sin depender del frontend
Extensiones y recomendaciones puede integrar llamadas a Microsoft Graph API desde servicios backend validados o escalar a microservicios que consuman el mismo esquema de tokens para mantener una arquitectura coherente y segura Si necesita un desarrollo a medida visite nuestra página de software a medida y si busca soluciones de inteligencia artificial para empresas conozca nuestros servicios de inteligencia artificial
Sobre Q2BSTUDIO Q2BSTUDIO es una empresa de desarrollo de software enfocada en aplicaciones a medida, servicios cloud aws y azure, ciberseguridad, servicios inteligencia de negocio y soluciones de ia para empresas. Ofrecemos desde aplicaciones corporativas hasta agentes IA y proyectos con Power BI para inteligencia de negocio. Contamos con experiencia en arquitectura segura de identidad, integración con proveedores de identidad y despliegue en la nube para mantener la confidencialidad integridad y disponibilidad de sus datos
Conclusión adoptar Microsoft Entra ID como proveedor central de identidad junto a Next.js en el frontend y un backend Node TypeScript que valide JWT mediante JWKS proporciona un flujo seguro de extremo a extremo. Este patrón protege datos sensibles y permite escalar hacia microservicios o integrar funcionalidades avanzadas como agentes IA o paneles con power bi manteniendo cumplimiento y controles de seguridad. Si desea que Q2BSTUDIO le acompañe en la implementación de esta arquitectura o en proyectos de ciberseguridad y automatización, podemos ayudar a diseñar e implementar la solución adecuada para su negocio
.jpg)