首先我想说，我主要是为Web应用程序和管理软件开发后端，但我也使用过很多JavaScript（通常使用jQuery，我现在意识到这是一种有点过时的方法）。我开始探索一些用于教育和商业目的的新技术，我认为将Reactjs前端与存储在Firebase中的数据结合起来是一个好主意，利用它提供的所有支持工具，特别是身份验证。
我已经设置了一个非常简单的基本应用程序，如果你没有登录，它会带你进入登录屏幕，如果你登录了，它会显示你的电子邮件和ID，所有这些都是非常基本的。对于登录，我想使用Firebase UI，这是Google提供的一个界面，允许你使用电子邮件和密码登录，以及Google和许多其他提供商。然而，我只需要电子邮件/密码和谷歌。
所以，在一个在线教程的帮助下，我把所有这些都放在一起，它看起来运行没有错误。然而，我面临着两个实际问题：
当我使用电子邮件/密码登录时，我输入我的电子邮件，它提示我通过输入密码创建一个帐户，我这样做并登录。我还收到一封验证电子邮件，这是有效的。问题是，如果我注销，然后尝试使用相同的凭据重新登录，它基本上提示我通过输入新密码创建一个新用户。如果我尝试继续，它说电子邮件已经存在，我可以重置密码。
当使用Google帐户选项时，弹出模式工作正常。然而，重定向模式将我带到Google登录，请求权限，返回应用程序，但本质上不会触发任何与用户登录有关的回调（与弹出版本中发生的情况不同）。有趣的是，用户仍然在Firebase中创建，但我无法登录React应用程序。
我附上了三个主要组件（不期望任何人都必须通过它们）。请理解;这些是我使用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'; // i don't attach the file, there are only API keys of firebase account
import {initializeApp } from 'firebase/app';

import * as firebaseui from "firebaseui/dist/npm__it"; // it's like the original one but only done with italian strings

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组件：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
这些基本上是谷歌建议从这里安装的版本：https://firebase.google.com/docs/auth/web/firebaseui?hl=it
感谢大家。
我试着到处寻找同样的问题，但我没有找到任何地方。我期待一些firebase/reactjs GURU的建议：）