vicious-gold

File-based routing: "/" to show landing page for users and dashboard/app for authenticated users

I'm trying to figure out if I can reproduce a Notion-like experience where "/" would serve the app if the user is authenticated and a landing page if not. I know I can use ternaries but ideally I would love to have different files.

9 Replies

conventional-tan•2y ago

Yeah you absolutely can. There's nothing stopping you from doing so. I've got a similar setup separating my authed routes from the public ones. https://github.com/SeanCassiere/nv-rental-clone/tree/master/src/routes The only real thing you'd need to work through, which'd have to be done anyways, is the actual login process. From there on, its all a matter of logging in and redirectly the user to the intended page.

GitHub

nv-rental-clone/src/routes at master · SeanCassiere/nv-rental-clone

Navotar with Tailwind and the Tanstack. Contribute to SeanCassiere/nv-rental-clone development by creating an account on GitHub.

vicious-goldOP•2y ago

Thanks Sean! I cloned your repo and trying to understand how you've done it. I can see that you are running the checks in _auth.route.tsx but I can't understand how exactly the redirect happens to _public.route.tsx and its children? Is the redirect based on react-oidc-context? Another thing which I can't wrap my head around is which route is acting as index for _public?

vicious-goldOP•2y ago

Here's what I currently have in _auth, my initial thoughts were that I could redirect to _public, however, it only allows actual routes instead of layouts

conventional-tan•2y ago

In Layout routes, you don't redirect to layouts. Layouts are transparent to the URL and the to field.

vicious-goldOP•2y ago

I see. In that case is there a way to implement a different “/“ based on user auth status? I’m sorry if my question sounds dumb, I’m a newb. 😅

conventional-tan•2y ago

Ohhhhh. You want different page components to be shown on the / path?

vicious-goldOP•2y ago

Ideally, completely different paths (files) that are shown based on whether the user is authenticated or not. If not, then maybe different components but I didn't see more than one component in any of the docs. What's the best approach? M goal is to have / as a landing page for unathenticated users, and have / as a dashobard for logged in users

conventional-tan•2y ago

The router only allows for a single Route definition to be attached to a path. i.e: / can only have one Route definition. If you REALLY need to display different pages on the same path, you could conditionally render the page components based on a condition that passes, but this is highly not recommended. I'd really recommend you have 1 route define a single page. As soon as you try to mix two routes to together it becomes impossible to use stuff like loaders and context. Like: / for the landing page, and /app for the dashboard. If you NEED the user to be redirected immediately, then you could do that in the beforeLoad callback.

const Route = createFileRoute("/")({
  beforeLoad: ({ context }) => {
    if (context.authLibrary.isAuthed) {
      throw redirect({ to: '/app' });
    }
  },
  ...
});

const Route = createFileRoute("/")({
  beforeLoad: ({ context }) => {
    if (context.authLibrary.isAuthed) {
      throw redirect({ to: '/app' });
    }
  },
  ...
});

vicious-goldOP•2y ago

Thanks, Sean. I’ll do this instead 🙌

Gaming

Programming

File-based routing: "/" to show landing page for users and dashboard/app for authenticated users

Did you find this page helpful?