How can I make protected routes?

[abcd-arl]

Hello. I don't know that much about routing. Can anyone give me an idea how I can make protected routes? For example, a user has to be authenticated first before they can go to specific route.

Thank you in advance.

[molefrog]

I guess it is similar to how you would implement protected routes with any other router. Generally, what you need is:

• Keep the track of the currently authenticated user somewhere that can be accessed in any component of your app (in a context, or with your state management of choice).
• Write a wrapper component e.g. <ProtectedRoute>...</ProtectedRoute> that will (pseudo-code):

const RequireAuth(props) => {
  const [location] = useLocation();
  const user = useCurrentUser();

  const isProtectedRoute = ... // assert that `location` matches the protected area, you can compare strings, use regexps or use `useRoute` from wouter

  if (isProtectedRoute && !user) {
    return <Redirect to="/auth" />;
  }
  
  // render protected routes
}

[abcd-arl]

Thank you so much for responding. I was missing the isProtectedRoute on my previous code. Thank you!

[abcd-arl]

Hello again. Is there anyway I can make this work?

<Router>
    <Route path="/login" component={Login} />
    <Route component={RequireAuth}>
        <Route path="/" component={Home} />
        <Route path="/dashboard" component={Dashboard} />
    </Route>
</Router>

It seems the nested Route doesn't get to run.

[molefrog]

Could you add a bit more context on what you're trying to achieve?