The React Native SDK provides the option for you to use pre-built login flows, supporting dark and light themes, with easy configuration, detailed below.
UI Configuration
Handling Deeplinks
For Email Magic Links and Password Reset flows, this component handles the deeplinking automatically. You'll need to add a custom URL scheme and redirect URL as explained below.
First, you need to configure your app to listen for a deeplink with the scheme: stytch-ui-[YOUR_PUBLIC_TOKEN]. How you do that will depend on your supported platforms and whether you are using bare React Native or Expo.
NOTE If you are using Expo Router, which is the default for new apps created with create-expo-app, you must add a +native-intent.tsx file which ignores the incoming Stytch UI deep links. An example of this can be found here.
Lastly, you'll need to add a special redirect URL in your Stytch Dashboard Redirect URLs. It should have a URL of stytch-ui-[YOUR_PUBLIC_TOKEN]://deeplink and be applied to all redirect types.
Once both the scheme (in your app) and the redirect URL (in your Dashboard) are configured, our pre-built UI should handle the rest.
Fields
client* StytchClient
config* StytchUIConfig
import React, { useEffect } from 'react';
import { useStytch, StytchUI, useStytchUser, RNUIProducts, OTPMethods, OAuthProviders } from '@stytch/react-native';
const Login = ({ navigation }) => {
const config = {
productConfig: {
products: [RNUIProducts.emailMagicLinks, RNUIProducts.oauth, RNUIProducts.passwords, RNUIProducts.otp],
emailMagicLinksOptions: {},
oAuthOptions: {
providers: [OAuthProviders.Google, OAuthProviders.Apple, OAuthProviders.Github],
},
otpOptions: {
methods: [OTPMethods.SMS, OTPMethods.WhatsApp],
expirationMinutes: 10,
},
sessionOptions: {
sessionDurationMinutes: 30,
},
passwordOptions: {},
},
};
const stytch = useStytch();
const { user } = useStytchUser();
useEffect(() => {
if (user) {
navigation.navigate('Profile');
}
}, [user, navigation]);
return <StytchUI client={stytch} config={config}></StytchUI>;
};
export default Login;