Implementé el OIDC en la aplicación express de backend usando express-openid-connect con el proveedor como ADFS y, con una autenticación exitosa, la aplicación express guarda la información en la sesión y las API de backend están protegidas. ¿Qué mecanismo/biblioteca puedo usar para proteger mi aplicación de reacción usando OIDC y también puedo acceder a las API protegidas al mismo tiempo? React y Node están en un dominio diferente, básicamente, son independientes y se implementan en un servidor diferente.
MODELO DE SITIO WEB
La biblioteca express es para escenarios en los que está utilizando un sitio web de Node.js que sirve el contenido estático de su aplicación React. Las solicitudes de su archivo index.html activarán una redirección si aún no hay una cookie segura.
Después de que el usuario inicie sesión, se escribe una cookie encriptada solo HTTP y luego puede llamar a las API a través de otras rutas en el sitio web, como se explica en esta sección de los documentos . El back-end web descifra la cookie y luego pone a disposición un token de acceso que se puede reenviar desde el sitio web a las API.
ANFITRIÓN DE CONTENIDO ESTÁTICO DE SPA
Si desea servir el SPA solo como contenido estático, similar a los servidores web de desarrollo como webpack, la solución express no es la elección de arquitectura correcta y necesita una opción diferente. No puedes juntar estas cosas.
Sin embargo, las mejores prácticas de seguridad actuales significan que solo debe usar cookies seguras en el navegador, por lo que debe resolver este problema y no es nada fácil. La opción más sencilla a corto plazo puede ser servir contenido estático vía express.
INFORMACION ADICIONAL
Tenemos mucha información sobre las arquitecturas de SPA en Curity, comenzando con las mejores prácticas de SPA y un ejemplo de código de reacción, pero es muy arquitectónica y la seguridad de SPA es un tema difícil. Por lo tanto, debe analizar los requisitos con las partes interesadas, en función de los costos y los beneficios.