Перенаправление при успешном входе в систему с FirebaseUI + React Router
Я использую пакет FirebaseUI React для входа / подписки пользователя. У меня все работает, за исключением того, что я не могу получить перенаправление после успешного входа в систему.
StyledFirebaseAuthвизуализируется как компонент моегоSignInкомпонент, который настраивает модель аутентификации FirebaseUI.- Компонент
SignInзаключен в оболочкуwithRouter, поэтому, когда я получаю обратный вызов успеха, я могу получить доступ к опореhistoryи установить значение '/' - Я уверен, что вход прошел успешно, поскольку я вижу, что как обратный вызов
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.info('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);Нет, URL-адрес не меняется в браузере.
У вас есть консольные ошибки?
Ошибок в консоли нет. Я думаю, что это как-то связано с логикой перенаправления по умолчанию в firebaseui (которую я не хочу использовать, поскольку я не ищу перенаправление полной страницы), но не могу понять этого.
Хорошо, только что заметил, что он работает, когда я выбираю Google в качестве поставщика входа, но не работает, когда я выбираю адрес электронной почты / пароль в качестве поставщика. Обновлю вопрос.
Еще немного покопаемся: похоже, моя проблема вызвана асинхронной последовательностью обратного вызова signInSuccessWithAuthResult и слушателя onAuthStateChanged. При использовании поставщика Google последовательность следующая: обратный вызов, прослушиватель, снова обратный вызов. Когда адрес электронной почты / пароль: обратный вызов, затем слушатель. Что происходит, так это то, что перенаправление действительно работает, но поскольку мой основной прослушиватель аутентификации приложения не «аутентифицирован», он направляется обратно к входу. С точки зрения пользователя это как если бы они остались при входе в систему.
Ответы 2
Таким образом, проблема в конечном итоге заключалась в условной маршрутизации в основном компоненте приложения.
Как я уже упоминал в комментариях к вопросу, между перенаправлением (происходящим 1-м) в компоненте SignIn и слушателем onAuthStateChanged в компоненте App (возникающим позже) возникло состояние асинхронной гонки. Когда выполняется перенаправление, слушатель еще не изменил состояние, поэтому условный маршрут к '/' перенаправляется обратно в SignIn.
Решение, которое я нашел, основано на замечательном руководстве Робина Веруха - Полное руководство по аутентификации Firebase в React. Определенно самый исчерпывающий учебник, который я нашел - просто заменил FirebaseUI на «стандартную» аутентификацию Firebase.
По сути, вместо использования условной маршрутизации он использует два отдельных компонента более высокого порядка для аутентификации (передача состояния аутентификации в качестве контекста реакции для всего приложения) и авторизации (защита компонентов и перенаправление пользователей для входа в систему при необходимости).
Я рекомендую создать компонент PrivateRoute, как описано на веб-сайте response-router: https://reacttraining.com/react-router/web/example/auth-workflow
Вот руководство от Тайлера МакГинниса для более подробной информации: https://tylermcginnis.com/react-router-protected-routes-authentication/
Меняется ли URL-адрес в браузере, но представление не обновляется?