OpenID Connect SSO in React-Redux App

Question

I am trying to implement SSO in my React-Redux application using the OpenID-Connect provider. The goal is to protect all components and redirect the user to the Identity Provider login page if the session ends. That is why I cannot have a special login page (component) in the application. I read that storing JWT in localStorage might be a good idea, so I thought about using the isAuthenticated flag in the Redux store and storing the JWT in localStorage. Then I can get JWTs from localStorage to authenticate other APIs that I call from my application. Is this approach appropriate?

Also, can anyone point me to a library / package that I can use to retrieve (and update) the JWT for this purpose? I went through a lot of documentation and tried the following, but couldn't get them to work:

• redux-oidc : I do not have a special callback component in my application, so I don’t quite know how to apply this approach to my application.

• passport-openid-connect : The passport relies on storing sessions in cookies, but instead I would like to use localSorage.

• redux-auth-wrapper : a higher order component sounds great, but I still can't figure out how to integrate it without any special input component,

Can anyone advise me? I am new to the React ecosystem, so please excuse my misunderstanding.

Any help would be greatly appreciated!

thanks

Answer 1

You are on the right track - redux-oidc manages your Redux status with login information - a client library that actually manages the JWT (implicit stream), redirects to the IdentityServer identification page (depending on which) and returns to your application (" callback ") is an oidc client.

redux-auth-wrapper is just HOC (a high-order component) - basically a shell for user authentication (either in Redux repository or with a custom function) and forwarding to the login page - in my opinion, you really do not need it, because redux-oidc already gives you everything you need.

I personally also implemented IdentityServer4 - for centralized management of all external providers - and it has been working fine so far.

I would suggest first looking at https://blogs.msdn.microsoft.com/webdev/2017/04/26/the-mvp-show-learns-about-asp-net-identity-server-and-heidelberg/ , where the creator IdentityServer4 very well explains how authentication works, and flows (implicit vs hybrid). Once you learn the basics of Identity and how it all hangs, check out the redux-oidc example (very easy to follow).

Good luck;)