Expo app with Auth0 – Authorization Code Grant Flow with PKCE

Auth0 offers Authorization Code Grant Flow with PKCE. This flow allows a native app to get an id_token, access_token and the refresh_token. There is an Auth0 tutorial on implementing this flow in iOS apps, Android apps and React Native apps. Unfortunately, there is little documentation available currently for using this flow with an Expo React Native app.

There is an example expo-auth0 github repo but it only covers the Auth0 implicit flow. It does provide the foundation for the flow though, and there is just a few of modificaitions needed to implement the PKCE portion.

The Auth0 documentation mentions that you need to first generate a cryptographically secure randomized string of at least a certain length, and then sha256 hash that value (these are called the verifier and the challenge, respectively). Both values will be used in subsequent payloads during authentication. The documentation makes use of crypto in its JavaScript examples.

This presents a problem because in React Native, there is no access to the Node crypto package directly. While there is an option to load the crypto library through browserify, it can potentially add 21K+ additional lines of JavaScript to your bundle. You also cannot dip into Android or iOS specific native code when using Expo without ejecting first. This is a very limiting situation.

Our compromise in this situation was actually to request the random string and hash from our own API service. This way, we can have unique verifier and challenge strings ready for each user, without app locally making these strings up itself. This is probably secure enough, given that our API service is protected with HTTPS, and if these simple strings are comproised somehow over the wire, there are even larger targets when going through the Auth0 authentication itself.