Display different content depending on whether one is authenticated or not

Hey there!

I've used https://tanstack.com/router/latest/docs/framework/react/guide/authenticated-routes and file-based routing with great success in a React app with a straightforward directory and file structure:

routes
- _authed
  - settings
  - feed
- home

routes
- _authed
  - settings
  - feed
- home

I am now building an app where--ideally--I would like to have

mysite.com/foo

mysite.com/foo

render differently based on whether one is authenticated or not. My first thought was that I might be able to solve it like this:

- _authed
  - foo
- foo

- _authed
  - foo
- foo

_authed/foo

_authed/foo

first and never try

foo

foo

.

Have you solved this (or a similar) problem? How did you solve it?

Thanks for your help.

TanStack•2y ago•

2 replies

faint-white

Hey there!

routes
- _authed
  - settings
  - feed
- home

routes
- _authed
  - settings
  - feed
- home

I am now building an app where--ideally--I would like to have

mysite.com/foo

mysite.com/foo

render differently based on whether one is authenticated or not. My first thought was that I might be able to solve it like this:

- _authed
  - foo
- foo

- _authed
  - foo
- foo

_authed/foo

_authed/foo

first and never try

foo

foo

.

Have you solved this (or a similar) problem? How did you solve it?

Thanks for your help.