Handle only protected routes except the login routes

[wolflu05]

Hello, I have followed the authenticated routes with context example now which already showed got me a working auth setup. But I'm not sure how I can add the beforeLoad authenticated check to all routes without copy and pasting it (or defining this as a util function). Because in my app there are only protected routes except the login/register page. So my file structure is as follow:

routes/
  __root.tsx
  auth/
    login.lazy.tsx
    register.lazy.tsx
  dashboard.lazy.tsx
  route-a.lazy.tsx
  route-b.lazy.tsx

1. How can I now add the beforeLoad auth checking to all routes except the ones from the auth subfolder?
2. And same for defining the root component. How can I have different "wrappers" using outlets for the protected routes and for the auth routes?

I'd really appreciate if someone could point me into the right direction.

[hansyulian]

https://tanstack.com/router/latest/docs/framework/react/guide/authenticated-routes

this one will help you, for me i just do

if (authenticated && !isAuthRoute){
      redirect to auth
} else 
if (!authenticated && isAuthRoute){
      redirect to home
}

but i still have problem with how to redirect again after the user finished the authentication, if you find a working way, please share

[wolflu05]

Thanks for sharing this. I already read the page you linked before creating this discussion. My question more was how I can have a beforeLoad function only for all routes that are not auth routes. As far as I understand your solution, I should use the beforeLoad from the __root and check if the route is not an auth route and only then redirect. Using this in the __root file works, but I'm not sure if that is the best solution:

beforeLoad: ({ context, location }) => {
    if (!context.auth.getState().isAuthenticated && !location.pathname.startsWith("/auth")) {
      throw redirect({
        to: "/auth/login"
      })
    }
  },

Even when it comes to my layout requirement. How can I solve that to have one global layout for all pages, except the auth pages and one like said for the auth pages?

[wolflu05]

Ok, I found out a structure that works for me:

routes/
  __root.tsx
  _auth.tsx <-- here is the magic to redirect to `/` if already authenticated in `beforeLoad`
  _auth/
    login.lazy.tsx
    register.lazy.tsx
  _authenticated.tsx <-- here is the magic to redirect to `/login` if not authenticated in `beforeLoad`
  _authenticated
    dashboard.lazy.tsx
    route-a.lazy.tsx
    route-b.lazy.tsx

That way I can also define a Layout for each in either _auth.tsx or _authenticated.tsx with the component attribute in the route and render an <Outlet /> at the appropriate position.

[thejasonxie]

Thank you! This structure, as well as the kitchen-sink-file-based example was very helpful. I have an alternative to yours:

routes/
  __root.tsx
  _.index.lazy.tsx
  _.tsx <-- `beforeLoad` magic
  login.tsx

[thejasonxie]

Nvm wolfu05's method _authenticated is definitely better than using _.tsx

[yukendhiran]

Hey guys, I also had same requirement where i need to login before anything, and to have base layout for entire app

routes/
  __root.tsx
  _auth.tsx   <-- check login context, if not loggedin redirect to /login, This have base layout for entire app
  _auth/
     index.tsx  <- this act as / , That page is showed inside base layout
     about.tsx <- /about , everything is loggedin and follow base layout
  login/
     index.lazy.tsx

Hope this is good way of doing, please share if anyone have better structure