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

使用react hook和react context创建dialog组件

React Context用法总结