React Native用expo-auth-session实现Google登录遇Authsession代理错误

问题背景 #

使用以下依赖版本实现Google登录：

• "expo-auth-session": "^4.0.3"
• "expo-web-browser": "^12.1.1"

代码实现 #

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, View, Text, Image, Button } from 'react-native';
import * as Google from 'expo-auth-session/providers/google';
import * as WebBrowser from 'expo-web-browser';

WebBrowser.maybeCompleteAuthSession();

export default function App() {
  const [accessToken, setAccessToken] = React.useState();
  const [userInfo, setUserInfo] = React.useState();
  const [message, setMessage] = React.useState();

  const [request, response, promptAsync] = Google.useAuthRequest({
    androidClientId: "*********************************************",
    iosClientId: "*********************************************",
    expoClientId: "*********************************************"
  });

  React.useEffect(() => {
    setMessage(JSON.stringify(response));
    if (response?.type === "success") {
      setAccessToken(response.authentication.accessToken);
    }
  }, [response]);

  async function getUserData() {
    let userInfoResponse = await fetch("https://www.googleapis.com/userinfo/v2/me", {
      headers: { Authorization: `Bearer ${accessToken}`}
    });

    userInfoResponse.json().then(data => {
      setUserInfo(data);
    });
  }

  function showUserInfo() {
    if (userInfo) {
      return (
        <View>
          <Image source={{uri: userInfo.picture}} />
          <Text>Welcome {userInfo.name}</Text>
          <Text>{userInfo.email}</Text>
        </View>
      );
    }
  }

  return (
    <View >
      {showUserInfo()}
      <Button 
        title={accessToken ? "Get User Data" : "Login"}
        onPress={accessToken ? getUserData : () => { promptAsync({useProxy: false, showInRecents: true}) }}
      />
      <StatusBar style="auto" />
    </View>
  );
}

报错信息 #

Error: Cannot use the AuthSession proxy because the project full name is not defined. Prefer AuthRequest (with the useProxy option set to false) in combination with an Expo Development Client build of your application. To continue using the AuthSession proxy, specify the project full name (@owner/slug) using the projectNameForProxy option.

解决方案 #

方法一：禁用AuthSession代理（推荐） #

在Google.useAuthRequest的配置中添加useProxy: false，同时确保使用Expo Development Client构建应用（而非Expo Go）：

const [request, response, promptAsync] = Google.useAuthRequest({
  androidClientId: "你的Android客户端ID",
  iosClientId: "你的iOS客户端ID",
  expoClientId: "你的Expo客户端ID",
  useProxy: false // 新增配置项
});

额外检查Google Cloud控制台的OAuth客户端配置：

• Android客户端：包名、签名证书指纹需与Expo开发客户端匹配
• iOS客户端：Bundle ID需与项目配置一致

方法二：指定项目全名继续使用代理 #

若需保留代理功能，在请求配置中添加projectNameForProxy，值为你的Expo项目全名（格式@用户名/项目slug）：

const [request, response, promptAsync] = Google.useAuthRequest({
  androidClientId: "你的Android客户端ID",
  iosClientId: "你的iOS客户端ID",
  expoClientId: "你的Expo客户端ID",
  projectNameForProxy: "@your-username/your-project-slug" // 替换为实际项目全名
});

项目全名可从app.json的expo.slug字段结合Expo账户用户名获取。

额外优化建议 #

• 保持WebBrowser.maybeCompleteAuthSession()在组件最外层调用，不要放入useEffect
• 优化用户信息获取代码，避免嵌套then：

async function getUserData() {
  const userInfoResponse = await fetch("https://www.googleapis.com/userinfo/v2/me", {
    headers: { Authorization: `Bearer ${accessToken}`}
  });
  const data = await userInfoResponse.json();
  setUserInfo(data);
}

内容的提问来源于stack exchange，提问作者Neetesh Keshari