TanStack Router: Authenticated Routes (Guards)

Exploring TanStack Router on a React project to learn the core features of this new typesafe router, together.

Today we'll see how you can protect some routes with guards, allowing only authenticated users to see them, or redirect them to the login page.

_______________________________

Hit like and subscribe for more content! :D

You can also follow me on the other platforms:
_______________________________
TIMESTAMPS

00:00 Overview
00:18 Login route
01:00 Define the guard and redirect
02:22 Using a react hook
06:03 Protect multiple routes
07:12 Hide authenticated from the URL
08:22 Organized and controlled routes

#tanstack #router #reactrouter

[presida]

Awesome! please keep continue this series.

[govindpvenu]

This is what exactly i needed.Thank you

[armanrozika]

just an opinion from a viewer, it would be better when you change file you change it with the cursor, not the shortcut. I know, you probably used to it, but we as a viewer, at least me, are having hard time focusing because the file is like changing immediately, i have no idea what file you're referring to when you said "this", "add in this". Maybe it's just me tho haha, keep up the good work!

[omkarbhambure]

router.invalidate() is not updated the login data, means on clicking the login sign in button, signout button is not displayed

[FUNKYSTUFFM]

I dont get my updated context values, so i cant never auth a page.. how can I resolve this ?

im callinh my isAuth var and its always false in the "context" while trying to auth for redirect.. so I always get redirect to logn.. why :c

[juliomac]

Thanks! Best information on Tanstack Router out there! I got a little confused in the end about the login.tsx. It was kept importing the old ../utils/auth.ts? I haven't been able to make it work either because of this or because I've trying to apply it to an older JavaScript (no typescript) project.

[mrlectus]

What of Loading state, where should we put that?

[nhatminhhoang]

Hi I'm a bit confused in the last part. I created _authenticated.tsx and in the _authenticated FOLDER I have the same 2 files as you. But when I try to call the beforeLoad method on my _authenticated.tsx, it wont apply to the _authenticated folder. And it's also been show in the video

[dziaddy]

I have this problem that I can't use router.invalidate() inside my hook because it's not inside router provider.

[pofiabel]

Hi! exactly what i needed, just that after loging-in, all the routes nested in _authenticated, are now turning up as 404 Not found, but when i take it out of _authenticated, it becomes found : ( please help!