Using Clerk

Hosted authentication opens Clerk's Account Portal in a browser authentication session over your app. Users can complete any sign-in or sign-up method enabled for your Clerk application, and the SDK activates the resulting session in your app. Call startHostedAuth() from the useHostedAuth() hook:

import { useAuth } from '@clerk/expo';
import { useHostedAuth } from '@clerk/expo/hosted-auth';
import { ActivityIndicator, Button, Text, View } from 'react-native';

export default function MainScreen() {
  const { isLoaded, isSignedIn } = useAuth();
  const { startHostedAuth } = useHostedAuth();

  const handleSignUp = async () => {
    try {
      await startHostedAuth({ mode: 'sign-up' });
    } catch (error) {
      // Handle the error in your app
    }
  };

  if (!isLoaded) {
    return <ActivityIndicator size="large" />;
  }

  return (
    <View>
      {isSignedIn ? (
        <Text>You're signed in</Text>
      ) : (
        <Button title="Sign up" onPress={handleSignUp} />
      )}
    </View>
  );
}

After authentication completes, the SDK closes the browser session, activates the new session, and updates useAuth() with the signed-in state. The browser doesn't retain a separate active session.

startHostedAuth() opens the sign-in page by default and accepts mode: 'sign-in' | 'sign-up'. It resolves with a null createdSessionId when the user dismisses the browser without finishing, and throws when authentication fails.

This approach works in Expo Go, where Expo supplies a development callback. In a development or production build, the callback is derived from your iOS bundle identifier or Android package name, so keep the @clerk/expo config plugin in your app config and rebuild the native project after changing either identifier.

Account Portal runs in a browser, so social sign-in uses each provider's web OAuth flow rather than the native one. See the hosted authentication guide for production credential requirements and troubleshooting.

<AuthView /> renders a complete native sign-in and sign-up interface that handles email, phone, passkeys, multi-factor authentication, and any social connection enabled in the Clerk Dashboard. It renders inline in your React Native view hierarchy, so you can place it in a modal, a route, or a full-screen view. The following example opens it in a modal:

import { useAuth } from '@clerk/expo';
import { AuthView, UserButton } from '@clerk/expo/native';
import { useState } from 'react';
import { ActivityIndicator, Button, Modal, View } from 'react-native';

export default function MainScreen() {
  const { isLoaded, isSignedIn } = useAuth({ treatPendingAsSignedOut: false });
  const [isAuthOpen, setIsAuthOpen] = useState(false);

  if (!isLoaded) {
    return <ActivityIndicator size="large" />;
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {isSignedIn ? <UserButton /> : <Button title="Sign up" onPress={() => setIsAuthOpen(true)} />}
      <Modal
        animationType="slide"
        visible={isAuthOpen}
        presentationStyle="pageSheet"
        onRequestClose={() => setIsAuthOpen(false)}>
        <AuthView onDismiss={() => setIsAuthOpen(false)} />
      </Modal>
    </View>
  );
}

After the user signs in, the native session is synchronized back to the JavaScript SDK, so useAuth() and useUser() reflect the signed-in state. Pass treatPendingAsSignedOut: false to useAuth() so pending session tasks are not treated as signed out.

Keep the <Modal> that contains <AuthView /> mounted at the same level as your signed-in and signed-out content. If you render it only inside signed-out content, auth state can change while session tasks are still pending, and your conditional render unmounts the modal too early.

<AuthView /> accepts mode="signIn" | "signUp" | "signInOrUp" (the default), an isDismissible boolean that controls the native dismiss button, and an onDismiss callback. When users must authenticate before continuing, render it as a full-screen view with isDismissible={false} instead of in a modal.

<UserButton /> takes no props. It displays the signed-in user's profile image or initials and opens the native <UserProfileView /> when tapped, where users can manage personal information, security settings, and sign out.

<AuthView /> automatically shows sign-in buttons for any social connections enabled in the Clerk Dashboard and handles the flows internally, so you don't need expo-crypto or the native sign-in hooks. Native OAuth still requires credential setup in the Clerk Dashboard and provider consoles. Otherwise, the buttons appear but fail when tapped. Follow the Clerk Sign in with Google and Sign in with Apple guides linked at the bottom of this page.

