FirebaseUI 只允许用户创建帐户但不允许登录现有帐户

Question

我在我的 React 应用程序中设置了 FirebaseUI，以便用户可以创建一个帐户并登录到该帐户来访问我的应用程序。每当用户创建帐户时，它似乎都会正确保存在 firebase 中，但是，当该用户尝试登录其帐户时，系统会要求他们再次创建帐户，而不是要求输入密码，以便他们可以登录到现有帐户帐户。如果用户尝试使用同一电子邮件创建另一个帐户，他们会收到一条错误消息 --> 该电子邮件已存在，但无法登录。请重置密码以恢复。<--

这是 Fire Base 实现的代码，正如我所说，几乎所有事情似乎都按预期工作，除了我总是被指示创建一个新帐户，即使我输入的电子邮件已经与 Firebase 中保存的帐户关联。我按照教程视频让它工作，我已经彻底检查过，我的代码与视频中的代码相同，但他的实现允许他在创建帐户后正确登录，而我的只允许我创建一个帐户，但是不登录该帐户。

import React, { useEffect } from "react";
import * as firebaseui from 'firebaseui';
import "firebaseui/dist/firebaseui.css";
import firebase from "firebase/compat/app";

const AuthGoogle = (props) => {
    useEffect(() => {
        const ui =
            firebaseui.auth.AuthUI.getInstance() ||
            new firebaseui.auth.AuthUI(props.auth);
        ui.start(".firebase-auth-container", {
            signInOptions: [
                {
                   provider: firebase.auth.EmailAuthProvider.PROVIDER_ID
                }
            ],
            signInSuccessUrl: '/app'
        });
    }, [props.auth]);
    return (
        <>
            <div className="firebase-auth-container"></div>
        </>
    );
};

export default AuthGoogle;
Updated version of the code based on answer suggestions, had to alter the suggestion slightly to resolve errors but even after fixing the errors the sign-in issue persists users are always prompted to create an account rather than being able to sign in to there existing account.   

import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import "firebase/auth";
import * as firebaseui from 'firebaseui';
import "firebaseui/dist/firebaseui.css";
import firebase from "firebase/compat/app";

const AuthGoogle = (props) => {
    const navigate = useNavigate();

    useEffect(() => {
        const uiConfig = {
            signInFlow: 'popup',
            signInOptions: [
                {
                 provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
                 requireDisplayName: false
                }
            ],
            callbacks: {
                signInSuccessWithAuthResult: () => {
                    navigate('/app');
                    return false;
                },
            },
        };

        let ui = firebaseui.auth.AuthUI.getInstance() || new 
        firebaseui.auth.AuthUI(props.auth);


        ui.start('.firebase-auth-container', uiConfig);

    }, [props.auth, navigate]);

    return (
        <div className="firebase-auth-container"></div>
    );
};

export default AuthGoogle;

Answer 1

代码：

import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import "firebase/auth";
import * as firebaseui from 'firebaseui';
import "firebaseui/dist/firebaseui.css";
import firebase from "firebase/compat/app";

const AuthGoogle = (props) => {
    const navigate = useNavigate();

    useEffect(() => {
        const uiConfig = {
            signInFlow: 'popup',
            signInOptions: [
                {
                    provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
                    requireDisplayName: false
                }
            ],
            callbacks: {
                signInSuccessWithAuthResult: () => {
                    navigate('/app');
                    return false;
                },
            },
        };

        const ui = new firebaseui.auth.AuthUI(props.auth);

        ui.start('.firebase-auth-container', uiConfig);

        return () => {
            ui.delete();
        };
    }, [props.auth, navigate]);

    return (
        <div className="firebase-auth-container"></div>
    );
};

export default AuthGoogle;

以下是更改和改进的内容：

1. 使用 单独导入 Firebase 身份验证import "firebase/auth"。

2. 使用该signInFlow: 'popup'配置可确保更好的登录体验。

3. 设置callbacks选项以signInSuccessWithAuthResult在成功登录后将用户重定向到您的应用程序。

4. 添加了清理功能，用于在组件卸载时删除 FirebaseUI 实例。

5. 删除了不必要的firebase.auth.AuthUI.getInstance()检查。