Example of using 0Auth provider such as Google about redux-auth-wrapper

[jbellmore31g]

Hey guys!

Just wanted to chime in with something that may or may not be helpful. I was just trying to solve the issue of how to hook up a react app to do authentication properly with my own open ID connect provider (based on the IdentityServer project). While trying to figure this out I stumbled across a nice little redux wrapper for the oidc-client-js library.

The library I am using is the redux-oidc library. It wraps the complexities of using the oidc-client-js library and adds a redux middleware to handle the authentication, as well as provide some components to handle the callback. The oidc-client-js library does a lot of the heavy lifting for handling session management, where to store tokens, etc and the redux-oidc library bridges the gap with redux.

Long story short, I was having issues with ensuring the user was logged in on page refreshes prior to making api requests and I came across your wonderful library! The redux-oidc library needed a few tweaks to be able to take advantage of your async user info loading (which is required due to the design of the oidc-client-js library) and I was able to work with the author of the library to get a PR submitted to allow better integration between both of your libraries.

Just wanted to give you a heads up in case it helps any of your users out!

I created a fork of the original author's example app to show the integration between the two libraries, which actually uses google as the open id connect provider. It shows using the redux-oidc middleware to handle the authentication and redux-auth-wrapper to ensure the user is logged in and the user's info is loaded prior to loading a component. The example repo can be found here:

https://github.com/jbellmore31g/redux-oidc-example

Hope this helps, thanks a bunch for your team's work on this library, it is great!

[mjrussell]

Ah interesting. I think there are a few different ways you could approach this. Here's a couple of spitballing ideas that might work. I think some of these might be useful not just in an OAuth approach but also any token system where you want to refresh manually on the client instead of letting it expire and redirecting the user back to login.

Push token refresh to actions

One approach would be to make the tokens/refresh completely hidden from the authentication/authorization wrapper. Essentially the flow would be to store the user data from the OAuth request in the store after making the OAuth request and for the AuthWrapper to use this as the decision point for allowing users. Then you write a job to refresh the tokens when they expire, using redux-thunk middleware & setTimeout or a more elegant solution might include redux-saga. This approach has the benefit of your auth wrapper having no knowledge about an OAuth provider and making it easy to swap out authentication mechanisms (or support both user/pass and OAuth in the same app).

Recheck token validity in onEnter
You could use an onEnter hook on the route to refresh the token. React-Router allows for the callback argument on onEnter to perform async actions before the transition completes. You could dispatch an action to refresh and on success of that refresh then complete the call back (or route them back to login). This could be used in combo with the HOC using the store data for auth. This has the downside of typical onEnter approaches in that if the user is on a page and the token expires they won't be redirected or anything, but that might not be an issue depending on the app.

Recheck token validity in HOC
This one might be a little bit more "out there" but you could abuse the routeAction that gets dispatched. You could make the predicate to the HOC check the user's token, if it is expired/going to expire soon, return false and pass a custom redirectAction which takes the location, first tries to refresh the token, if successful does nothing and if it fails would call push from react-router-redux or directly on history.

[BenjaminRCooper]

Thanks @mjrussell. Currently attempting the 2nd option so will feedback any hurdles I potentially encounter.

[oyeanuj]

@BenjaminRCooper I was curious on how your attempt went? What was the final solutiont that you ended up with?

[epozsh]

@jbellmore31g
Hello, i have same think, i have got provider based on Identity server 4. I haven't see yet redux-oidc-example yet. Is this example going to help me with oauth autentication to the identityserver4?