This guide provides instructions to integrate authgear with a react native app. Supported platforms include:
Android
iOS
The React Native SDK is available as a npm package.
You must follow this to get Authgear running first!
In authgear.yaml, declare an OAuth client for the app. This allows the app to authenticate via this client using the authgear sdk.
oauth:clients:- client_id: a_random_generated_stringredirect_uris:- "com.authgear.example://host/path"grant_types:- authorization_code- refresh_tokenresponse_types:- code
Follow the documentation of React Native to see how you can create a new React Native app.
npx react-native init myappcd myapp
# The SDK depends on AsyncStorage.yarn add --exact @react-native-async-storage/async-storageyarn add --exact @authgear/react-native(cd ios && pod install)
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.
import React, { useCallback } from "react";import { View, Button } from "react-native";import authgear from "@authgear/react-native";​function LoginScreen() {const onPress = useCallback(() => {// Normally you should only configure once when the app launches.authgear.configure({clientID: "a_random_generated_string",endpoint: "http://localhost:3000",}).then(() => {authgear.authorize({redirectURI: "com.authgear.example://host/path",}).then(({ userInfo }) => {console.log(userInfo);});});}, []);​return (<View><Button onPress={onPress} title="Authenticate" /></View>);}
To finish the integration, setup the app to handle the redirectURI specified in previous section. This part requires platform specific integration.
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.
<!-- Your application configuration. Omitted here for brevity --><application><!-- Other activities or entries -->​<!-- Add the following activity --><activity android:name="com.oursky.authgear.reactnative.OAuthRedirectActivity"android:exported="false"android:launchMode="singleTask"><intent-filter><action android:name="android.intent.action.VIEW" /><category android:name="android.intent.category.DEFAULT" /><category android:name="android.intent.category.BROWSABLE" /><!-- Configure data to be the exact redirect URI your app uses. --><!-- Here, we are using com.authgear.example://host/path as configured in authgear.yaml. --><!-- NOTE: The redirectURI supplied in AuthorizeOptions *has* to match as well --><data android:scheme="com.authgear.example"android:host="host"android:pathPrefix="/path"/></intent-filter></activity></application>
In Info.plist
, add the matching redirect URI.
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"><plist version="1.0"><dict><!-- Other entries --><key>CFBundleURLTypes</key><array><dict><key>CFBundleTypeRole</key><string>Editor</string><key>CFBundleURLSchemes</key><array><string>com.authgear.example</string></array></dict></array></dict></plist>
In AppDelegate.m
, add the following code snippet.
// Other imports...#import <authgear-react-native/AGAuthgearReactNative.h>​// Other methods...​// For handling deeplink- (BOOL)application:(UIApplication *)appopenURL:(NSURL *)urloptions:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options {return [AGAuthgearReactNative application:app openURL:url options:options];}​// For handling deeplink// deprecated, for supporting older devices (iOS < 9.0)- (BOOL)application:(UIApplication *)applicationopenURL:(NSURL *)urlsourceApplication:(NSString *)sourceApplicationannotation:(id)annotation {return [AGAuthgearReactNative application:applicationopenURL:urlsourceApplication:sourceApplicationannotation:annotation];}​// for handling universal link- (BOOL)application:(UIApplication *)applicationcontinueUserActivity:(NSUserActivity *)userActivityrestorationHandler:(void (^)(NSArray<id<UIUserActivityRestoring>> *_Nullable))restorationHandler {return [AGAuthgearReactNative application:applicationcontinueUserActivity:userActivityrestorationHandler:restorationHandler];}