Skip to main content
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;
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. For Email Magic Links, OAuth, SSO, 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.
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.

​
Props

​
client
StytchClient
required
The Stytch client object.
​
config
StytchUIConfig
required
The config object for the UI components.
​
config.productConfig
RNUIProductConfig
required
The config object for the UI components.
​
config.styles
StytchStyles
An object that configures the dark and light themes used by the login UI.
​
callbacks
object
Optional callbacks that are triggered by various events in the SDK. See more details about the callbacks here.