Capacitor中Firebase Google登录出现auth/argument-error错误求助

错误原因 #

signInWithPopup是专为浏览器环境设计的登录方法，Capacitor原生平台（iOS/Android）不支持浏览器式弹窗交互，直接调用会触发auth/argument-error参数错误——Firebase Auth在原生环境下不接受这种不符合平台特性的调用方式。

解决方案（无需额外插件） #

通过区分环境使用对应登录方法，原生平台改用signInWithRedirect配合重定向结果回调，浏览器环境保留signInWithPopup：

1. 修改登录逻辑代码 #

import { Capacitor } from '@capacitor/core';
import { getAuth, initializeAuth, indexedDBLocalPersistence, signInWithPopup, signInWithRedirect, getRedirectResult, GoogleAuthProvider } from "firebase/auth";

// 保持原Auth初始化逻辑不变
let auth;
if (Capacitor.isNativePlatform()) {
    auth = initializeAuth(app, {
        persistence: indexedDBLocalPersistence,
    });
} else {
    auth = getAuth(app);
}

export const fbGoogleSignIn = async () => {
    try {
        const provider = new GoogleAuthProvider();
        
        if (Capacitor.isNativePlatform()) {
            // 原生平台使用重定向登录
            await signInWithRedirect(auth, provider);
            // 重定向返回后获取登录结果
            const result = await getRedirectResult(auth);
            if (result) {
                const credential = GoogleAuthProvider.credentialFromResult(result);
                return {
                    token: credential?.accessToken,
                    user: result.user
                };
            }
        } else {
            // 浏览器环境保留弹窗登录
            const result = await signInWithPopup(auth, provider);
            if (result) {
                const credential = GoogleAuthProvider.credentialFromResult(result);
                return {
                    token: credential?.accessToken,
                    user: result.user
                };
            }
        }
    } catch (error) {
        console.error(error);
        const credential = GoogleAuthProvider.credentialFromError(error as any);
        console.log("credential", credential);
        return {
            error,
            credential
        };
    }
};

// APP启动时检查重定向登录结果（比如在入口文件调用）
export const checkRedirectResult = async () => {
    if (Capacitor.isNativePlatform()) {
        try {
            const result = await getRedirectResult(auth);
            if (result) {
                // 此处处理登录成功后的逻辑（如存储用户信息）
                const credential = GoogleAuthProvider.credentialFromResult(result);
                console.log("重定向登录成功", result.user, credential?.accessToken);
            }
        } catch (error) {
            console.error("检查重定向结果失败", error);
        }
    }
};

2. 配置原生平台OAuth回调 #

• iOS：在Xcode中打开项目，进入Info.plist，添加URL scheme为Firebase控制台中iOS应用的REVERSED_CLIENT_ID（可在Firebase控制台的应用设置中找到）。
• Android：在android/app/src/main/AndroidManifest.xml的<activity>标签内添加intent-filter，处理Firebase的回调URL：

  <intent-filter>
      <action android:name="android.intent.action.VIEW" />
      <category android:name="android.intent.category.DEFAULT" />
      <category android:name="android.intent.category.BROWSABLE" />
      <!-- 替换为你的Firebase Android回调URL -->
      <data android:scheme="com.googleusercontent.apps.YOUR_CLIENT_ID" />
  </intent-filter>
  

• Capacitor配置：在capacitor.config.ts中添加对应的URL scheme：

  export default defineConfig({
    appId: 'com.your.app.id',
    appName: 'Your App',
    webDir: 'dist',
    plugins: {
      CapacitorHttp: {
        enabled: true,
      },
    },
    // 添加URL scheme
    server: {
      androidScheme: 'https',
      iosScheme: 'com.googleusercontent.apps.YOUR_CLIENT_ID'
    }
  });
  

关键说明 #

原生平台下，signInWithRedirect会调用系统浏览器打开Google登录页面，登录完成后自动跳转回APP，通过getRedirectResult获取登录信息。这种方式不需要额外插件，完全基于Firebase Auth原生API和Capacitor的URL scheme配置实现。

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