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, 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.

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* StytchB2BClient
config* StytchRNB2BUIConfig
callbacks object
import React from 'react';
import {
  StytchB2BUI,
  StytchRNB2BUIConfig,
  AuthFlowType,
  B2BProducts,
  B2BOAuthProviders,
  Callbacks,
  StytchEventType,
} from '@stytch/react-native';
import { useStytchB2BClient } from '@stytch/react-native/b2b';

const Login = ({ navigation }) => {
  const stytch = useStytchB2BClient();
  const callbacks: Callbacks = {
    onEvent(event) {
      if (event.type == StytchEventType.AuthenticateFlowComplete) {
        navigation.navigate('Profile');
      }
    },
  };
  const config: StytchRNB2BUIConfig = {
    productConfig: {
      products: [B2BProducts.emailMagicLinks, B2BProducts.oauth, B2BProducts.passwords, B2BProducts.sso],
      authFlowType: AuthFlowType.Organization,
      sessionOptions: { sessionDurationMinutes: 60 },
      oauthOptions: {
        providers: [B2BOAuthProviders.Google],
      },
    },
    organizationSlug: 'your-organization-slug',
  };
  return <StytchB2BUI client={stytch} config={config} callbacks={callbacks}></StytchB2BUI>;
};

export default Login;