Using Clerk

Drop <AuthView /> into a screen. It 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:

import { AuthView } from '@clerk/expo/native';
import { useAuth } from '@clerk/expo';
import { useRouter } from 'expo-router';
import { useEffect } from 'react';

export default function SignInScreen() {
  const { isSignedIn } = useAuth({ treatPendingAsSignedOut: false });
  const router = useRouter();

  useEffect(() => {
    if (isSignedIn) {
      router.replace('/(home)');
    }
  }, [isSignedIn]);

  return <AuthView mode="signInOrUp" />;
}

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 the brief native-to-JS session sync isn't reported as a signed-out state, which can otherwise cause redirect loops on screens that key navigation off isSignedIn.

<AuthView /> accepts mode="signIn" | "signUp" | "signInOrUp" and an optional isDismissable boolean.

To show the user's avatar and a profile modal elsewhere in your app, use <UserButton />:

import { UserButton } from '@clerk/expo/native';
import { Show } from '@clerk/expo';
import { View } from 'react-native';

export function Header() {
  return (
    <Show when="signed-in">
      <View style={{ width: 36, height: 36, borderRadius: 18, overflow: 'hidden' }}>
        <UserButton />
      </View>
    </Show>
  );
}

<UserButton /> fills its parent, so the parent controls size and shape. To open the native profile modal from any other UI, use the useUserProfileModal() hook:

import { useUserProfileModal } from '@clerk/expo';
import { Pressable, Text } from 'react-native';

export function ProfileLink() {
  const { presentUserProfile, isAvailable } = useUserProfileModal();
  return (
    <Pressable onPress={presentUserProfile} disabled={!isAvailable}>
      <Text>Manage profile</Text>
    </Pressable>
  );
}

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

Use the useSignInWithGoogle() and useSignInWithApple() hooks alongside your own React Native UI:

import { useSignInWithGoogle } from '@clerk/expo/google';
import { useRouter } from 'expo-router';
import { Platform, Text, TouchableOpacity } from 'react-native';

export function GoogleSignInButton() {
  const { startGoogleAuthenticationFlow } = useSignInWithGoogle();
  const router = useRouter();

  if (Platform.OS !== 'ios' && Platform.OS !== 'android') return null;

  const onPress = async () => {
    try {
      const { createdSessionId, setActive } = await startGoogleAuthenticationFlow();
      if (createdSessionId && setActive) {
        await setActive({ session: createdSessionId });
        router.replace('/');
      }
    } catch (err) {
      console.error('Google sign-in error', err);
    }
  };

  return (
    <TouchableOpacity onPress={onPress}>
      <Text>Continue with Google</Text>
    </TouchableOpacity>
  );
}

On Android, this uses Credential Manager and never opens a browser. On iOS, the flow uses ASAuthorization (the system credential picker) when EXPO_PUBLIC_CLERK_GOOGLE_IOS_URL_SCHEME is configured — without it, iOS falls back to a system browser sheet. Follow the Clerk guides linked at the bottom of this page to register your Android package name, iOS bundle ID, and SHA-256 fingerprints in the Clerk Dashboard and the Google Cloud Console.

useSignInWithApple() from @clerk/expo/apple follows the same pattern (startAppleAuthenticationFlow() returning { createdSessionId, setActive }) and is iOS only. App Store Guideline 4.8 requires that any app offering third-party social sign-in must also offer Sign in with Apple on iOS.

This approach requires a development build because it uses native modules. useSignInWithGoogle() requires expo-crypto. The useSignInWithApple() requires both expo-apple-authentication and expo-crypto.

Build a custom sign-in form using the Core 3 hooks. This works in Expo Go.

import { useSignIn } from '@clerk/expo';
import { useRouter, type Href } from 'expo-router';
import { useState } from 'react';
import { Text, TextInput, TouchableOpacity, View } from 'react-native';

export default function SignInScreen() {
  const { signIn, fetchStatus, errors } = useSignIn();
  const router = useRouter();
  const [emailAddress, setEmailAddress] = useState('');
  const [password, setPassword] = useState('');

  const onSignInPress = async () => {
    const { error } = await signIn.password({ emailAddress, password });
    if (error) {
      console.error(JSON.stringify(error, null, 2));
      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);
        },
      });
    }
  };

  return (
    <View>
      <TextInput
        autoCapitalize="none"
        value={emailAddress}
        placeholder="Email"
        onChangeText={setEmailAddress}
      />
      <TextInput
        value={password}
        placeholder="Password"
        secureTextEntry
        onChangeText={setPassword}
      />
      <TouchableOpacity onPress={onSignInPress} disabled={fetchStatus === 'fetching'}>
        <Text>Sign in</Text>
      </TouchableOpacity>
      {errors?.fields?.identifier ? <Text>{errors.fields.identifier.message}</Text> : null}
      {errors?.fields?.password ? <Text>{errors.fields.password.message}</Text> : null}
    </View>
  );
}

In Core 3, signIn.password() returns { error } instead of throwing for validation errors, and signIn.finalize() replaces the legacy setActive() call for sign-in flows built with useSignIn().

The corresponding sign-up flow with email verification looks like:

await signUp.password({ emailAddress, password });
await signUp.verifications.sendEmailCode();
// ... collect the code from the user, then:
await signUp.verifications.verifyEmailCode({ code });
if (signUp.status === 'complete') {
  await signUp.finalize({
    navigate: ({ session, decorateUrl }) => {
      if (session?.currentTask) return;
      router.replace(decorateUrl('/') as Href);
    },
  });
}

Clerk's bot sign-up protection is enabled by default, so include <View nativeID="clerk-captcha" /> somewhere in your sign-up screen so the invisible CAPTCHA can mount.

For the JavaScript-only approach, run the following command and open the project in Expo Go: