T
TanStack•5mo ago
like-gold

Code review, need advice on Auth Guarding Setup

stackblitz: https://stackblitz.com/edit/vitejs-vite-aaw7yap9?file=src%2Froutes%2Flogin.tsx The demo isn't super functional, but it gets the gist across. I'm trying to find a standardized setup for auth guarding authenticated routes. This is my file structure: 
src/
  main.tsx
  routeTree.gen.ts
  routes/
    - _authenticated/
      - dashboard.tsx
    - __root.tsx
    - _authenticated.tsx
    - index.tsx
    - login.tsx
src/
  main.tsx
  routeTree.gen.ts
  routes/
    - _authenticated/
      - dashboard.tsx
    - __root.tsx
    - _authenticated.tsx
    - index.tsx
    - login.tsx
I have it currently setup with supabase magic links, but that could obviously be abstracted out. I'm more concerned about the router logic. Is there anything that jumps out or seems odd, or could be improved? I'm looking to do this across multiple apps I'm building. It feels kinda bad, but I'm not sure what could be better.
JakeHadley
StackBlitz
Vitejs - Vite (forked) - StackBlitz
Next generation frontend tooling. It's fast!
2 Replies
conscious-sapphire
conscious-sapphire•5mo ago
thats how i did it I used a server function in beforeLoad to check the session
harsh-harlequin
harsh-harlequin•5mo ago
you wouldnt need to check the auth session again in your dashboard route since the _authenticated layout handles this for you, and in your beforeLoad of _authenticated you should throw a redirect instead of just calling redirect This guide and example shows you how its done https://tanstack.com/router/latest/docs/framework/react/guide/authenticated-routes https://tanstack.com/router/latest/docs/framework/react/examples/authenticated-routes
Authenticated Routes | TanStack Router React Docs
Authentication is an extremely common requirement for web applications. In this guide, we'll walk through how to use TanStack Router to build protected routes, and how to redirect users to login if th...
React TanStack Router Authenticated Routes Example | TanStack Route...
An example showing how to implement Authenticated Routes in React using TanStack Router.

Did you find this page helpful?