使用Facebook进行React FirebaseUI身份验证失败

Question

我正在使用FirebaseUI身份验证。使用电子邮件或谷歌帐户登录是成功的，完全没有问题，但使用Facebook登录过去是有效的，但最近未能使用Facebook登录。尝试登录后，应用程序卡在加载窗口。我看不出有任何错误。

以下是我的firebaseui身份验证设置代码：

firebase.js

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import 'firebase/compat/storage';
const firebaseConfig = {
apiKey: "................",
authDomain: "..............",
projectId: ".........",
storageBucket: "...........",
messagingSenderId: ".........",
appId: ".............",
measurementId: ".........."
};
const firebaseApp=firebase.initializeApp(firebaseConfig);
const db=firebaseApp.firestore();
const auth=firebase.auth();
const storage=firebase.storage();
const uiConfig=({
signInFlow: "popup",
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.TwitterAuthProvider.PROVIDER_ID,

],
callbacks:{
signInSuccessWithAuthResult: () => false,
},
});
export {db,auth,storage,uiConfig};

login.js

import React, { useState,useEffect } from 'react';
import firebase from 'firebase/compat/app';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import './Login.css';
import { auth, uiConfig} from './firebase';
import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';
function Login() {
const history = useHistory ();
const [isSignedIn, setIsSignedIn] = useState(false);

useEffect(() => {
const unregisterAuthObserver = firebase.auth().onAuthStateChanged(user => {
setIsSignedIn(!!user);
});
return () => unregisterAuthObserver(); // Make sure we un-register Firebase observers when the component unmounts.
}, []);
if (!isSignedIn) {
return (
<div className='login'>
<div className='left_login'>
<h1>Please sign-in:</h1>
<br />
<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
</div>
<div className='right_login'>
<h1>Wei White Art</h1>
<br />
<img 
className='login_logo'
src='../Logo design 7.png' alt='' />
<br />
<h4>Under the privacy policy, Weiwhite Art collects only user's email for order and payment confirmation</h4>
</div>
</div>
);

}
return (
<div>
<h1>Wei White Art</h1>
<p>Hello {firebase.auth().currentUser.displayName}! You are now signed-in!</p>
<br /> 
<button className='sign__button' 
onClick={() => history.push('/')}>
Continue Shopping
</button>
<h3>Please note that user's email in each login is needed to process checkout</h3>
<img 
className='login_logo'
src='../Logo design 7.png' alt='' /> 
</div>
);
}
export default Login;

我已经用APP id和APP secret设置了facebook身份验证方法，还将OAuth重定向URI复制到facebook应用配置中。并打开应用直播模式。它仍然不起作用。其他身份验证方法Google、Email、Twitter和Github都没有问题。facebook登录不起作用。在我点击脸书登录按钮后，它就卡住了，没有任何错误提示。

Answer 1

我发现这个问题是由一个firebase引起的->身份验证->设置->用户帐户链接，并将其更改为为每个身份提供者创建多个帐户。设置更改后，我可以成功登录facebook。

Answer 2

截至撰写本文时，firebaseui react库中的用户帐户链接已断开。查看此处和此处打开的问题。我还没有尝试过，但我相信这个问题可以通过构建自己的UI来克服。

我还发现，您至少可以通过删除会话存储项firebaseui::pendingEmailCredential来清除会话中的错误