Using react-router with firebase authentication

Question

My main App component keeps track of the user that is currently logged in via the firebase onAuthStateChanged callback, which I can then use to redirect the user to the /login route if the user object is null. This works fine, but if you navigate to a different route while on the login page, you don't get redirected back, which causes errors as other routes require you to be logged in to function properly. Here is the code:

export function App() {

    const auth = firebase.auth();
    const [user, setUser] = useState(null);

    useEffect(()=>{
        auth.onAuthStateChanged(()=> {
            setUser(auth.currentUser);
        })
    }, []);


    return (
        <BrowserRouter>
            <Switch>
                <Route path="/login" exact component={LoginPage}/>
                <Route path="/" exact component={HomePage}/>
                {!user ? <Redirect to="/login"/> : null}
            </Switch>
        </BrowserRouter>
    );
}

I've tried moving !user ? <Redirect to="/login"/> to the top of the Switch component, but that just makes it so you log out every time the page is refreshed. Any ideas on how to solve this? Thanks.

Answer 1

I am using the following approach and it works fine (just copy my existing project that works):

import React, {useState, useEffect} from 'react'
import {BrowserRouter as Router, Switch, Route, Redirect} from "react-router-dom"
import {connect} from "react-redux"
import useAuth from './hooks/useAuth'

import styles from './styles.js'

import Landing from './components/Landing'
import Login from './components/Login'
import Logout from './components/Logout'
import Post from './components/Post'
import Users from './components/Users'
import User from './components/User'
import Signup from './components/Signup'
import Profile from './components/Profile'
import AddSocieta from './components/AddSocieta'
import Constructor from './components/Constructor'

const mapStateToProps = state => ({
  ...state
});

function ConnectedApp() {

  const [dimension, setDimention] = useState({windowWidth: 0, windowHeight: 0})

  const currentStyles = {
    ...styles,
    showFooterMenuText: styles.showFooterMenuText(dimension),
    showSidebar: styles.showSidebar(dimension),
    topMenuCollapsed: styles.topMenuCollapsed(dimension),
    topMenuHeight: styles.topMenuHeight(dimension),
    paddingLeftRight: styles.paddingLeftRight(dimension),
    fullScreenMenuFontSize: styles.fullScreenMenuFontSize(dimension),
    showSubLogoText: styles.showSubLogoText(dimension),
    roundedImageSize: styles.roundedImageSize(dimension)
  };

  const [auth, profile] = useAuth()

  const [isLoggedIn, setIsLoggedIn] = useState(false)

  useEffect(() => {

    if (auth && auth.uid) {
      setIsLoggedIn(true)
    } else {
      setIsLoggedIn(false)
    }

    updateDimensions();
    window.addEventListener("resize", updateDimensions);

    return function cleanup() {
      window.removeEventListener("resize", updateDimensions);
    }
  }, [auth, profile]);

  function updateDimensions() {
    let windowWidth = typeof window !== "undefined"
      ? window.innerWidth
      : 0;
    let windowHeight = typeof window !== "undefined"
      ? window.innerHeight
      : 0;

    setDimention({windowWidth, windowHeight});
  }

  return (<Router>
    <Redirect to="/app/gare"/>
    <div className="App">
      <Switch>
        <Route path="/constructor"><Constructor styles={currentStyles}/></Route>
        <Route path="/post"><Post/></Route>
        <Route path="/login"><Login styles={currentStyles}/></Route>
        <Route path="/logout"><Logout styles={currentStyles}/></Route>
        <Route path="/users"><Users styles={currentStyles}/></Route>
        <Route path="/user/:uid"><User styles={currentStyles}/></Route>
        <Route path="/app"><Landing styles={currentStyles}/></Route>
        <Route path="/signup" render={isLoggedIn
            ? () => <Redirect to="/app/gare"/>
            : () => <Signup styles={currentStyles}/>}/>
        <Route path="/profile" render={isLoggedIn
            ? () => <Profile styles={currentStyles}/>
            : () => <Redirect to="/login"/>}/>

          <Route path="/add-societa"><AddSocieta styles={currentStyles}/></Route>
      </Switch>
    </div>
  </Router>);
}

const App = connect(mapStateToProps)(ConnectedApp)

export default App;
 

Answer 2

Why not recompose your Route element to have private routers and public routes? Private routes will be those requiring authentication and public once will not require it. When someone tries to access a private route without authentication, they will automatically be sent away.

Create an element called PrivateRoute and put your firebase auth inside it. Example:

const PrivateRoute = ({children, ...props}) => {
    const auth = firebase.auth();
    const [user, setUser] = useState(null);

    useEffect(()=>{
        auth.onAuthStateChanged(()=> {
            setUser(auth.currentUser);
        })
    }, []);

    return (
        <Route {...props} render={() => {
            return valid === null ?
                <div>Some kind of loader/spinner here...</div>
                :
                user ?
                    children
                :
                    <Redirect to='/login' />
        }} />
    )
}

Then in your App, use it like so:

    return (
        <BrowserRouter>
            <Switch>
                <PrivateRoute exact path="/">
                    <HomePage />
                </PrivateRoute>
                <Route exact path="/login" component={LoginPage} />
            </Switch>
        </BrowserRouter>
    );

This will redirect anybody trying to access / to /login if they are not authenticated.

Later any route you create can be wrapped like this if it requires authentication.