React Native集成Firebase Google认证遇signInWithPopup未定义错误

核心原因 #

signInWithPopup 是Firebase Auth仅面向Web平台的登录方法，React Native作为原生应用环境，并不支持该API，这就是你触发TypeError: (0, _auth.signInWithPopup) is not a function错误的根本原因。

解决方案 #

React Native/Expo项目中实现Google登录，需要使用适配原生环境的方案，以下是基于Expo的实现步骤（你项目中使用了Expo图标，推测是Expo项目）：

1. 安装依赖 #

执行命令安装Expo认证相关工具：

npx expo install expo-auth-session expo-crypto

2. 配置Firebase控制台 #

• 进入Firebase控制台 → 认证 → 登录方法 → Google
• 复制Web客户端ID（不是Android/iOS客户端ID）
• 添加重定向URI：https://auth.expo.io/@你的Expo用户名/你的项目slug（替换成自己的Expo账号和项目信息）

3. 修改登录代码 #

替换原有的signInWithGoogle函数，使用Expo AuthSession获取Google身份凭证后，通过Firebase的signInWithCredential完成登录：

首先在SignIn.js顶部导入新增模块：

import * as AuthSession from 'expo-auth-session';
import { GoogleAuthProvider, signInWithCredential } from "firebase/auth";

然后定义Google客户端ID并改写登录函数：

// 替换成你从Firebase控制台复制的Web客户端ID
const GOOGLE_CLIENT_ID = 'your-web-client-id.apps.googleusercontent.com';

let signInWithGoogle = async () => {
  try {
    // 生成重定向URI
    const redirectUri = AuthSession.makeRedirectUri({ useProxy: true });

    // 构造Google认证URL
    const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${GOOGLE_CLIENT_ID}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=id_token&scope=openid%20email%20profile`;

    // 启动认证流程
    const result = await AuthSession.startAsync({ authUrl });

    if (result.type === 'success') {
      // 从返回结果中获取ID Token，生成Firebase凭证
      const credential = GoogleAuthProvider.credential(result.params.id_token);
      // 完成Firebase登录
      const userCredential = await signInWithCredential(auth, credential);
      
      const user = userCredential.user;
      navigation.navigate("Home");
      console.log(user);
    }
  } catch (error) {
    console.error('Google登录失败:', error);
    // 这里可以添加错误提示逻辑
  }
};

4. 配置App Scheme（可选但建议） #

在项目根目录的app.json中添加自定义scheme，确保认证跳转正常：

{
  "expo": {
    "scheme": "your-app-scheme" // 比如"myauthapp"，自定义名称
  }
}

替代方案 #

如果是纯React Native项目（非Expo），可以使用@react-native-firebase/auth配合@react-native-google-signin/google-signin库实现原生Google登录，核心逻辑同样是获取Google凭证后调用signInWithCredential完成Firebase认证。

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