Firebase Auth登录异常：UserCredentials对象email属性始终为null

问题场景 #

本地环境使用Firebase Auth实现Google/Github弹窗登录，登录成功后获取的UserCredentials对象中，user.email与user.providerData[0].email均为null，无法获取邮箱存入数据库完成认证流程。已尝试添加授权域名、新建Firebase项目，问题仍未解决。

相关组件代码：

import React from 'react'
import "./loginButton.css"
import { FcGoogle } from "react-icons/fc";
import { BsGithub } from "react-icons/bs"
import { GithubAuthProvider, GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
import { firebaseAuth } from '../utils/FirebaseConfig';
import axios from 'axios';
import "react-toastify/dist/ReactToastify.css"
import { firebaseLoginRoute } from '../utils/BackendRoutes';
import { useNavigate } from 'react-router-dom';

const LoginButtons = () => {
    const navigate = useNavigate();
    const providers = {
        google: new GoogleAuthProvider(),
        github: new GithubAuthProvider()
    }

    const firebaseLogin = async (loginType) => {
        try {
            const provider = providers[loginType];
            const userData = await signInWithPopup(firebaseAuth, provider);
            console.log(userData);
            const email = userData.user.email ? userData.user.email : userData.user.providerData[0].email;
            console.log(email)
            const { data } = await axios.post(firebaseLoginRoute, { email });
            console.log(data);
            if (data.status) {
                localStorage.setItem("chat-user", JSON.stringify(data.user))
                navigate("/");
            } else {
                navigate("/setUsername");
            }
        } catch (err) {
            console.log(err);
        }
    }

    return (
        <div className='socialBtnContainer'>
            <button type='button' onClick={() => firebaseLogin("google")}>
                <FcGoogle />
            </button>
            <button type='button' onClick={() => firebaseLogin("github")}>
                <BsGithub />
            </button>
        </div>
    )
}

export default LoginButtons

核心解决方案 #

问题根源是未向第三方登录提供商显式请求邮箱权限，不同提供商的权限配置方式不同：

1. Google登录权限配置 #

GoogleAuthProvider默认可能不会主动请求邮箱权限，需要手动添加email scope，并可设置强制选择账号避免缓存问题：

const providers = {
    google: new GoogleAuthProvider(),
    github: new GithubAuthProvider()
}

// 为Google提供商添加邮箱权限
providers.google.addScope('email');
// 可选：强制每次登录选择账号，避免缓存导致的信息缺失
providers.google.setCustomParameters({ prompt: 'select_account' });

2. Github登录权限配置 #

Github OAuth默认不会返回用户邮箱，必须显式请求user:email scope：

// 为Github提供商添加邮箱权限
providers.github.addScope('user:email');

3. 控制台配置检查 #

• Google登录：确认Firebase控制台「认证」→「登录方法」中Google已启用，且对应的Google Cloud OAuth客户端已添加本地测试域名（如http://localhost:3000）到授权域名列表。
• Github登录：确认Firebase控制台中Github提供商的Client ID、Client Secret配置正确，同时在Github的OAuth应用设置中，授权回调URL已设置为Firebase提供的地址（格式如https://<你的项目ID>.firebaseapp.com/__/auth/handler）。

修改后的完整代码示例 #

import React from 'react'
import "./loginButton.css"
import { FcGoogle } from "react-icons/fc";
import { BsGithub } from "react-icons/bs"
import { GithubAuthProvider, GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
import { firebaseAuth } from '../utils/FirebaseConfig';
import axios from 'axios';
import "react-toastify/dist/ReactToastify.css"
import { firebaseLoginRoute } from '../utils/BackendRoutes';
import { useNavigate } from 'react-router-dom';

const LoginButtons = () => {
    const navigate = useNavigate();
    const providers = {
        google: new GoogleAuthProvider(),
        github: new GithubAuthProvider()
    }

    // 配置Google登录权限
    providers.google.addScope('email');
    providers.google.setCustomParameters({ prompt: 'select_account' });
    // 配置Github登录权限
    providers.github.addScope('user:email');

    const firebaseLogin = async (loginType) => {
        try {
            const provider = providers[loginType];
            const userData = await signInWithPopup(firebaseAuth, provider);
            console.log(userData);
            const email = userData.user.email ? userData.user.email : userData.user.providerData[0].email;
            console.log(email)
            const { data } = await axios.post(firebaseLoginRoute, { email });
            console.log(data);
            if (data.status) {
                localStorage.setItem("chat-user", JSON.stringify(data.user))
                navigate("/");
            } else {
                navigate("/setUsername");
            }
        } catch (err) {
            console.log(err);
        }
    }

    return (
        <div className='socialBtnContainer'>
            <button type='button' onClick={() => firebaseLogin("google")}>
                <FcGoogle />
            </button>
            <button type='button' onClick={() => firebaseLogin("github")}>
                <BsGithub />
            </button>
        </div>
    )
}

export default LoginButtons

额外排查点 #

• 登录后打印userData.user的完整JSON结构，确认是否存在emailVerified等字段，排查是否因用户未验证邮箱导致信息无法获取。
• 检查Firebase Auth的规则是否限制了用户信息的读取权限（默认规则允许已登录用户读取自身信息）。

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