React Native 中 Firebase Google 登录无响应问题及实现咨询

• 你当前使用的signInWithPopup是Web端Firebase Auth的API，仅支持浏览器环境，React Native原生环境无法识别该方法，所以点击后无响应
• React Native端实现Google登录需要配合原生端的Google服务配置，不能直接复用Web端的登录逻辑

• 先在Firebase控制台对应项目的设置页面，添加你的React Native应用的Android/iOS包名，下载对应的google-services.json(Android)、GoogleService-Info.plist(iOS)放到对应原生目录下
• 安装所需依赖：
  npm install @react-native-firebase/app @react-native-firebase/auth @react-native-google-signin/google-signin

import React, { useEffect } from 'react';
import { View, Button, Alert } from 'react-native';
import firebase from '@react-native-firebase/app';
import auth from '@react-native-firebase/auth';
import { GoogleSignin } from '@react-native-google-signin/google-signin';

const GoogleLoginComponent = () => {
  // 初始化Google登录配置
  useEffect(() => {
    GoogleSignin.configure({
      // 客户端ID可在Firebase控制台->身份验证->登录方法->Google->Web SDK配置中获取
      webClientId: '替换为你自己的Web客户端ID',
    });
  }, []);

  const signInWithGoogle = async () => {
    try {
      // 获取Google账号授权凭证
      const { idToken } = await GoogleSignin.signIn();
      // 生成Firebase可识别的认证凭证
      const googleCredential = auth.GoogleAuthProvider.credential(idToken);
      // 完成Firebase登录
      const loginRes = await auth().signInWithCredential(googleCredential);
      const user = loginRes.user;

      // 原有用户信息入库逻辑
      const db = firebase.firestore();
      const query = await db
        .collection("users")
        .where("uid", "==", user.uid)
        .get();
      if (query.docs.length === 0) {
        await db.collection("users").add({
          uid: user.uid,
          name: user.displayName,
          authProvider: "google",
          email: user.email,
        });
      }
      Alert.alert('登录成功', `欢迎 ${user.displayName}`);
    } catch (err) {
      console.error(err);
      Alert.alert('登录失败', err.message);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button
        title="Google账号登录"
        onPress={signInWithGoogle}
        color="#4285F4"
      />
    </View>
  );
};

export default GoogleLoginComponent;

• Android端需要提前在Firebase控制台配置应用签名的SHA-1值，否则会触发权限错误
• iOS端需要在Xcode的URL Types配置中添加Google登录回调地址，否则登录后无法跳转回应用
• 如果你使用Expo框架开发，需要适配expo-auth-session方案，无需修改原生配置

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