How to redirect user to home if they're already logged in and is trying to access the login page?

[vgullberg]

Sorry react newb here, I have a component that redirects the user to whatever protected route they were trying to access after they log in via:

export const ProtectedRoute = () => {
  const { token } = useAuth()
  const location = useLocation()
  if (!token) {
    return <Navigate to="/login" replace state={{ from: location }} />
  }
  return <Outlet />
}

and

setToken(token)
const origin = location.state?.from?.pathname || '/'
navigate(origin)

on login. This works by itself.

However I'm trying to add the functionality of redirecting the user home if they try to access the login page AFTER they've logged in and have been authenticated via:

export const RestrictedPublicRoute = () => {
  const { token } = useAuth()
  if (token) {
    return <Navigate to="/" replace />
  }
  return <Outlet />
}

They seem to be fighting over navigation, as the preservation of previous routes is no longer preserved, as they are all being routed to "/" after logging in since the second navigation is overwriting the first the instant the user logs in and there is a token. How would i construct a case so the second navigation is only run when you try to access the login page while already logged in?

These are my routes:

<Route element={<ProtectedRoute />}>
  <Route path="/" element={<Home />} />
  <Route path="dashboard" element={<Dashboard />} />
  <Route path="admin" element={<Admin />} />
</Route>
<Route element={<RestrictedPublicRoute />}>
  <Route path="login" element={<Login />} />
</Route>

[cookesan]

The protected-route side is recording the right thing. The part that throws it away is the logged-in guard on /login, because it always redirects to /.

Use the same location.state.from in that guard, and keep a fallback for direct visits to /login:

export const RestrictedPublicRoute = () => {
  const { token } = useAuth();
  const location = useLocation();

  if (token) {
    const from = location.state?.from;
    const to = from
      ? `${from.pathname}${from.search ?? ""}${from.hash ?? ""}`
      : "/";

    return <Navigate to={to} replace />;
  }

  return <Outlet />;
};

Then have the login submit handler derive the same target and navigate with replace. That way a user who was sent to /login from /dashboard goes back to /dashboard, while an already logged-in user who types /login directly still lands on /.

[vgullberg]

Thank you!! I was able to achieve the correct functionality via adding another condition via:

export const RestrictedPublicRoute = () => {
  const { token } = useAuth()
  const location = useLocation()
  //only time im storing previous location is when user is trying to log in, it is undefined otherwise
  if (token && !location.state?.from?.pathname) {
    return <Navigate to="/" replace />
  }
  return <Outlet />
}

would this be ok as well? Or is there an edge case im missing.

[cookesan]

That condition can work for the narrow “submit login, then navigate away” flow, but I would still make the guard redirect whenever token is truthy.

The edge case is a logged-in render of /login that still has location.state.from. With if (token && !location.state?.from?.pathname), the condition is false, so <Outlet /> renders and an authenticated user can see the login route. It may be hard to notice if the submit handler immediately calls navigate(origin), but the guard itself is no longer protecting /login.

I’d keep the redirect unconditional on token and choose the target from state:

export const RestrictedPublicRoute = () => {
  const { token } = useAuth();
  const location = useLocation();

  if (token) {
    const from = location.state?.from;
    const to =
      from?.pathname && from.pathname !== "/login"
        ? `${from.pathname}${from.search ?? ""}${from.hash ?? ""}`
        : "/";

    return <Navigate to={to} replace />;
  }

  return <Outlet />;
};

That lines up with the React Router docs: <Navigate state> stores data on the next Location, and Location includes pathname, search, hash, and state. This keeps direct /login visits going home while still preserving the protected route target when there is one.