Routing to the same path but different elements for different users

[jaithirani]

To get good at react-router, I am building a task management web app with 2 kinds of users - 1) users with normal accounts 2) temporary users who can access the app via a magic link sent to them. The goal for normal users is to have access to entire functionality whereas for temporary users, it is to have access to specific project boards they are invited to.

I am using Realm (MongoDC App Services) for the user management and am able to differentiate between the two types of users based on their user documents.

My challenge is - When a temporary user is sent the magic link with the jwt token to log them in, it goes to the url 'app.test-app.com/?token=xyz' where I extract the token and log them in. Now, the path for this temporary user authentication is "/". However, for normal users that login, I want "/" to be the home page after logging in. How should I handle this?

This is what my routing looks like -

As can be seen, I have a bunch of "protected routes". To make things a bit clearer, I'll briefly explain what each one does -

1. RequireNotLoggedIn - It protects the routes for logging in normal users and authenticating temporary users by making sure there is no logged in user.
2. RequireLoggedIn - It protects routes that only logged in users should be able to see in the app.
3. RequireNotTemporaryUser - It protects the routes which only logged in AND normal users should have access to from the logged in and temporary users.
4. RequireTemporaryUser - It protects the routes which only logged in and temporary users should have access to.

  <Routes>
    <Route element={<RequireNotLoggedIn />}>
      <Route path="/" element={<TemporaryUserAuthentication />} />
      <Route path="/login" element={<Login />} />
    </Route>
    <Route element={<RequireLoggedIn />}>
      <Route element={<RequireNotTemporaryUser />}>
        <Route path="/" element={<Home />} />
      </Route>
      <Route path="temporary" element={<RequireTemporaryUser />}>
        <Route path="/" element={<Home />} />
      </Route>
    </Route>
  </Routes>