Consumer Authentication

/

SDKs

/

React Native SDK reference

/

UI config

UI config

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.


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;