React Native Tutorial
This tutorial demonstrates how to add user login, logout, and profile to a React Native application.
This tutorial shows how to use PlusAuth with React Native Application. If you do not have a PlusAuth account, register from here.
Create PlusAuth Client
After you sign up or log in to PlusAuth, you need to create a client to get the necessary configuration keys in the dashboard.
Go to Clients and create a client with the type of Native Application
Configure Client
Get Client Properties
You will need your Client Id for interacting with PlusAuth. You can retrieve them from the created client's details.
Configure Redirect and Logout URIs
When PlusAuth authenticates a user, it needs a URI to redirect back. That URI must be in your client's Redirect URI list.
If your application uses a redirect URI that is not white-listed in your PlusAuth Client, you will receive an error.
The same thing applies to the logout URIs. After the user logs out, you need a URI to be redirected.
com.plusauth.reactnativeexample:/oauthredirect/login.
The Logout URL you need to add to the Post Logout Redirect URIs field is com.plusauth.reactnativeexample:/.Configure React Native to use PlusAuth
Create a React Native application or download the sample project from the link on the top of the page.
# Create the application using the npx and react-native.
npx react-native init plusauth-react-native-starter
Install OIDC Client
For interacting with PlusAuth it is advised to use an OpenID Connect library.
In this tutorial, we will be using the react-native-app-auth library. However, you could use any other OpenID Connect library.
npm install react-native-app-auth --save
react-native-app-auth is a React Native bridge for AppAuth-iOS and
AppAuth-Android SDKs for communicating with OAuth 2.0 and OpenID Connect providers.
You can find source code on Github.Android Setup
Add redirect scheme to your Android app module's build.gradle file.
...
android {
...
defaultConfig {
...
manifestPlaceholders += [
'appAuthRedirectScheme': '<your_custom_scheme>' // ex: com.plusauth.reactnativeexample
]
}
}
iOS Setup
Follow the iOS Setup instructions in React Native AppAuth docs.
ios folder and perform pod install. Other steps are completed in the project.Configure OIDC Client
We need to initialize our React Native AppAuth library to handle authentication-related operations. Create a new config instance in App.js.
// App.js
const config = {
issuer: 'https://<PLUSAUTH_TENANT_ID>.plusauth.com',
clientId: '<PLUSAUTH_CLIENT_ID>',
redirectUrl: 'com.plusauth.reactnativeexample:/oauthredirect/login',
postLogoutRedirectUrl: 'com.plusauth.reactnativeexample:/',
scopes: ['openid', 'profile', 'email', 'offline_access']
}
Replace clientId value with your Client Id defined in the Configure Client section. Also change the issuer value with your Tenant Id.
plusauth-env.example.js to plusauth-env.js and replace the values accordingly.com.plusauth.reactnativeexample, replace the _redirectUrl and _postLogoutRedirectUrl values accordingly.Implement login, user profile, and logout
Add the following sections to your App.js file under the root of your project.
Before implement login action, create an authState object to store the retrieved tokens.
// App.js
const defaultAuthState = {
accessToken: '',
accessTokenExpirationDate: '',
refreshToken: '',
idToken: ''
}
const [authState, setAuthState] = useState(defaultAuthState)
// Create isLoggedIn state to check if user logged in
const [isLoggedIn, setIsLoggedIn] = useState(false)
// Create profileInfo state to store authenticated user's profile
const [profileInfo, setProfileInfo] = useState(null)
Add Login
We will be using the authorize method to authenticate the user. The application redirects you to the PlusAuth login page using the browser.
Add the following section to your App.js file to start an authentication process.
// App.js
const login = async () => {
try {
// Redirect PlusAuth Login page to authenticate user
const result = await authorize(config)
setAuthState(result)
setIsLoggedIn(true)
} catch (error) {
console.error(error)
}
}
Get Authenticated User Info
You can get authenticated user info by adding the following section:
// App.js
const getProfileInfo = async () => {
try {
// Get authenticated user info
const response = await fetch(
'https://<PLUSAUTH_TENANT_ID>.plusauth.com/oidc/userinfo',
{
method: 'GET',
headers: {
Authorization: 'Bearer ' + authState.accessToken // use retrieved access token
}
}
)
const json = await response.json()
setProfileInfo(json)
} catch (error) {
console.error(error)
}
}
access_token to your request's header with the Authorization key to get user info from PlusAuth. Otherwise, you will get a 401 Unauthorized error response.Add Logout
Add the following section to log out from the application and PlusAuth:
// App.js
const signOut = async () => {
try {
// Logout session from PlusAuth
await logout(config, {
idToken: authState.idToken,
postLogoutRedirectUrl: config.postLogoutRedirectUrl
})
// Clear local session state
setAuthState(defaultAuthState)
setIsLoggedIn(false)
setProfileInfo(null)
} catch (error) {
console.error(error)
}
}
Clear all the tokens after the successful logout process.
Add View
Finally, add the following section to your App.js to interact with the user.
// App.js
// ...
return (
<SafeAreaView>
<AppBar />
<View>
<Text>
Welcome to PlusAuth React Native Demo!
</Text>
<Text>
Username: {profileInfo === null ? '-' : profileInfo.username}
</Text>
<View>
{!isLoggedIn ? (
<Button title="Login" color="#2196F3" onPress={() => login()} />
) : (
<>
<Button color="#2196F3" title="Get Profile Info" onPress={() => getProfileInfo()} />
<View>
<Button color="#D32F2F" title="Logout" onPress={() => signOut()} />
</View>
<Text>
{profileInfo === null ? '' : JSON.stringify(profileInfo)}
</Text>
</>
)}
</View>
</View>
</SafeAreaView>
)
See it in action
That's it. Start your app and point to your device or emulator. Follow the Log In link to log in or sign up to your PlusAuth tenant. After you click the Login button, the browser launches and shows the PlusAuth Login page. Upon successful login or signup, you should be redirected back to the application.