Science & Technology

TanStack Router: Authenticated Routes (Guards)

by Dev Leonardo

📚 Main topics

Protecting a profile routeThe tutorial adds a before-load authentication check that redirects unauthenticated users to the login page before the profile page loads. 1:04
Passing authentication through router contextSince React hooks cannot be called inside a route’s before-load function, the app obtains authentication from a hook and passes it to the router through typed context. 2:37
Protecting groups of routesA shared route for the authenticated folder applies the same guard to dashboard and settings, avoiding repeated checks in each page. 6:15
Hiding a layout route from the URLPrefixing the authenticated folder’s route with an underscore keeps that layout out of the URL, while dashboard and settings remain accessible at simple paths. 7:17

✨ Key takeaways

Redirect before renderingA route guard can redirect unauthenticated users to login before protected content is shown. 1:04
Use router context for hook valuesPass authentication state from the app into router context so route guards can access it without calling hooks in an invalid location. 3:08
Use a shared layout for related guardsA parent route can protect multiple pages, and an underscore-prefixed route can organize them without adding a segment to their URLs. 6:15

🧠 Lessons learned

Keep authentication checks consistentReusing a guard on a shared route avoids duplicating the same check across protected pages. 6:15
Let TypeScript guide setupDefining the router context type and supplying the required context helps connect the app’s authentication object to route logic. 3:08

🏁 Conclusion/next steps

More route organization aheadThe next video will cover additional ways to organize and control routes. 8:21

development 2022 tips tricks tutorial howto opensource open source web javascript typescript vscode Visual Studio Code github git dev 2023 oss open source software tanstack tanstack router tanstack query router routing react router react-router reactjs react typesafe rotuer auth authentication authorization edirect redirect login route login route guard auth guard authguard

Transcript excerpt

0:00 you may have some pages in your application that should only be available to authenticated users otherwise you either redirect them to the login page or simply show them on error let's see how TanStack Router can make this happen this is chapter four of this series let's get started back to our example let's see I want to navigate to the profile page only after logging in so first of all let's create a login route here with some code already written which basically is a simple login text if the user is authenticated

0:32 hello user and a sign it button if the user is not authenticated we have a sign in button pretty easy right I can add the link here to the login page so login you see as usual it's type save log here and there you have it I click login and I can sign in hello user and I can sign out it is working but there's not yet the control on the profile page so let's make this happen in the second video we saw how you can basically Define a

1:04 loader here in the rout to do something before the page loads but you can do something before the loader and we can see it in the profile component here we can say beforeLoad and this is exactly the place where we're going to put our authentication guard and it is as easy as using an if statement we can use the is authenticated function we have in our other file and if the user is not authenticated we can throw not an error

🔒 The full, searchable transcript is available with Pro.

Suggestions