Redux-Oidc / Oidc-client-js in React Native
I’ve recently been working on the mobile app for GetBusy and we are exploring the idea of creating the initial version of the app using React Native.
One of the first tasks is to allow users authenticate, and after some research it seems that oidc-client-js is the best/only library for the job, so I got to work trying to make it work in React Native. It is a bit of a rocky road, with little documentation, so here is a run down of the issues I needed to fix:
- Unfortunately there an issue with React Native and NPM packages which use Babel. The error is pretty cryptic “Cannot read property ‘TYPED_ARRAY_SUPPORT’ of undefined”. The solution (until the NPM package is updated) switch to the non-minified version by editing the main element in package.json in the node_modules folder (switching “lib/oidc-client.min.js” to “lib/oidc-client.js”). Hopefully this will be resolved in the next version (version 1.3.1 I guess).

2. The UserManager requires a few settings overriding from the defaults — specifically the redirectNavigator, the userStore and stateStore. Create a RedirectNavigator class — the default implementation uses window.location which obviously isn’t an option in React Native — so create a version that makes use of the Linking or a WebView. You will need a store object to pass into WebStorageStateStore for both userStore and stateStore — as the default implementation relies upon localStorage / sessionStorage. React Native has a persistent storage API, AsyncStorage — which can be used instead.
4. If using Redux-OIDC, the CallbackComponent calls the userManager.signinRedirectCallback without any parameters which fails as it fallbacks to trying to retrieve the URL from window.location — so you need call this directly with the redirected URL from the received from Identity Server.
I haven’t got silent renew / session monitoring working yet — but I’ll update this post when I do.
That is pretty much it. Hope that helps someone! :D
