Redirect on successful login with FirebaseUI + React Router

Question

I'm using the FirebaseUI React package for user sign in/up. I have everything working except I can't get the redirect after successful sign in to work.

• The StyledFirebaseAuth is rendered as a component of my SignIn component that configures the FirebaseUI Auth model.
• The SignIn component is wrapped with withRouter so that when I receive the success callback I can access the history prop and set to '/'
• I'm certain the sign in is successful as I see both the signInSuccessWithAuthResult callback and my onAuthStateChanged listener firing with a positive result.

EDIT: Seems problem is happening with email/password provider but when using Google as sign in provider the redirect works properly.

What am I doing wrong? this is the full file:

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

Answer 1

So the problem eventually was with the conditional routing in the main App component.

As I mentioned in the comments to the question there was an async race condition between the redirect (occurring 1st) in the SignIn component and the onAuthStateChanged listener in the App component (occurring later). When the redirect is made the listener hasn't changed state yet so the conditional route to '/' is redirected back to SignIn.

The solution I found is based on the great tutorial by Robin Wieruch - A Complete Firebase in React Authentication Tutorial. Definitly most comprehensive tutorial I found - simply swapped in FirebaseUI for 'standard' Firebase auth.

Basically instead of using conditional routing it uses two separate higher order components for authentication (passing auth state as react context to the whole app) and authorisation (protecting components and redirecting users to sign in when needed).