@stytch/stytch-react-native

---

noteId: "531c04906b2111ebb150c5c7eebb2104" tags: []

---

Stytch React Native SDK

iOS

Requirements for iOS:

The minimum deployment target needs to be at least 12.0 Required react-native version 0.60.x+

1. Adding the SDK dependency

npm install @stytch/stytch-react-native --save or yarn add @stytch/stytch-react-native

Update the Stytch pod with: cd ios pod install pod update

IMPORTANT

You need to register your app scheme for deep link handling. Open Target -> Info tab -> URL Types, add a new one with your URL Scheme which is used in Stytch configuration (the same scheme used when sending configureWithProjectId function param scheme)

iOS Swift

Add this import after import UIKit line import Stytch

Add these lines to the bottom of AppDelegate.swift file

func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool { return Stytch.shared.handleMagicLinkUrl(userActivity.webpageURL) }

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool { return Stytch.shared.handleMagicLinkUrl(url) }

func application(_ application: UIApplication, open url: URL, sourceApplication: String?, annotation: Any) -> Bool { return Stytch.shared.handleMagicLinkUrl(url) }

iOS Objective C

Add this import after #import "AppDelegate.h" line #import <Stytch/Stytch.h>

Add these lines to the bottom of AppDelegate.m file

• (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray<id> * _Nullable))restorationHandler { return [Stytch.shared handleMagicLinkUrl: userActivity.webpageURL]; }

• (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options { return [Stytch.shared handleMagicLinkUrl: url]; }

• (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation { return [Stytch.shared handleMagicLinkUrl: url]; }

1. Configure the flow let projectId = "XXXXXX" let secretKey = "XXXXXX"

   StytchSdk.configureWithProjectId(projectId, secretKey, "schema", "https://stytch.com/v1/") StytchSdk.onSuccess(res => { console.log("onSuccess", res) })

   StytchSdk.onFailure(res => { console.log("onFailure", res) })

   StytchSdk.onEvent(res => { console.log("onEvent", res) }) StytchSdk.onMagicLinkSent(res => { console.log("onMagicLinkSent", res) })

   StytchSdk.onDeepLinkHandled(res => { console.log("onDeepLinkHandled", res) })

   StytchSdk.showUI()

   // StytchSdk.closeUI() // when you want to close the default Stytch UI

2. Customizing UI (if using showUI) StytchSdk.showTitle(true) StytchSdk.showBrandLogo(false) StytchSdk.showSubtitle(true) StytchSdk.inputCornerRadius(10) StytchSdk.buttonCornerRadius(5) StytchSdk.titleStyle({ size: 20, font: 'ArialHebrew-Bold', color: "#ffffff" }) StytchSdk.subtitleStyle({ size: 20, font: 'ArialHebrew-Bold', color: "#ffffff" }) StytchSdk.inputTextStyle({ size: 20, font: 'ArialHebrew-Bold', color: "#ffffff" }) StytchSdk.inputPlaceholderStyle({ size: 20, font: 'ArialHebrew-Bold', color: "#ffffff" }) StytchSdk.buttonTextStyle({ size: 20, font: 'ArialHebrew-Bold', color: "#ffffff" })

   StytchSdk.inputBackgroundColor("#aaaaaa") StytchSdk.inputBorderColor("#aaaaaa") StytchSdk.buttonBackgroundColor("#aaaaaa") StytchSdk.backgroundColor("#aaaaaa")

More in-depth reference of functionalities: https://github.com/stytchauth/stytch-ios-example

Android

1. Add this in your AndroidManifest.xml. For StytchUI ACTIVITY_NAME = "com.stytch.sdk.ui.StytchMainActivity" - if using the default stytch UI

   android:host="stytch.com" />

2. If using custom UI, add this within the current tag (): android:host="stytch.com" /> # IMPORTANT: Note the `host=` value, either use test.stytch.com or stytch.com when using in live mode

More in-depth reference of functionalities: https://github.com/stytchauth/stytch-android-example

Full example

ReactNative example repo: https://github.com/stytchauth/stytch-react-native-example