This approach requires a development build because the components are backed by native modules:

Build your own screens with the Core 3 hooks. This works in Expo Go. The following example uses useSignUp() to build an email and password sign-up form with email code verification:

import { useAuth, useSignUp } from '@clerk/expo';
import { useState } from 'react';
import { Button, Text, TextInput, View } from 'react-native';

export default function MainScreen() {
  const { isLoaded, isSignedIn } = useAuth();
  const { signUp } = useSignUp();

  const [emailAddress, setEmailAddress] = useState('');
  const [password, setPassword] = useState('');
  const [code, setCode] = useState('');
  const [isVerifying, setIsVerifying] = useState(false);

  const handleSignUp = async () => {
    const { error } = await signUp.password({ emailAddress, password });
    if (error) {
      console.error(JSON.stringify(error, null, 2));
      return;
    }

    const { error: sendError } = await signUp.verifications.sendEmailCode();
    if (sendError) {
      console.error(JSON.stringify(sendError, null, 2));
      return;
    }

    setIsVerifying(true);
  };

  const handleVerify = async () => {
    const { error } = await signUp.verifications.verifyEmailCode({ code });
    if (error) {
      console.error(JSON.stringify(error, null, 2));
      return;
    }

    await signUp.finalize();
  };

  if (!isLoaded) {
    return null;
  }

  if (isSignedIn) {
    return <Text>You're signed in</Text>;
  }

  if (isVerifying) {
    return (
      <View>
        <TextInput
          value={code}
          placeholder="Enter your verification code"
          onChangeText={setCode}
          keyboardType="numeric"
        />
        <Button title="Verify" onPress={handleVerify} />
      </View>
    );
  }

  return (
    <View>
      <TextInput
        autoCapitalize="none"
        value={emailAddress}
        placeholder="Enter email"
        onChangeText={setEmailAddress}
        keyboardType="email-address"
      />
      <TextInput
        value={password}
        placeholder="Enter password"
        secureTextEntry
        onChangeText={setPassword}
      />
      <Button title="Sign up" onPress={handleSignUp} />
      {/* Required for sign-up flows on Expo web. Clerk skips the browser CAPTCHA on Android and iOS */}
      <View nativeID="clerk-captcha" />
    </View>
  );
}

In Core 3, methods such as signUp.password() and signUp.verifications.verifyEmailCode() return { error } instead of throwing for validation errors. When verification completes the sign-up, signUp.finalize() converts it into an active session and updates useAuth() with the signed-in state.

The corresponding sign-in flow uses useSignIn(), where finalize() accepts a navigate callback so you can handle session tasks before redirecting:

import { useSignIn } from '@clerk/expo';
import { type Href, useRouter } from 'expo-router';

export default function SignInScreen() {
  const { signIn } = useSignIn();
  const router = useRouter();

  const handleSignIn = async (emailAddress: string, password: string) => {
    const { error } = await signIn.password({ emailAddress, password });
    if (error) {
      return;
    }

    if (signIn.status === 'complete') {
      await signIn.finalize({
        navigate: ({ session, decorateUrl }) => {
          if (session?.currentTask) return; // let the session task layer handle it
          router.replace(decorateUrl('/') as Href);
        },
      });
    }
  };

  // ... render your email and password fields
}

To add native Sign in with Google and Sign in with Apple buttons to your custom screens, use the useSignInWithGoogle() hook from @clerk/expo/google and the useSignInWithApple() hook from @clerk/expo/apple. Both return a start method (startGoogleAuthenticationFlow() and startAppleAuthenticationFlow()) that resolves with { createdSessionId, setActive }.

Both hooks use native modules, so they require a development build and the packages from the install step. useSignInWithGoogle() also needs the @clerk/expo-google-signin config plugin. On iOS, App Store Guideline 4.8 requires that any app offering third-party social sign-in must also offer Sign in with Apple. Follow the Clerk guides linked at the bottom of this page to register your credentials in the Clerk Dashboard and the provider consoles.

For the hosted authentication and custom flow approaches, run the following command and open the project in Expo Go: