TanStack Router: Authenticated Routes (Guards)

Подписаться 4,7 тыс.

Просмотров 3,6 тыс.

50% 1

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.
Source code: github.com/Balastrong/tanstac...
_______________________________
Support my work: github.com/sponsors/Balastrong
Hit like and subscribe for more content! :D
Beginner-Friendly Open Source Projects: github.com/DevLeonardoCommunity
Join the Discord community! Here's the invite: / discord
You can also follow me on the other platforms:
Twitter: / balastrong
dev.to: dev.to/balastrong
Home: leonardomontini.dev/
TikTok: / balastrong
GitHub: github.com/Balastrong
Instagram: / devbalastrong
_______________________________
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

Наука

Опубликовано:

4 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 10

@presida3927 3 месяца назад

Awesome! please keep continue this series.

@govindpvenu 3 месяца назад

This is what exactly i needed.Thank you

@juliomac2007 2 месяца назад

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.

@nhatminhhoang1469 2 месяца назад

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

@nhatminhhoang1469 2 месяца назад

Oh nvm. I tried to clone your repo, updated my dependency of tanstack to be the same as you. It works. Many thanks. Subcribed !

@DevLeonardo 2 месяца назад

The development of the library is quite active so things might change if you have a different version. Great to hear updating it to the latest worked fine! :D

@pofiabel9526 Месяц назад

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!

@pofiabel9526 Месяц назад

Resolved.

@DevLeonardo Месяц назад

Great to hear it's resolved! For context, what was the issue? Anyway, you can find the code of the project shown on the video here if you want a reference: github.com/Balastrong/tanstack-router-demo/tree/04-authenticated-routes

@pofiabel9526 Месяц назад

Nope ... Turned out not resolved 😭. Now I need that help please. When I login, I realised the is loggedIn state changes to true, but then it does not update immediately in the context, which was resulting the 404, so only when I reload the tab, then the state in the context is updated, which shouldn't be so. Any help is appreciated.