使用文员

将 <AuthView /> 放入一个屏幕中。它渲染一个完整的原生登录和注册界面，处理电子邮件、电话、密码密钥、多因素身份验证，以及 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" />;
}

用户登录后，本地会话会同步回 JavaScript SDK，因此 useAuth() 和 useUser() 会反映已登录状态。将 treatPendingAsSignedOut: false 传递给 useAuth()，以防简短的本地到 JS 会话同步被报告为未登录状态，否则可能会在以 isSignedIn 为导航关键的页面上导致重定向循环。

🌐 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 /> 接受 mode="signIn" | "signUp" | "signInOrUp" 和一个可选的 isDismissable 布尔值。

要在应用的其他地方显示用户的头像和个人资料模态框，请使用 <UserButton />：

🌐 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 /> 填满其父元素，因此父元素控制大小和形状。要从任何其他界面打开原生个人资料模态框，请使用 useUserProfileModal() 钩子：

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:

将 useSignInWithGoogle() 和 useSignInWithApple() 钩子与你自己的 React Native UI 一起使用：

🌐 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>
  );
}

在 Android 上，这会使用凭证管理器，并且从不打开浏览器。在 iOS 上，当配置了 EXPO_PUBLIC_CLERK_GOOGLE_IOS_URL_SCHEME 时，该流程会使用 ASAuthorization（系统凭证选择器）——如果未配置，则 iOS 会回退到系统浏览器页。请按照本页底部链接的 Clerk 指南，在 Clerk 仪表板和 Google Cloud 控制台中注册你的 Android 包名、iOS 包 ID 以及 SHA-256 指纹。

🌐 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.

@clerk/expo/apple 的 useSignInWithApple() 遵循相同的模式（startAppleAuthenticationFlow() 返回 { createdSessionId, setActive }），并且仅限 iOS。App Store 指南 4.8 要求，任何提供第三方社交登录的应用在 iOS 上也必须提供使用 Apple 登录的选项。

这种方法需要开发版本，因为它使用原生模块。useSignInWithGoogle() 需要 expo-crypto。useSignInWithApple() 需要 expo-apple-authentication 和 expo-crypto。

🌐 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.

使用 Core 3 钩子构建自定义登录表单。这在 Expo Go 中可用。

🌐 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>
  );
}

在 Core 3 中，signIn.password() 在验证错误时返回 { error } 而不是抛出异常，signIn.finalize() 则替代了用于使用 useSignIn() 构建的登录流程的旧有 setActive() 调用。

🌐 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 的机器人注册保护默认启用，因此在你的注册界面上某处包含 <View nativeID="clerk-captcha" />，这样隐形 CAPTCHA 就可以启动。

🌐 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.

对于仅使用 JavaScript 的方法，运行以下命令并在 Expo Go 中打开项目：

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