Introduction
When building mobile apps nowadays, authentication has become a near essential feature to implement as there’s an increasing need to attach identities to users in order to who is making a particular request. As essential as Identity management has become in recent times, it’s still a pretty tricky field most developers shy away from as there is a lot of responsibility attached to managing and securing user credentials.
This huge responsibility has led to the adoption of identity management platforms such as Okta who provide a unified way to authenticate users and allow developers and businesses to focus on other important parts of their business.
Intended Audience
This tutorial is intended for expo developers who are looking to implement okta as an authentication service provider in their react-native apps.
What is Okta
Okta is a secure and fast way to add authentication and single sign-on to your applications. With Okta, you can connect any application in any language or on any stack to Okta and define how you want your users to sign in. Each time a user tries to authenticate, Okta will verify their identity and send the required information back to your app.
What we’re building
While there are other ways to go about authenticating users in react native, we’re going to look at an implementation using browser-based authentication as I find it the easiest when using Expo – The flow for this is listed below
- User Opens our app and is asked to login before progressing
- User clicks the login button and is redirected to an in-app browser login form using expo-auth-session
- After a successful login, the user is redirected back to our app with a token being stored after a successful login.
- Protected screens are then shown to the user
Getting Familiar with the AuthSession API
The AuthSession API is a pure JS package that provides a way to implement browser-based authentication in mobile apps and is built upon expo-web-browser – a package that allows you to access a device’s web browser as well as provide support for handling redirects.
Getting Ready
If you don’t have one already, head over to developer.okta.com to create a free developer account that enables you to communicate with Okta services.
Once you have got the account setup, proceed to create an Okta app integration by following the onboarding prompt you’re presented with.
After the application has been created, take note of the URL and client ID as we’d need to supply them as credentials later on.
Note: you should also have an expo dev account setup already at expo.dev/signup as we’d need this later on as well.
Well, enough with the talking and let’s get coding now
Setting Up our App
In your preferred directory, set up a fresh expo install using the expo CLI
expo init okta-expo-demo
Our Login screen
In your App.js, implement a simple screen with a basic login button
export default function App(){
return (
<View style={styles.container}>
<Text>Click the Button below to sign in with Okta</Text>
<TouchableOpacity
style={{
padding: 10,
marginTop: 20,
backgroundColor: "#FF4500",
borderRadius: 5,
}}
>
<Text> Login to Demo App</Text>
</TouchableOpacity>
</View>
);
}
// styles
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
Installing and importing Required Dependencies
Once our login screen has been designed, let’s proceed to install the expo-auth-session package as well as expo-random – its required dependency.
expo install expo-auth-session expo-random
We’d also need the expo-web-browser package to give us access to the browser.
expo install expo-web-browser
After installing the above packages, we may now import them into our app as shown below
import * as WebBrowser from "expo-web-browser";
import {
makeRedirectUri,
useAuthRequest,
useAutoDiscovery,
} from "expo-auth-session";
Next, we can make use of the useAutoDiscovery hook provided to define our oAuth2 endpoint
const discovery = useAutoDiscovery(
"https://dev-91323420.okta.com/oauth2/default"
);
Once our endpoint has been defined, we can now configure an auth request with the useAuthRequest hook along with a redirect URI so the browser is able to redirect users to our app.
const [request, response, promptAsync] = useAuthRequest(
{
clientId: "XXXXXXXXXCLIENTID,
scopes: ["openid", "profile"],
// For usage in managed apps using the proxy
redirectUri: makeRedirectUri({
// For usage in bare and standalone
native: "https://auth.expo.io/@username/app-name",
useProxy,
}),
},
discovery
);
Note that the makeRedirectUri method takes in a required parameter which in expo should be https://auth.expo.io/@[your-username]/[your-app-name]
It’s also important that we instruct the web browser to dismiss the web popup when we’re done authenticating using the following line of code.
WebBrowser.maybeCompleteAuthSession()
Finally, add an onclick handler to the login button
onPress={() => {
promptAsync({ useProxy });
}}
When users click the login button, the flow goes pretty much similar to the screenshots below
In total, this is what your app.js should look like
import React, { useState } from "react";
import { StyleSheet, View, TouchableOpacity, Text, Alert } from "react-native";
import * as WebBrowser from "expo-web-browser";
import {
makeRedirectUri,
useAuthRequest,
useAutoDiscovery,
} from "expo-auth-session";
import { Platform } from "react-native";
WebBrowser.maybeCompleteAuthSession();
const useProxy = Platform.select({ web: false, default: true });
export default function App() {
// Endpoint
const discovery = useAutoDiscovery(
"https://dev-91323420.okta.com/oauth2/default"
);
// Request
const [request, response, promptAsync] = useAuthRequest(
{
clientId: "0oa1mtbblrBXKZUct5d7",
scopes: ["openid", "profile"],
// For usage in managed apps using the proxy
redirectUri: makeRedirectUri({
// For usage in bare and standalone
// native: "com.okta.dev-91323420:/callback",
native: "https://auth.expo.io/@theafolayan/okta-expo-demo",
useProxy,
}),
},
discovery
);
return ( <View style={styles.container}>
<Text>Click the Button below to sign in with Okta</Text>
<TouchableOpacity
style={{
padding: 10,
marginTop: 20,
backgroundColor: "#FF4500",
borderRadius: 5,
}}
>
<Text> Login to Demo App</Text>
</TouchableOpacity>
</View>)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});Getting the token from a completed login session
The whole point of trying to authenticate users through okta would be defeated if we do not actually get a token to Let’s fix that by checking for a successful response and grabbing a token from the data returned on redirect by using the react useEffect hook.
React.useEffect(() => {
if (response?.type === "success") {
const { code } = response.params;
console.log(code)
}
}, [response]);
Conclusion
We’ve covered a lot in this walkthrough. We started by getting our react native project up and running with the expo CLI. Next, we took a look at the AuthSession API to see how it works. Finally, we integrated Okta as an authentication provider in our expo-generated react-native app.
For storing checking the auth token, I recommend you check out this guide.
I’d love to hear in the comments if this article has helped with your understanding of how to implement browser-based authentication in react native apps. Keep on building awesome stuff! 🚀
1 Comment