React router and protected route with firebase

1

Hello guys, I’m trying to add firebase in my react project to handle the authentication.

(Here’s the code: https://github.com/satansdeer/react-firebase-auth)

Everything works fine, the route works and the authentication works as well…the only problem is that if you create a nested route protected from the authentication refreshing stop working. Let’s say that we have 4 routes: /login, /login/test and /home, /home/test.

/home is a protected route. If I go to /login and /login/test and from there I hit the refresh button I end up in the same page I was before, so that works.
If I login and I am redirect to /home and I hit refresh it works as well. The problem is if I go to /home/test and then I hit refresh, what I see is a blank page.

That’s how the protected route mechanism is implemented and used:

import React, { useContext } from "react";
import { Route, Redirect } from "react-router-dom";
import { AuthContext } from "./Auth";

const PrivateRoute = ({ component: RouteComponent, ...rest }) => {
  const {currentUser} = useContext(AuthContext);
  return (
    <Route
      {...rest}
      render={routeProps =>
        !!currentUser ? (
          <RouteComponent {...routeProps} />
        ) : (
          <Redirect to={"/login"} />
        )
      }
    />
  );
};


export default PrivateRoute

import PrivateRoute from "./PrivateRoute";

const App = () => {
  return (
    <AuthProvider>
      <Router>
        <div>
          <PrivateRoute exact path="/" component={Home} />
          <Route exact path="/login" component={Login} />
        </div>
      </Router>
    </AuthProvider>
  );
};

How can I fix this problem?

2

i am created a App where i was used protected route and it works but when i am searching in address bar from home page to sign in it redirects to sign in then home ? what should i do?

3

The correct url to sign up is /signup and home is actually just /. That’s my mistake, try with those route!