Add example using React Router

[armand1m]

[joseph-allen]

Hey I happen to have done this, the trick here is basically passing props through React router with the following pattern. Each Route takes a parameter render and you can pass your props here.

         <Switch>
            <Route
              path="/login"
              render={() => (
                <Login
                  signInWithEmailAndPassword={props.signInWithEmailAndPassword}
                  signOut={props.signOut}
                  user={props.user}
                />
              )}
            />
          </Switch>

[fotoflo]

I check if the user exists and if not send them to SignIn, if so, send them to the app... Not sure if it's better or cleaner, but its a full example :-)

import React from 'react';
import firebase from './firebase'
import withFirebaseAuth from 'react-with-firebase-auth'

import SignInPage from './SignInPage'
import AppContainer from './AppContainer'
import {
  Switch,
  Route,
  useHistory
} from "react-router-dom";

const firebaseAppAuth = firebase.auth();

function App({user, signOut, signInWithGoogle, error, loading}){
  
  const history = useHistory();

  if(user){
    history.push("/app")
  }else{
    history.push("/signin")
  }

  return (
    <div className="App">
        <Switch>
          <Route path="/app">
            <AppContainer 
              authUser={user}
              signOut={signOut}
            />
          </Route>
          <Route path="/signin">
            <SignInPage 
              signInWithGoogle={signInWithGoogle}
              error={error}
            />
          </Route>
        </Switch>
    </div>
  )}
  
  const providers = {
    googleProvider: new firebase.auth.GoogleAuthProvider()
  };
  
  export default withFirebaseAuth({
    providers,
    firebaseAppAuth,
  })(App);