时间戳

首页 > 解决方案 > 使用 FirebaseUI + React Router 成功登录时重定向

reactjs - 使用 FirebaseUI + React Router 成功登录时重定向

问题描述

我正在使用FirebaseUI React包进行用户登录/注册。除了成功登录后无法获得重定向之外，我一切正常。

编辑：电子邮件/密码提供商似乎出现问题，但是当使用谷歌作为登录提供商时，重定向工作正常。

我究竟做错了什么？这是完整的文件：

import React from "react";

import firebase from 'firebase/app';
import firebaseApp from '../firebaseApp';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';

import { withRouter } from "react-router";

// Styles
import styles from '../App.css'; // This uses CSS modules.

class SignIn extends React.Component {
  uiConfig = {
    signInFlow: 'redirect',
    signInOptions: [      
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      firebase.auth.EmailAuthProvider.PROVIDER_ID,      
    ],
    callbacks: {
      signInSuccessWithAuthResult: (authResult, redirectUrl) => {
        console.log('signInSuccessWithAuthResult', authResult, redirectUrl);
        this.props.history.push('/');
        return false
      }
    },
  };

  render() {
    return (
      <div>
        <h1>Caazam SignIn</h1>
        <StyledFirebaseAuth uiConfig={this.uiConfig} firebaseAuth={firebaseApp.auth()} />        
      </div>
    );
  }
}

export default withRouter(SignIn);

标签： reactjsfirebasereact-routerfirebase-authentication

解决方案

所以问题最终出在主 App 组件中的条件路由上。

正如我在对问题的评论中提到的那样，SignIn 组件中的重定向（第一次发生）和onAuthStateChangedApp 组件中的侦听器（稍后发生）之间存在异步竞争条件。当进行重定向时，侦听器尚未更改状态，因此到 '/' 的条件路由被重定向回 SignIn。

我找到的解决方案基于 Robin Wieruch 的精彩教程 - React Authentication Tutorial 中的完整 Firebase。绝对是我发现的最全面的教程 - 只需将 FirebaseUI 换成“标准”Firebase 身份验证。

基本上，它不使用条件路由，而是使用两个单独的高阶组件进行身份验证（将身份验证状态作为反应上下文传递给整个应用程序）和授权（保护组件并在需要时重定向用户登录）。

推荐阅读