Перенаправление при успешном входе в систему с помощью FirebaseUI + React Router - PullRequest
Новая
       9

Перенаправление при успешном входе в систему с помощью FirebaseUI + React Router

0 голосов
/ 23 мая 2018

Я использую пакет FirebaseUI React для входа / регистрации пользователя.У меня все работает, за исключением того, что я не могу получить перенаправление после успешного входа в систему.

  • StyledFirebaseAuth отображается как компонент моего SignIn компонента, который настраивает модель Auth FirebaseUI.
  • * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * '*' 101 '* 101'
  • * Я уверен, чтовход выполнен успешно, так как я вижу как обратный вызов signInSuccessWithAuthResult, так и мой прослушиватель onAuthStateChanged с положительным результатом.

РЕДАКТИРОВАТЬ: Кажется, проблема возникает с поставщиком электронной почты / паролем, но при использовании Google каквойдите в провайдер, перенаправление работает правильно.

Что я делаю не так?это полный файл: 

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);

Ответы [ 2 ]

0 голосов
/ 26 июня 2019

Я рекомендую создать компонент PrivateRoute, как описано на веб-сайтеact-router: https://reacttraining.com/react-router/web/example/auth-workflow

Вот подробное руководство от Тайлера МакГинниса: https://tylermcginnis.com/react-router-protected-routes-authentication/

0 голосов
/ 25 мая 2018

Таким образом, проблема в конечном итоге была связана с условной маршрутизацией в основном компоненте приложения.

Как я уже упоминал в комментариях к вопросу, было условие асинхронной гонки между перенаправлением (происходящим 1-м) в компоненте SignIn.и прослушиватель onAuthStateChanged в компоненте App (происходит позже).Когда перенаправление выполнено, слушатель еще не изменил состояние, поэтому условный маршрут на '/' перенаправляется обратно на SignIn.

Решение, которое я нашел, основано на великолепном учебнике Робина Виеруха - Полное учебное пособие по аутентификации React для Firebase .Определенно самый всеобъемлющий учебник, который я нашел - просто поменялся местами в FirebaseUI для «стандартной» аутентификации Firebase.

В основном вместо условной маршрутизации он использует два отдельных компонента более высокого порядка для аутентификации (передача состояния аутентификации в качестве контекста реакции всему приложению)) и авторизация (защита компонентов и перенаправление пользователей для входа при необходимости).

...