I have implemented the OIDC in the backend express app using express-openid-connect with the provider as ADFS and on successful authentication the express app saves the info into session and the backend APIs are protected. What mechanism/library I can use to protect my react app using OIDC and can also hit the protected APIs at the same time? React and Node are on different domain basically they are independent and deployed on different server.

CodePudding user response：

WEBSITE MODEL

The express library is for scenarios where you are using a Node.js website that serves your React app's static content. Requests for your index.html file will trigger a redirect if there is no secure cookie yet.

After user sign in, an HTTP only encrypted cookie is written, and you can then call APIs via other routes in the website, as explained in this section of the docs. The web back end decrypts the cookie, then makes an access token available that can be forwarded from the website to APIs.

SPA STATIC CONTENT HOST

If you want to serve the SPA as just static content, similar to development web servers like webpack, the express solution is not the right architectural choice and you need a different option. You can't just throw these things together.

However, current security best practices mean you should only use secure cookies in the browser, so you need to solve this problem, and it is far from easy. The simplest option in the short term may be to serve static content via express.

FURTHER INFO

We have plenty of info on SPA architectures at Curity, starting with SPA Best Practices and a React Code Example, but it is very architectural, and SPA security is a tough topic. So you need to discuss requirements with your stakeholders, based on costs and benefits.