Firebase onAuthStateChanged与显式登录冲突及注册异常问题

问题背景 #

onAuthStateChanged()监听器会自动登录之前登录过的用户，从Firestore获取userData后，通过setUser()在全局React状态中设置uid和userData（用于校验应用特定页面的用户认证状态），若获取userData失败则执行登出操作。

核心问题1：重复API调用 #

loginUser()方法会执行相同逻辑：通过邮箱/密码获取uid并从Firestore拉取userData，导致登录时触发两次获取userData的API调用（onAuthStateChanged()和loginUser()均被调用），如何确保仅触发一次？

核心问题2：注册时自动登出 #

注册时会为每个新用户创建关联的Firestore用户文档，但onAuthStateChanged()会在文档创建前触发，此时拉取userData因文档不存在判定为失败，导致代码登出用户，迫使新用户在认证持久化生效前二次登录。

是否可以控制onAuthStateChanged()仅在需要重新认证用户时触发？或者是否需要重新设计认证流程？若需重构，请给出有效方案建议。

相关代码 #

Auth状态监听代码 #

React.useEffect(() => {
        onAuthStateChanged(getAuth(), async (curUser) => {
            if (curUser && !Object.keys(user.userData).length) {
                const uid = curUser.uid;
                const token = curUser.accessToken;

                // Set access token for authorizing backend calls
                await apiClient.setToken(token);

                // Then get the user account specifc data
                const loginRes = await apiClient.GET({
                    endpoint: "me",
                    params: { uid: uid },
                });

                if (loginRes?.data) {
                    setUser({
                        uid: uid,
                        userData: loginRes.data,
                    });
                } else {
                    // If there was an error fetching user data, then we want to sign them out
                    console.log("Signing out user using authstatevhanged")
                    await apiClient.signOutUser();
                }
            }
        });
    }, []);

登录方法代码 #

async loginUser(credentials) {
        // Sign in a user using email and password
        return await signInWithEmailAndPassword(
            auth,
            credentials.email,
            credentials.password
        )
            .then(async (userCredential) => {
                const uid = userCredential?.user?.uid;
                const token = auth?.currentUser.accessToken;

                // Set access token for authorizing backend calls
                await this.setToken(token);

                // Then get the user account specifc data
                const user = await this.GET({
                    endpoint: "me",
                    params: { uid: userCredential.user.uid },
                });

                // If fetching user data was successful, return user data and auth token (uid)
                if (user?.data) {
                    return {
                        data: { uid: uid, userData: user.data },
                        errorCode: null,
                        errorMessage: null,
                    };
                } else {
                    // If there was an error fetching, return an error. Make sure to remove all sensitive data/tokens
                    // For example, the access token and auth's currentUser set by signInWithEmailAndPassword
                    // we need to do this in case signInWithEmailAndPassword() succeeded, but getMe() failed,

                    // This removes auth?.currentUser
                    signOut(auth).then(async () => {
                        // This removes the accessToken from local storage
                        await this.removeToken();
                    });

                    // Finally we return an error for the UI to notify
                    return {
                        data: null,
                        errorCode: user?.errorCode,
                        errorMessage: user?.errorMessage,
                    };
                }
            })
            // If the user failed the login, then return an error
            .catch((error) => {
                // Example of error object: {"code":"auth/invalid-email","customData":{},"name":"FirebaseError"}
                const errorCode = error.code;

                // Possible codes:
                // auth/invalid-email ---> invalid email
                // auth/wrong-password ---> wrong password
                return {
                    data: null,
                    errorCode: errorCode,
                    errorMessage: errorCode,
                };
            });
    }

解决方案 #

解决重复API调用问题 #

方案1：登录后直接更新全局状态

在loginUser()成功获取userData后，直接调用setUser()更新全局状态，让onAuthStateChanged()的!Object.keys(user.userData).length条件不成立，跳过重复逻辑。修改loginUser()的成功回调：

if (user?.data) {
    // 直接更新全局用户状态
    setUser({ uid: uid, userData: user.data });
    return {
        data: { uid: uid, userData: user.data },
        errorCode: null,
        errorMessage: null,
    };
}

如果loginUser()封装在独立的apiClient中，需要将setUser方法传入，或通过状态管理工具（如Zustand、Redux）完成状态更新。

方案2：添加登录状态标记

在全局状态中增加isLoggingIn布尔值，用户主动调用loginUser()时设为true，onAuthStateChanged()检测到该标记时跳过数据获取逻辑；登录完成后再将其设为false。修改onAuthStateChanged()的条件：

if (curUser && !Object.keys(user.userData).length && !user.isLoggingIn) {
    // 原有数据获取逻辑
}

解决注册时自动登出问题 #

方案1：临时标记新用户并重试获取数据

在注册成功后，通过localStorage标记新用户，onAuthStateChanged()检测到该标记时，重试几次获取userData，避免直接登出。修改onAuthStateChanged()的失败处理逻辑：

else {
    const isNewUser = localStorage.getItem('isNewUser');
    if (isNewUser) {
        let retryCount = 0;
        const retryFetch = async () => {
            retryCount++;
            const res = await apiClient.GET({ endpoint: "me", params: { uid: uid } });
            if (res?.data) {
                setUser({ uid: uid, userData: res.data });
                localStorage.removeItem('isNewUser');
            } else if (retryCount < 3) {
                setTimeout(retryFetch, 1000);
            } else {
                await apiClient.signOutUser();
                localStorage.removeItem('isNewUser');
            }
        };
        retryFetch();
    } else {
        await apiClient.signOutUser();
    }
}

注册完成创建Firestore文档后，设置临时标记：

localStorage.setItem('isNewUser', 'true');

方案2：云函数同步创建用户文档

使用Firebase云函数的auth.user().onCreate触发器，在用户认证成功时自动创建对应的Firestore文档，确保文档创建在onAuthStateChanged()触发前完成，避免因文档不存在导致的误登出。

整体流程重构建议 #

1. 统一状态管理：用Zustand、Redux等状态管理工具封装用户认证和数据获取逻辑，消除重复代码。
2. 单一数据源：所有用户状态更新都通过状态管理工具完成，onAuthStateChanged()仅负责监听Firebase Auth状态变化，触发状态管理工具的同步逻辑；loginUser()只调用Firebase登录接口，成功后通知状态管理工具更新状态。
3. 新用户同步处理：通过云函数确保用户认证与Firestore文档创建同步，或在前端明确标记新用户，避免误登出。

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