React+Firebase UI认证问题求助：邮箱登录重复提示/Google跳转无回调

问题现象 #

• 邮箱密码登录后退出，再次登录仍提示创建新用户，继续操作则显示邮箱已存在；
• Google登录弹窗模式正常，但跳转模式完成授权返回应用后，未触发登录回调，Firebase已创建用户但React端无法识别登录状态。

核心组件代码 #

App.js（主组件） #

import React, { useEffect, useState } from 'react';
import logo from './logo.svg';
import './App.css';
import Login from './Login';
import {Authenticated} from './Authenticated';
import {  firebaseConfig } from './firebase_config.js'; // 包含Firebase API密钥，未附上
import {initializeApp } from 'firebase/app';

import * as firebaseui from "firebaseui/dist/npm__it"; // 意大利语版本的Firebase UI

import { getAuth, setPersistence, browserLocalPersistence, onAuthStateChanged  } from "firebase/auth";
import {getFirestore} from 'firebase/firestore'; 
import {BrowserRouter, Route, Routes, } from 'react-router-dom'
const appFirebase=initializeApp(firebaseConfig);
const auth=getAuth(appFirebase);
const ui=new firebaseui.auth.AuthUI(auth);
function App() {
  
  const [user, setUser]= useState();
  useEffect(()=> {
    
    onAuthStateChanged(auth, (userFound)  =>{
      console.log("Auth changed",auth);
      if (userFound) {
        setUser({email: userFound.email, id: userFound.uid});

      }
      else setUser(null);
      
    });
  });
  
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        
        <BrowserRouter>
        <Routes>
            <Route path="/login" element={<Login auth={auth} user={user} ui={ui}/>}></Route>          
            <Route path="/" element={<Authenticated user={user} />}> </Route>
        </Routes>
        </BrowserRouter>
        {user && <div><button onClick={() => { auth.signOut()}} >Logout</button></div>}
      </header>
    </div>
  );
}

export default App;
export { auth };

Login.js（登录组件） #

import React, { useEffect, useState } from 'react';
import { EmailAuthProvider, GoogleAuthProvider, sendEmailVerification    } from "firebase/auth";
import 'firebaseui/dist/firebaseui.css'
import {Navigate} from 'react-router-dom';


const  Login = (props) => {
  

  useEffect(() => {
          
      props.ui.start('#firebaseui-auth-container', {
      callbacks: {
        
          signInFailure: function (error) {
            console.log(error);
          },
          signInSuccessWithAuthResult: function(authResult, redirectUrl) {    
            console.log("signed id",authResult);
            props.auth.languageCode = 'it';

            if (authResult.additionalUserInfo.isNewUser && authResult.additionalUserInfo.providerId==="password")
            {
                console.log("new signin");
                sendEmailVerification(authResult.user);
            }
            return true;
          },
        
      },
      signInSuccessUrl: '/login',
      
      signInOptions: [
        {
          provider: EmailAuthProvider.PROVIDER_ID,
          requireDisplayName: false
        },    
        GoogleAuthProvider.PROVIDER_ID,
      ],
      tosUrl: '<your-tos-url>',
  
      privacyPolicyUrl: '<your-privacy-policy-url>'
    });
  }, [props.auth,props.ui]);
  
  return (
    <> {props.user && (
      <Navigate to="/" replace={true} />
    )}<div>
      <h1>Accesso / Registrazione</h1>
      <div id="firebaseui-auth-container"></div>
    </div></>
  );
}

export default Login;

Authenticated.js（已登录组件） #

import React from "react";

import { Navigate} from 'react-router-dom'

export const Authenticated = (props) => {
    const user=props.user;
    return <> {!user ? 
        <Navigate to="/login" replace={true} />
      :<div>Authenticated
        <div><span>Email</span>:<span>{user.email}</span></div>
        <div><span>Uid</span>:<span>{user.id}</span></div>

    </div>}</>
}

使用版本 #

• firebase 10.4.0
• firebaseui 6.1.0

问题修复方案 #

问题1：邮箱密码登录后再次登录提示创建新用户 #

原因：App组件的useEffect无依赖数组，导致重复订阅onAuthStateChanged引发状态混乱；Firebase UI默认的凭证助手可能误判用户状态。

修复步骤：

1. 给App组件的useEffect添加空依赖数组，并添加清理函数避免内存泄漏：

useEffect(()=> {
  const unsubscribe = onAuthStateChanged(auth, (userFound)  =>{
    console.log("Auth changed",auth);
    if (userFound) {
      setUser({email: userFound.email, id: userFound.uid});
    } else {
      setUser(null);
    }
  });
  return unsubscribe;
}, []);

2. 在Firebase UI配置中禁用凭证助手，避免自动注册提示：

props.ui.start('#firebaseui-auth-container', {
  // ...其他配置
  credentialHelper: firebaseui.auth.CredentialHelper.NONE,
  // ...
});

问题2：Google跳转登录后React端未识别登录状态 #

原因：signInSuccessUrl设置为/login导致跳转后状态未及时同步；页面刷新后onAuthStateChanged未正确捕获登录状态。

修复步骤：

1. 移除signInSuccessUrl配置，在signInSuccessWithAuthResult回调中手动导航并返回false阻止自动跳转：

import {Navigate, useNavigate} from 'react-router-dom';

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

  useEffect(() => {
    props.ui.start('#firebaseui-auth-container', {
      callbacks: {
        signInSuccessWithAuthResult: function(authResult, redirectUrl) {    
          console.log("signed id",authResult);
          props.auth.languageCode = 'it';

          if (authResult.additionalUserInfo.isNewUser && authResult.additionalUserInfo.providerId==="password")
          {
              console.log("new signin");
              sendEmailVerification(authResult.user);
          }
          navigate('/');
          return false;
        },
      },
      // 移除signInSuccessUrl
      // ...其他配置
    });
  }, [props.auth,props.ui, navigate]);
  
  // ...其余代码
}

2. 检查Firebase控制台的OAuth重定向URI：在「认证 → 登录方法 → Google」中添加应用域名（如http://localhost:3000），确保跳转后能正确回调。

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