使用 Clerk

将 <AuthView /> 放入某个页面中。它会渲染一个完整的原生登录和注册界面，处理邮箱、手机号、通行密钥、多因素认证，以及在 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 控制导航的页面上导致重定向循环。

<AuthView /> 接受 mode="signIn" | "signUp" | "signInOrUp"，以及可选的 isDismissable 布尔值。

如果你想在应用其他位置显示用户头像和个人资料弹窗，可以使用 <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 /> 会填充其父容器，因此父容器控制其大小和形状。若要从任何其他 UI 打开原生个人资料弹窗，请使用 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>管理个人资料</Text>
    </Pressable>
  );
}

这种方式需要开发构建，因为这些组件由原生模块支持：

将 useSignInWithGoogle() 和 useSignInWithApple() hooks 与你自己的 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 登录错误', err);
    }
  };

  return (
    <TouchableOpacity onPress={onPress}>
      <Text>使用 Google 继续</Text>
    </TouchableOpacity>
  );
}

在 Android 上，这会使用 Credential Manager，且不会打开浏览器。在 iOS 上，当配置了 EXPO_PUBLIC_CLERK_GOOGLE_IOS_URL_SCHEME 时，该流程会使用 ASAuthorization（系统凭证选择器）；如果没有配置，则 iOS 会回退到系统浏览器面板。请按照本页底部链接的 Clerk 指南，在 Clerk Dashboard 和 Google Cloud Console 中注册你的 Android 包名、iOS bundle ID 以及 SHA-256 指纹。

来自 @clerk/expo/apple 的 useSignInWithApple() 采用相同模式（startAppleAuthenticationFlow() 返回 { createdSessionId, setActive }），且仅支持 iOS。App Store Guideline 4.8 要求，任何提供第三方社交登录的应用，在 iOS 上也必须提供使用 Apple 登录。

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

使用 Core 3 hooks 构建自定义登录表单。这在 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; // 让会话任务层来处理
          router.replace(decorateUrl('/') as Href);
        },
      });
    }
  };

  return (
    <View>
      <TextInput
        autoCapitalize="none"
        value={emailAddress}
        placeholder="邮箱"
        onChangeText={setEmailAddress}
      />
      <TextInput
        value={password}
        placeholder="密码"
        secureTextEntry
        onChangeText={setPassword}
      />
      <TouchableOpacity onPress={onSignInPress} disabled={fetchStatus === 'fetching'}>
        <Text>登录</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 }，而不是抛出异常；对于使用 useSignIn() 构建的登录流程，signIn.finalize() 取代了旧的 setActive() 调用。

对应的带邮箱验证的注册流程如下：

await signUp.password({ emailAddress, password });
await signUp.verifications.sendEmailCode();
// ... 从用户那里收集验证码，然后：
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 才能挂载。

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