logged In user redirects to login page when entering URL manually (React.js)-CodePudding

I restrict access to certain routes using below function

function RequireAuth({ children, redirectTo }) {
 const { user, setUser } = useContext(UserContext);
 return user?.LoggedInStatus === "LoggedIn" ? children : <Navigate to={redirectTo} />;
}

it works with react router Link,

<Link to="/protected">protected</Link>

but when I enter URL manually in address bar and hit the enter it redirects Logged In user to login page

I manage user state using useContext hook

export const UserContext = createContext(null);

In actual project I fetch user Logged In status from API

But I provided a sample for test purpose and set user state like below:

function App() {
 const [user, setUser] = useState({ LoggedInStatus: "LoggedOut" });
 useEffect(() => {
   setTimeout(() => {      
   setUser({ LoggedInStatus: "LoggedIn" })
 }, 1000);
 }, [])

I use react-route-dom v6 and Routes are like below

<UserContext.Provider value={{ user, setUser }}>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/login" element={<Login />} />
      <Route path="/public" element={<PublicPage />} />
      <Route
        path="/protected"
        element={
          <RequireAuth redirectTo="/login">
            <ProtectedPage />
          </RequireAuth>
        }
      />
    </Routes>
  </UserContext.Provider>

Also I test it with react-router-dom v5 and the problem is the same

To some extent I can understand that this is because react renders pages client side, and couldn't recognize user state when page reloads manually.

Could we say it's react.js nature and it's not a problem? (Considering We can't prevent user enter URL manually, it seems a problem to me)

How to solve this problem?

CodePudding user response：

The issue here is that it seems your initial user state matches that of a confirmed unauthenticated user, so the auth wrapper incorrectly redirects users to login before the app knows wether or not they are authenticated in the backend.

Start from an intermediate undefined state that is neither "LoggedIn" nor "LoggedOut", and conditionally wait for the state/context to update.

const [user, setUser] = useState({});

...

function RequireAuth({ children, redirectTo }) {
  const { user, setUser } = useContext(UserContext);

  if (user.LoggedInStatus === undefined) {
    return null; // or loading indicator, etc...
  }

  return user.LoggedInStatus === "LoggedIn"
    ? children
    : <Navigate to={redirectTo} replace />;
}