React Native SDK - UI Config | Stytch B2B 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, OAuth, SSO, 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* 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;