diff --git a/src/content/docs/developer-tools/sdks/native/react-native-sdk.mdx b/src/content/docs/developer-tools/sdks/native/react-native-sdk.mdx index 6268206c3..6d95ab62d 100644 --- a/src/content/docs/developer-tools/sdks/native/react-native-sdk.mdx +++ b/src/content/docs/developer-tools/sdks/native/react-native-sdk.mdx @@ -90,93 +90,21 @@ Fundamentally, both SDK versions have equivalent functionality, so there should -### **Android** - -The SDK requires the `react-native-keychain` and `react-native-inappbrowser-reborn` packages. Sometimes, they may not be automatically linked correctly, resulting in errors when running your app, such as `"Cannot read properties of undefined (reading 'isAvailable')"`. In such cases, you will need to manually link them: - -1. Edit `android/settings.gradle` +### **Required dependencies** - ```java - include ':react-native-keychain' - project(':react-native-keychain').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-keychain/android') - - include ':react-native-inappbrowser-reborn' - project(':react-native-inappbrowser-reborn').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-inappbrowser-reborn/android') - ``` +The SDK requires the `react-native-app-auth`, `react-native-keychain` and `react-native-get-random-values` packages to be installed. -2. Edit `android/app/build.gradle` + - ```java - apply plugin: 'com.android.application' - - android { - ... - } - - dependencies { - ... + ### **iOS** +#### Update iOS native dependencies To update iOS native dependencies, you can use **CocoaPods**. We recommend installing **CocoaPods** using [Homebrew](https://brew.sh/). ```shell @@ -185,23 +113,6 @@ brew install cocoapods cd ios && pod install ``` -The SDK requires the `react-native-keychain` and `react-native-inappbrowser-reborn` packages. Sometimes, they may not be automatically linked correctly, resulting in errors when running your app, such as `"Cannot read properties of undefined (reading 'isAvailable')"`. In such cases, you will need to manually link them: - -1. **Option: With CocoaPods (Highly recommended)** - - Please add the following lines to your **Podfile**, and then run `pod update`: - - ```swift - pod 'RNKeychain', :path => '../node_modules/react-native-keychain' - pod 'RNInAppBrowser', :path => '../node_modules/react-native-inappbrowser-reborn' - ``` - -2. **Option: Manually link the packages with Xcode** - - Go to the **Build Phases** tab and choose **Link Binary With Libraries.** - - Select **+** - - Add **Other** > **Add Files** > **node_modules/react-native-keychain/RNKeychain.xcodeproj** (similar with **RNInAppBrowser**) - - Add **libRNKeychain.a** (similar with **RNInAppBrowser**) - - Clean and rebuild. If you encounter any errors during the SDK installation process, you can refer to the General Tips section at the end of this topic. @@ -249,7 +160,7 @@ KINDE_POST_LOGOUT_REDIRECT_URL=myapp://myhost.kinde.com/kinde_callback KINDE_CLIENT_ID=myclient@live ``` -## Configuration deep link +## Configure deep linking ### **Android** @@ -266,51 +177,162 @@ Open `AndroidManifest.xml` and update your scheme by adding a new block in activ ### **iOS** -You need to link `RCTLinking` to your project using the steps below. - -1. If you also want to listen to incoming app links during your app's execution, add the following lines to your `AppDelegate.m`. - - ```swift - // iOS 9.x or newer - #import - - (BOOL)application:(UIApplication *)application - openURL:(NSURL *)url - options:(NSDictionary *)options - { - return [RCTLinkingManager application:application openURL:url options:options]; - } - ``` - -2. If you're targeting iOS 8.x or older, use the following code instead. - ```swift - // iOS 8.x or older - #import - - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url - sourceApplication:(NSString *)sourceApplication annotation:(id)annotation - { - return [RCTLinkingManager application:application openURL:url - sourceApplication:sourceApplication annotation:annotation]; - } - ``` +Follow the instructions for the language your `AppDelegate` is written in. + + + + + +1. Create a new file, `AppDelegate+RNAppAuth.h`, in the **same folder as your `AppDelegate.swift`** and add the following code: + + ```objc title="AppDelegate+RNAppAuth.h" + #import "RNAppAuthAuthorizationFlowManager.h" + ``` + +2. Configure the `Objective-C Bridging Header`. + + How you do this depends on whether your project already has an `Objective-C Bridging Header` set. + + Check your Xcode `Build Settings` for `Objective-C Bridging Header` to see if a path is already set. + +
+ Open for steps + + - Open the project in Xcode. + - Select the project in the navigator, then the app target. + - Open the `Build Settings` tab. + - Search for `Bridging Header`. + - Check the value next to the setting name. + - If it is empty, you do not have an existing header. + - If there is a file path, you already have one configured. +
+ + + + Set `Objective-C Bridging Header` to the path of the newly created file: `$(SRCROOT)/$(TARGET_NAME)/AppDelegate+RNAppAuth.h`. + + + Open the `Objective-C Bridging Header` file your project is already using (e.g., `YourApp-Bridging-Header.h`) and add the following import statement to it: + + ```diff lang="objc" title="YourApp-Bridging-Header.h" + + #import "AppDelegate+RNAppAuth.h" + ``` + + +
+ +3. Update `AppDelegate.swift` file with the following code: + + + + ```diff lang="swift" title="AppDelegate.swift" + @main + - class AppDelegate: UIResponder, UIApplicationDelegate { + + class AppDelegate: UIResponder, UIApplicationDelegate, RNAppAuthAuthorizationFlowManager { + + + + public weak var authorizationFlowManagerDelegate: RNAppAuthAuthorizationFlowManagerDelegate? + ``` + + **Custom scheme support:** + + ```diff lang="swift" title="AppDelegate.swift" + + func application( + + _ app: UIApplication, + + open url: URL, + + options: [UIApplication.OpenURLOptionsKey: Any] = [:] + + ) -> Bool { + + if let authorizationFlowManagerDelegate = self.authorizationFlowManagerDelegate { + + if authorizationFlowManagerDelegate.resumeExternalUserAgentFlow(with: url) { + + return true + + } + + } + + return RCTLinkingManager.application(app, open: url, options: options) + + } + ``` + + **Universal link support:** + + ```diff lang="swift" title="AppDelegate.swift" + + func application( + + _ application: UIApplication, + + continue userActivity: NSUserActivity, + + restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void + + ) -> Bool { + + if userActivity.activityType == NSUserActivityTypeBrowsingWeb, + + let url = userActivity.webpageURL, + + let delegate = authorizationFlowManagerDelegate, + + delegate.resumeExternalUserAgentFlow(with: url) + + { + + return true + + } + + return RCTLinkingManager.application( + + application, + + continue: userActivity, + + restorationHandler: restorationHandler + + ) + + } + ``` + + + + + 1. Update your ``AppDelegate.h`` file to include the following: + + ```diff lang="objc" title="AppDelegate.h" + + #import "RNAppAuthAuthorizationFlowManager.h" + + - @interface AppDelegate : RCTAppDelegate + + @interface AppDelegate : RCTAppDelegate + + + + @property(nonatomic, weak) id authorizationFlowManagerDelegate; + ``` + + 2. Update your ``AppDelegate.m`` (or ``AppDelegate.mm``) file to include the following: + + **Add the Linking Manager import to the top of the file:** + + ```diff lang="objc" title="AppDelegate.m" + + #import + ``` + + **Custom scheme support:** + + ```diff lang="objc" title="AppDelegate.m" + + - (BOOL) application: (UIApplication *)application + + openURL: (NSURL *)url + + options: (NSDictionary *) options + + { + + if ([self.authorizationFlowManagerDelegate resumeExternalUserAgentFlowWithURL:url]) { + + return YES; + + } + + return [RCTLinkingManager application:application openURL:url options:options]; + + } + ``` + + **Universal link support:** + + ```diff lang="objc" title="AppDelegate.m" + + - (BOOL) application: (UIApplication *) application + + continueUserActivity: (nonnull NSUserActivity *)userActivity + + restorationHandler: (nonnull void (^)(NSArray> * _Nullable))restorationHandler + + { + + if ([userActivity.activityType isEqualToString:NSUserActivityTypeBrowsingWeb]) { + + if (self.authorizationFlowManagerDelegate) { + + BOOL resumableAuth = [self.authorizationFlowManagerDelegate resumeExternalUserAgentFlowWithURL:userActivity.webpageURL]; + + if (resumableAuth) { + + return YES; + + } + + } + + } + + return [RCTLinkingManager application:application continueUserActivity:userActivity restorationHandler:restorationHandler]; + + } + ``` + + + + -3. Make sure you have a configuration URL scheme in `Info.plist`, so the app can be opened by deep link. - - ```swift - CFBundleURLTypes - - - CFBundleTypeRole - Editor - CFBundleURLName - myapp // you can change it - CFBundleURLSchemes - - myapp // you can change it - - -