React Context + Firebase Auth 未填充 onAuthStateChanged
Posted
技术标签:
【中文标题】React Context + Firebase Auth 未填充 onAuthStateChanged【英文标题】:React Context + Firebase Auth not populating onAuthStateChanged 【发布时间】:2020-09-22 10:45:55 【问题描述】:我已经为此苦苦挣扎了一段时间。我下面的上下文提供程序没有触发任何 onAuthStateChanged 更改 - 即它没有填充用户,即使他们已登录。
AuthProvider.js
import React, createContext, useState, useEffect from 'react';
import firebaseAuth from '../firebase/firebase';
export const AuthContext = createContext( loggedIn: false );
const AuthProvider = props =>
const [user, setUser] = useState( loggedIn: false, email: null );
useEffect(() =>
const unsubscribe = firebaseAuth.onAuthStateChanged(user =>
console.log(user); // Fires once "null"
console.log(firebaseAuth.currentUser); // Fires once "null"
if (user)
console.log('logged in');
setUser( loggedIn: true, email: user.email );
else
console.log('not logged in'); // Fires once
setUser( loggedIn: false );
);
return () =>
unsubscribe();
, []);
return (
<AuthContext.Provider value=user>
props.children
</AuthContext.Provider>
);
;
export default AuthProvider;
firebase/firebase.js
import firebase from 'firebase/app';
import 'firebase/analytics';
import 'firebase/auth';
import 'firebase/firebase-firestore';
const firebaseConfig =
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_FIREBASE_APP_ID,
measurementId: process.env.REACT_APP_FIREABSE_MEASUREMENT_ID
;
const firebaseApp = firebase.initializeApp(firebaseConfig);
firebase.analytics();
export const firebaseAuth = firebase.auth();
export default firebaseApp;
App.js
import React from 'react';
import AuthProvider from './providers/AuthProvider';
import Routes from './components/Routes';
import './App.scss';
const App = () =>
return (
<AuthProvider>
<Routes />
</AuthProvider>
);
export default App;
如上所述,我从 AuthProvider.js 获得一次控制台输出 - null、null 和“未登录”。
谁能指出我在登录时为什么没有填充我的用户的正确方向? 谢谢!
【问题讨论】:
代码看起来没问题,因为你的onAuthStateChanged
回调触发了。您确定用户已登录,如果是,您怎么知道?您用于登录用户的代码看起来如何?
我正在使用 firebaseui 进行登录。我在登录过程中没有看到任何错误消息。有没有办法测试它是否有效?
在我控制台上的网络选项卡中,它确实调用了 getAccountInfo,它返回填充了我的用户数据,所以看来我肯定已经登录了。
【参考方案1】:
问题似乎出在我的 UI 配置中。我有signInSuccessUrl: '/'
。一旦我删除它,它就起作用了。
【讨论】:
以上是关于React Context + Firebase Auth 未填充 onAuthStateChanged的主要内容,如果未能解决你的问题,请参考以下文章
React Context Hook vs 将数据直接引入组件
Firebase 用户的 context.auth 仍然存在 allAuthenticatedUsers secure Google function error with UNAUTHENTICAT
使用 react-native-firebase 创建 Firebase 动态链接失败 - React Native
在 Firebase 托管中使用 Firebase 和 React