OpenID Connect SSO in React-Redux app

Question

I'm trying to implement SSO on my React-Redux app using an OpenID-Connect provider. The intent is to protect all components and redirect the user to the Identity Provider's login page if the session ends. This is why I cannot have a dedicated Login page (component) in the application. I've read that saving JWTs in the localStorage could be a good idea so I was thinking of using a flag isAuthenticated in the Redux store and keep JWTs in the localStorage. I can then fetch the JWTs from the localStorage to authenticate other APIs I'd be calling from within my app. Is this approach appropriate?

Moreover can anyone point me to a library/package that I can use to fetch (and refresh) JWTs for this purpose? I went through a lot of documentation and tried out the following but couldn't get these to work:

• redux-oidc: I don't have any specific Callback component in my application so I don't quite know how to apply this approach to my app.

• passport-openid-connect: Passport relies on storing sessions in cookies but I'd like to use the localSorage instead.

• redux-auth-wrapper: A higher order component sounds great but I still cannot figure out how to integrate it without any dedicated Login component.

Could someone please guide me through? I'm a newbie to the React ecosystem so please excuse my incomprehension.

Any help would be much appreciated!

Thanks

Answer 1

You are on the right track - redux-oidc manages your Redux state with the login details - the client library that actually manages the JWT (implicit flow), redirecting to the IdentityServer (whichever) login page and returning to your app (the "callback") is oidc-client.

redux-auth-wrapper is just a HOC (High Order Component) - basically a wrapper to check if the user is authenticated (either in the Redux store or with a custom function) and forward to a login page - in my opinion you do not really need it as redux-oidc already gives you everything you need.

I personally also implemented an IdentityServer4 - to centrally manage all external providers - and it's been working great 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 of IdentityServer4 is explaining extremely well how the identification works and the flows (implicit vs hybrid). Once you know the Identity basics and how it all hangs together, have a look at the redux-oidc sample (very easy to follow).

Have fun ;)