Get Started
Integrate
Customize
Webhooks
Deploy on your Cloud
Security Concerns
React Native SDK
How to integrate with a React Native app
This guide provides instructions to integrate authgear with a react native app. Supported platforms include:
- Android
- iOS
Setup Application in Authgear
Signup for an account in https://portal.authgearapps.com/ and create a project. Or you can use your self-deployed Authgear.
After that, we will need to create an application in Authgear.
Portal
authgear.yaml (self-deployed)
Create an application
- 1.Go to "Applications".
- 2.Click "Add Application" in the top right corner
- 3.Input the name of your application, this is for reference only
- 4.Defining a custom scheme that the users will be redirected back to your app after they have authenticated with Authgear. Add the URI to "Redirect URIs". (e.g. com.myapp://host/path).
- 5.Click "Save" and keep the client id. You can also obtain the client id from the list later.
If you want to validate JWT access token in your server, select Issue JWT as access token. If you will forward incoming requests to Authgear Resolver Endpoint for authentication, leave this unchecked. See comparisons in Backend Integration.
1
oauth:
2
clients:
3
- name: your_app_name
4
client_id: a_random_generated_string
5
redirect_uris:
6
- "com.myapp://host/path"
7
grant_types:
8
- authorization_code
9
- refresh_token
10
response_types:
11
- code
12
- none
Copied!
Create a React Native app
Follow the documentation of React Native to see how you can create a new React Native app.
1
npx react-native init myapp
2
cd myapp
Copied!
Install the SDK
1
yarn add --exact @authgear/react-native
2
(cd ios && pod install)
Copied!
Platform Integration
To finish the integration, setup the app to handle the redirectURI specified in the application. This part requires platform specific integration.
Android
Add the following activity entry to the
AndroidManifest.xml of your app. The intent system would dispatch the redirect URI to OAuthRedirectActivity and the sdk would handle the rest.1
<!-- Your application configuration. Omitted here for brevity -->
2
<application>
3
<!-- Other activities or entries -->
4
​
5
<!-- Add the following activity -->
6
<activity android:name="com.authgear.reactnative.OAuthRedirectActivity"
7
android:launchMode="singleTask">
8
<intent-filter>
9
<action android:name="android.intent.action.VIEW" />
10
<category android:name="android.intent.category.DEFAULT" />
11
<category android:name="android.intent.category.BROWSABLE" />
12
<!-- Configure data to be the exact redirect URI your app uses. -->
13
<!-- Here, we are using com.authgear.example://host/path as configured in authgear.yaml. -->
14
<!-- NOTE: The redirectURI supplied in AuthorizeOptions *has* to match as well -->
15
<data android:scheme="com.myapp.example"
16
android:host="host"
17
android:pathPrefix="/path"/>
18
</intent-filter>
19
</activity>
20
</application>
Copied!
iOS
Declare URL Handling in Info.plist
In
Info.plist, add the matching redirect URI.1
<?xml version="1.0" encoding="UTF-8"?>
2
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
3
<plist version="1.0">
4
<dict>
5
<!-- Other entries -->
6
<key>CFBundleURLTypes</key>
7
<array>
8
<dict>
9
<key>CFBundleTypeRole</key>
10
<string>Editor</string>
11
<key>CFBundleURLSchemes</key>
12
<array>
13
<string>com.myapp.example</string>
14
</array>
15
</dict>
16
</array>
17
</dict>
18
</plist>
Copied!
Insert the SDK Integration Code
In
AppDelegate.m, add the following code snippet.1
// Other imports...
2
#import <authgear-react-native/AGAuthgearReactNative.h>
3
​
4
// Other methods...
5
​
6
// For handling deeplink
7
- (BOOL)application:(UIApplication *)app
8
openURL:(NSURL *)url
9
options:
10
(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options {
11
return [AGAuthgearReactNative application:app openURL:url options:options];
12
}
13
​
14
// For handling deeplink
15
// deprecated, for supporting older devices (iOS < 9.0)
16
- (BOOL)application:(UIApplication *)application
17
openURL:(NSURL *)url
18
sourceApplication:(NSString *)sourceApplication
19
annotation:(id)annotation {
20
return [AGAuthgearReactNative application:application
21
openURL:url
22
sourceApplication:sourceApplication
23
annotation:annotation];
24
}
25
​
26
// for handling universal link
27
- (BOOL)application:(UIApplication *)application
28
continueUserActivity:(NSUserActivity *)userActivity
29
restorationHandler:
30
(void (^)(NSArray<id<UIUserActivityRestoring>> *_Nullable))
31
restorationHandler {
32
return [AGAuthgearReactNative application:application
33
continueUserActivity:userActivity
34
restorationHandler:restorationHandler];
35
}
Copied!
Try authenticate
Add this code to your react native app. This snippet configures authgear to connect to an authgear server deployed at
endpoint with the client you have just setup via clientID, opens a browser for authorization, and then upon success redirects to the app via the redirectURI specified.1
import React, { useCallback } from "react";
2
import { View, Button } from "react-native";
3
import authgear from "@authgear/react-native";
4
​
5
function LoginScreen() {
6
const onPress = useCallback(() => {
7
// Normally you should only configure once when the app launches.
8
authgear
9
.configure({
10
clientID: "a_random_generated_string",
11
endpoint: "http://<myapp>.authgearapps.com",
12
})
13
.then(() => {
14
authgear
15
.authorize({
16
redirectURI: "com.myapp.example://host/path",
17
})
18
.then(({ userInfo }) => {
19
console.log(userInfo);
20
});
21
});
22
}, []);
23
​
24
return (
25
<View>
26
<Button onPress={onPress} title="Authenticate" />
27
</View>
28
);
29
}
Copied!
Using the Access Token in HTTP Requests
To include the access token to the HTTP requests to your application server, there are two ways to achieve this.
Option 1: Using fetch function provided by Authgear SDK
Authgear SDK provides the
fetch function for you to call your application server. The fetch function will include the Authorization header in your application request, and handle refresh access token automatically. authgear.fetch implement fetch.1
authgear
2
.fetch("YOUR_SERVER_URL")
3
.then(response => response.json())
4
.then(data => console.log(data));
Copied!
Option 2: Add the access token to your HTTP
You can access the access token through
authgear.accessToken. Call refreshAccessTokenIfNeeded every time before using the access token, the function will check and make the network call only if the access token has expired. Include the access token into the Authorization header of your application request.1
authgear
2
.refreshAccessTokenIfNeeded()
3
.then(() => {
4
// access token is ready to use
5
// accessToken can be string or undefined
6
// it will be empty if user is not logged in or session is invalid
7
const accessToken = authgear.accessToken;
8
​
9
// include Authorization header in your application request
10
const headers = {
11
Authorization: `Bearer ${accessToken}`
12
};
13
});
Copied!
Logout
To log out the user from the current app session, you need to invoke the
logoutfunction.1
authgear
2
.logout()
3
.then(() => {
4
// logout successfully
5
});
Copied!
Next steps
To protect your application server from unauthorized access. You will need to integrate your backend with Authgear.
Last modified 5mo ago