React Native SDK - UI Config | Stytch Consumer authentication

UI Configuration

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.

Handling Deeplinks

For Email Magic Links and Password Reset flows, this component handles the deeplinking automatically. All you need to do is add the following deeplink URL scheme to your application: 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.

For Expo, see here.

For bare React Native, see here.

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;