Learn how to integrate WorkOS SSO into a React Native Expo app.
When it comes to combining the WorkOS SSO solution with mobile applications, our advice on the general flow tends to go like this:
With Expo, you’re able to integrate the WorkOS API with the Expo AuthSession and WebBrowser libraries, which adds web browser based authentication to your app.
To get started, you’ll want to add the the
AuthSession package to your React Native Expo project using the following:
We'll be using the
AuthSession.makeRedirectUri() method to generate a RedirectUri for us to use.
You'll also want to add the the
WebBrowser package to your React Native Expo project using the following:
For our purposes, we’ll specifically be using the
WebBrowser.openAuthSessionAsync() method, which you can read more about here. We will be using two arguments:
The first step in the authentication process will be to Get the Authorization URL and use it as the
url argument in the
openAuthSessionAsync() method. In the code, it would look something like this:
Once the above is in place, you will ultimately have a code which you can then exchange in one more API call for the user profile of the authenticating user. You’ll be making a POST request to Get a Profile and Token with the token, as shown here using Axios:
From the end user’s side, they will be sent to the native UI of their Identity Provider in their mobile browser. After they authenticate with their credentials, they will be dropped back into the native application, ready to go.
That’s all there is to it! By combining WorkOS SSO with React Native Expo AuthSession, adding Single Sign-On to your Expo app is a total breeze with minimal code needed.
To test the React Native Expo flow for yourself, head over to the GitHub repository of our example React Native Expo application and give it a whirl for yourself!