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
The Stytch client that you have configured. An easy way to provide this is with the useStytch() hook.
config* StytchUIConfig
productConfig RNUIProductConfig
An object that specifies the products available for login, and their associated configuration
products RNUIProducts[]
The list of products that you wish to enable in the login flow.
emailMagicLinksOptions RNUIEmailMagicLinksOptions
Configuration options for the Email Magic Links product
loginExpirationMinutes number
The length of time that the magic link will be valid for logins
signupExpirationMinutes number
The length of time that the magic link will be valid for signups
loginTemplateId string
Use a custom template for login emails. By default, it will use your default email template. The template must be a template using our built-in customizations or a custom HTML email for Magic links - Login.
signupTemplateId string
Use a custom template for signup emails. By default, it will use your default email template. The template must be a template using our built-in customizations or a custom HTML email for Magic links - Signup.
oAuthOptions RNUIOAuthOptions
Configuration options for the OAuth product
providers OAuthProviders[]
An array of the OAuth providers that have been configured in the Stytch Dashboard
customScopes string[]
Include a space separated list of custom scopes that you'd like to include. Note that this list must be URL encoded, i.e. the spaces must be expressed as %20.
providerParams Record<string, string>
Any parameters that should be forwarded to the OAuth provider can be passed as query parameters with the provider_ prefix. For example, some OAuth providers support a login_hint parameter that allows you to pre-populate the OAuth login flow with a suggested email address. To specify the login_hint parameter in your OAuth request, you'd include provider_login_hint=exampleHint as a query parameter. We recommend consulting each OAuth provider's documentation for a list of supported parameters.
otpOptions RNUIOTPOptions
Configuration options for the One Time Passcode product
methods OTPMethods[]
The list of OTP methods that should be available.
expirationMinutes number
The length of time that an OTP code is valid for
loginTemplateId string
Use a custom template for login emails. By default, it will use your default email template. The template must be a template using our built-in customizations or a custom HTML email for OTP - Login.
signupTemplateId string
Use a custom template for signup emails. By default, it will use your default email template. The template must be a template using our built-in customizations or a custom HTML email for OTP - Signup.
sessionOptions SessionOptions
Configuration options for the sessions that will be created
sessionDurationMinutes number
Set the session lifetime to be this many minutes from now. This will start a new session if one doesn't already exist, returning both an opaque session_token and session_jwt for this session. Remember that the session_jwt will have a fixed lifetime of five minutes regardless of the underlying session duration, and will need to be refreshed over time.
This value must be a minimum of 5 and a maximum of 527040 minutes (366 days).
If a session_token or session_jwt is provided then a successful authentication will continue to extend the session this many minutes.
If the session_duration_minutes parameter is not specified, a Stytch session will not be created.
passwordOptions RNUIPasswordOptions
Configuration options for the Password product
loginExpirationMinutes number
Set the expiration for the login email magic link, in minutes. By default, it expires in 1 hour. The minimum expiration is 5 minutes and the maximum is 7 days (10080 mins).
resetPasswordExpirationMinutes number
Set the expiration for the password reset, in minutes. By default, it expires in 30 minutes. The minimum expiration is 5 minutes and the maximum is 7 days (10080 mins).
resetPasswordTemplateId string
Use a custom template for password reset emails. By default, it will use your default email template. The template must be a template using our built-in customizations or a custom HTML email for Passwords - Password reset.
styles StytchStyles
An object that configures the dark and light themes used by the login UI
darkTheme StytchTheme
Styles that will be applied on devices in dark mode
backgroundColor string
primaryTextColor string
secondaryTextColor string
disabledTextColor string
successColor string
errorColor string
socialButtonBackgroundColor string
socialButtonTextColor string
buttonBackgroundColor string
buttonTextColor string
buttonBorderColor string
buttonBorderRadius number
disabledButtonBackgroundColor string
disabledButtonBorderColor string
disabledButtonTextColor string
inputBorderRadius number
inputBorderColor string
inputBackgroundColor string
inputTextColor string
inputPlaceholderTextColor string
disabledInputBorderColor string
disabledInputBackgroundColor string
disabledInputTextColor string
dialogTextColor string
hideHeaderText boolean
warningBackgroundColor string
warningTextColor string
lightTheme StytchTheme
Styles that will be applied on devices in light mode
backgroundColor string
primaryTextColor string
secondaryTextColor string
disabledTextColor string
successColor string
errorColor string
socialButtonBackgroundColor string
socialButtonTextColor string
buttonBackgroundColor string
buttonTextColor string
buttonBorderColor string
buttonBorderRadius number
disabledButtonBackgroundColor string
disabledButtonBorderColor string
disabledButtonTextColor string
inputBorderRadius number
inputBorderColor string
inputBackgroundColor string
inputTextColor string
inputPlaceholderTextColor string
disabledInputBorderColor string
disabledInputBackgroundColor string
disabledInputTextColor string
dialogTextColor string
hideHeaderText boolean
warningBackgroundColor string
warningTextColor string
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;