/
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
      Start Member Email Update
      Update Self
      Delete Self Password
      Delete Self MFA Phone Number
      Delete Self MFA TOTP
      Unlink Retired Self Email
      Start Self Email Update
      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 Encryption Private Key
      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
    Device Fingerprinting
      Get telemetry ID
    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

The Stytch B2B client object.


config* StytchRNB2BUIConfig
productConfig* StytchB2BUIConfig

The config object for the UI components.

products* B2BProducts[]

The products array allows you to specify the authentication methods that you would like to expose to your users.

The order of the products that you include here will also be the order in which they appear in the login form, with the first product specified appearing at the top of the login form.

Currently the JavaScript B2B SDK supports our emailMagicLinks, oauth, sso, and passwords products.

emailMagicLinks and oauth are supported in both authentication flow types, whereas sso is only supported in the Organization authentication flow type. passwords is always supported in the Organization authentication flow type, but is also supported in the Discovery flow if cross-org passwords are enabled for the project.

If the only product specified is oauth, and the only OAuth provider specified is google with one_tap set to true, the login form will not be displayed. Instead, we will only show the Google one tap prompt in the upper right of the user's browser.

authFlowType* AuthFlowType

The authFlowType lets you specify the authentication flow type that you wish to enable in the SDK. The options are Discovery to let members log into any organization they are a part of; Organization to let members log into a specific organization; and PasswordReset to handle password reset flows (after the user clicks the password reset redirect URL). To enable the Organization flow type, you also must add a slug pattern to the authorized domain through the Frontend SDK page in the Dashboard.

sessionOptions SessionOptions

The options for session management. We create a session for members when they log in. You can access a member or session using the Member or Session SDK methods.

sessionDurationMinutes int

Set the session lifetime to be this many minutes from now; minimum of 5 and a maximum of 525600 minutes (365 days). Note that a successful authentication will continue to extend the session this many minutes.

emailMagicLinksOptions* B2BEmailMagicLinksOptions

The options for email magic links. This is required if emailMagicLinks is present in the products array.

loginTemplateId string

Custom template ID 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

Custom template ID for sign-up 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 - Sign-up.

passwordOptions* B2BPasswordOptions

The options for Passwords. This is required if passwords is present in the products array.

resetPasswordExpirationMinutes int

The number of minutes that the password reset token sent in password reset emails will be valid for. Defaults to 30 minutes.

resetPasswordTemplateId string

Custom template ID for password reset emails, configured via the Branding page in the Stytch Dashboard. If this value is not specified, your default password reset template will be used.

oauthOptions* B2BOAuthOptions

The options for OAuth. This is required if oauth is present in the products array.

providers* B2BOAuthProviderConfig[]

Specifies which OAuth providers to display.

type string

The provider type. Currently we support google, microsoft, hubspot, slack, and github.

customScopes array[string]

An optional array of scopes that Stytch will request for your application in addition to the base set of scopes required for login.

providerParams object

An object with any additional parameters that you'd like to pass along to the OAuth provider (for example, login_hint, for providers that support it).

directLoginForSingleMembership object

A configuration option that allows you to skip the discovery flow and log a member in directly only if they are a member of a single organization.

status boolean

Whether or not direct login for single membership is enabled. If the user has an invite or can JIT provision into an Organization the Discovery Organization select pane will still be shown unless the other two properties are also enabled.

ignoreInvites boolean

If enabled, logs a user directly into their existing Organization even if they have one or more pending invites to a different Organization. This bypasses the Discovery Organization select pane.

ignoreJitProvisioning boolean

If enabled, logs a user directly into their existing Organization even if they have Organizations they could join via JIT provisioning. This bypasses the Discovery Organization select pane.

directCreateOrganizationForNoMembership boolean

Whether or not an organization should be created directly when a user has no memberships, invitations, or organizations they could join via JIT provisioning. This has no effect if the ability to create organizations from the frontend SDK is disabled in the Stytch Dashboard. Defaults to false.

disableCreateOrganization boolean

Whether to prevent users who are not members of any organization from creating a new organization during the discovery flow. This has no effect if the ability to create organizations from the frontend SDK is disabled in the Stytch Dashboard. Defaults to false.

mfaProductOrder array

The order to present MFA products to a member when multiple choices are available, such as during enrollment.

Currently the JavaScript B2B SDK supports our smsOtp and totp MFA products.

mfaProductInclude array

MFA products to include in the UI. If specified, the list of available products will be limited to those included. Defaults to all available products.

Note that if an organization restricts the available MFA methods, the organization's settings will take precedence. In addition, if a member is enrolled in MFA compatible with their organization's policies, their enrolled methods will always be made available.

Currently the JavaScript B2B SDK supports our smsOtp and totp MFA products.

organizationSlug string

The slug of the organization to present login options for. This is only used when the config.authFlowType is AuthFlowType.Organization.

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

callbacks object

Optional callbacks that are triggered by various events in the SDK. See more details about the callbacks here.

onEvent (data) => void

A callback function that responds to events sent from the SDK.

onError (data) => void

A callback function that responds to errors in the SDK. It is useful for debugging during development and error handling in production.

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;