React Native Quickstart

This guide is for our new Kotlin Multiplatform SDK, which is in Public beta.

This guide walks you through adding Stytch authentication to a React Native app using @stytch/react-native-consumer or @stytch/react-native-b2b. Requirements:

React Native 0.80.x or later
React Native’s New Architecture (TurboModules) enabled

1. Install the SDK

# Consumer (B2C apps)
npm install @stytch/react-native-consumer
# or
yarn add @stytch/react-native-consumer

# B2B (organizations/members)
npm install @stytch/react-native-b2b
# or
yarn add @stytch/react-native-b2b

2. Initialize the Client and Wrap Your App

Create the client once at the top level of your app and wrap your component tree with StytchProvider. The client is a singleton; calling createStytchConsumer again returns the same instance.

import {
  createStytchConsumer,
  StytchClientConfiguration,
  StytchProvider,
} from '@stytch/react-native-consumer';

const stytch = createStytchConsumer(
  new StytchClientConfiguration('public-token-live-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx')
);

export default function App() {
  return (
    <StytchProvider stytch={stytch}>
      <YourNavigator />
    </StytchProvider>
  );
}

For B2B apps, swap in createStytchB2B, StytchClientConfiguration, and StytchB2BProvider from @stytch/react-native-b2b. Your public token is in the Stytch Dashboard. Make sure you’ve also enabled the auth methods you want to use under SDK Configuration.

3. Access the Client and State in Components

import {
  useStytch,
  useStytchUser,
  useStytchSession,
  useStytchAuthenticationState,
} from '@stytch/react-native-consumer';
import { ConsumerAuthenticationState } from '@stytch/react-native-consumer';

function AuthStateDisplay() {
  const user = useStytchUser();           // ApiUserV1User | undefined
  const session = useStytchSession();     // ApiSessionV1Session | undefined
  const authState = useStytchAuthenticationState();

  if (authState instanceof ConsumerAuthenticationState.Loading) {
    return <Text>Loading...</Text>;
  }
  if (authState instanceof ConsumerAuthenticationState.Authenticated) {
    return <Text>Logged in as {authState.user.emails?.[0]?.email}</Text>;
  }
  return <Text>Not logged in</Text>;
}

useStytchUser() and useStytchSession() are convenient shortcuts that return the values directly from the authenticated state — they return undefined when the user is not logged in.

4. Auth Methods

All SDK methods are async and throw on error. Wrap them in try/catch.

SMS OTP Example

import { useStytch } from '@stytch/react-native-consumer';

function SmsOtpScreen() {
  const stytch = useStytch();
  const [methodId, setMethodId] = useState('');

  const sendOtp = async (phoneNumber: string) => {
    try {
      const response = await stytch.otp.sms.loginOrCreate({ phoneNumber });
      setMethodId(response.methodId);
    } catch (e) {
      console.error(e);
    }
  };

  const verifyOtp = async (code: string) => {
    try {
      await stytch.otp.authenticate({
        token: code,
        methodId,
        sessionDurationMinutes: 30,
      });
    } catch (e) {
      console.error(e);
    }
  };
}

5. Handle Deeplinks

Magic links and password reset emails redirect back to your app. Set up React Navigation’s deep linking with your URL scheme, then authenticate the token on arrival:

import { Linking } from 'react-native';

useEffect(() => {
  const handleUrl = async ({ url }: { url: string }) => {
    try {
      const result = await stytch.authenticate(url, 30);
      // Handle result — see DeeplinkAuthenticationStatus
    } catch (e) {
      console.error(e);
    }
  };
  const sub = Linking.addEventListener('url', handleUrl);
  return () => sub.remove();
}, [stytch]);

6. Session Management

Sessions are automatically persisted and validated on startup.

// Manually validate (and optionally extend) the current session
await stytch.session.authenticate({ sessionDurationMinutes: 30 });

// Hydrate a client with a session token received out-of-band
await stytch.hydrate("existing-session-token")

// Sign out
await stytch.session.revoke();

B2B Quick Reference

The B2B package follows the same patterns with B2B-specific names:

import {
  createStytchB2B,
  StytchClientConfiguration,
  StytchB2BProvider,
  useStytchB2B,
  useStytchMember,
  useStytchMemberSession,
  useStytchOrganization,
  useStytchB2BAuthenticationState,
} from '@stytch/react-native-b2b';
import { B2BAuthenticationState } from '@stytch/react-native-b2b';

const stytch = createStytchB2B(
  new StytchClientConfiguration('public-token-live-...')
);

function App() {
  return (
    <StytchB2BProvider stytch={stytch}>
      <YourNavigator />
    </StytchB2BProvider>
  );
}

function MemberDisplay() {
  const member = useStytchMember();               // ApiOrganizationV1Member | undefined
  const memberSession = useStytchMemberSession(); // ApiB2bSessionV1MemberSession | undefined
  const organization = useStytchOrganization();   // ApiOrganizationV1Organization | undefined
  const authState = useStytchB2BAuthenticationState();

  if (authState instanceof B2BAuthenticationState.Authenticated) {
    return <Text>{authState.member.emailAddress} — {authState.organization?.organizationName}</Text>;
  }
  return null;
}

​React Native Quickstart

​1. Install the SDK

​2. Initialize the Client and Wrap Your App

​3. Access the Client and State in Components

​4. Auth Methods

​SMS OTP Example

​5. Handle Deeplinks

​6. Session Management

​B2B Quick Reference

React Native Quickstart

1. Install the SDK

2. Initialize the Client and Wrap Your App

3. Access the Client and State in Components

4. Auth Methods

SMS OTP Example

5. Handle Deeplinks

6. Session Management

B2B Quick Reference