score:2

Accepted answer

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.

score:0

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;
 

Related Query

More Query from same tag