/
Contact usSee pricingStart building
    Overview
    iOS SDK reference
    Android SDK reference

    React Native SDK reference

    Installation
    Changelog
    Organizations
      Get Organization
      Get Organization by Slug
      Update Organization
      Delete Organization
    Members
      Get Member
      Create Member
      Update Member
      Search Members
      Delete Member
      Reactivate Member
      Delete Member Password
      Delete Member MFA Phone Number
      Delete Member MFA TOTP
      Unlink Retired Member Email
      Update Self
      Delete Self Password
      Delete Self MFA Phone Number
      Delete Self MFA TOTP
      Unlink Retired Self Email
      Update Member (Deprecated)
      Delete Member MFA Phone Number (Deprecated)
    RBAC
      Is Authorized
      Permissions
    Email Magic Links
      Login or Signup
      Invite
      Authenticate
      Send Discovery Email
      Authenticate Discovery Magic Link
    Session Management
      Get Session
      Authenticate Session
      Revoke Session
      Exchange Session
      Get Tokens
      Revoke Sessions for Member
    SSO
      Start SSO Flow
      Authenticate
      Get SSO Connections
      Delete SSO Connection
      Create SAML Connection
      Update SAML Connection
      Update SAML Connection by Metadata URL
      Delete Verification Certificate
      Create OIDC Connection
      Update OIDC Connection
      Create External Connection
      Update External Connection
    Discovery
      List Discovered Organizations
      Create Organization via Discovery
      Exchange Intermediate Session
    Passwords
      Authenticate
      Reset by Email Start
      Reset by Email
      Reset by Existing Password
      Reset by Session
      Strength Check
    SCIM
      Create SCIM Connection
      Update SCIM Connection
      Delete SCIM Connection
      Get SCIM Connection
      Rotate SCIM Token Start
      Rotate SCIM Token Complete
      Rotate SCIM Token Cancel
    Multi-factor Authentication
    • One-Time Passcodes

      • SMS Send
        SMS Authenticate
    • Time-Based One-Time Passcodes

      • TOTP Create
        TOTP Authenticate
    • Recovery Codes

      • Recovery Codes Recover
        Rotate Recovery Codes
        Get Recovery Codes
    Pre-built UI
      UI Configuration
    More Resources
      SWR & caching
      Deep linking
      Android KeyStore considerations
Get support on SlackVisit our developer forum

Contact us

B2B Saas Authentication

/

Mobile SDKs

/

React Native SDK reference

/

Pre-built UI

/

UI Configuration

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;