首先我想说的是，我主要开发 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.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
这些基本上是 Google 建议从此处安装的版本： https://firebase.google.com/docs/auth/web/firebaseui?hl=it
谢谢大家。
我尝试到处搜索相同的问题，但没有发现任何地方。 我期待一些 firebase/reactjs GURU 的建议:)
此问题与 Firebase 身份验证的更改有关（添加了电子邮件枚举保护作为 2023 年 9 月 15 日之后创建的所有新项目的默认设置）。 Firebase UI 尝试获取电子邮件地址的所有可用登录方法，但由于更改，仅返回空数组。
有两种选择可以解决该问题：
我可以建议的解决方案是 首先，您需要使用正确的配置初始化火力基地 使用useEffect触发firebase 确保允许您调用 firebase Api 的权限 确保您有兼容的版本 firebase 确保身份验证状态在会话中持续存在
然后你可以再试一次
这个问题来自全栈开发
为了让事情更清楚你可以参考在线课程， 您可以查看Tutorlix.com