Protect the whole app
Hi! I'm scaffolding of the kitchen sink example and i have this scenario, i need the whole app to be protected under auth, except for the /login route, how can I achieve this? If any other route is accessed i want it to redirect to the login page, would this only be achieved if I use the beforeLoad an all of the routes?
7 Replies
extended-salmonOP•2y ago
Oh, and im using the file based router
conscious-sapphire•2y ago
Make a layout that all routes except login inherits from and do the auth protection in the onLoad of the shared layout
extended-salmonOP•2y ago
Is there any doc on layout routes? I can’t find any and I’m not really getting it based on the examples
Nvm, I think I’ll just leave the file router behind
correct-apricot•2y ago
I've got something like this.
It's a component that wraps my Authed pages.
In the component, I call navigate should the auth status change.
No reason this can't wrap your pages using file-based.
https://github.com/SeanCassiere/nv-rental-clone/blob/master/src/components/protector-shield.tsx
You could forgo all that and check the location in the loader of the root route against the auth status and throw a redirection as well.
GitHub
nv-rental-clone/src/components/protector-shield.tsx at master · Sea...
Navotar with Tailwind and the Tanstack. Contribute to SeanCassiere/nv-rental-clone development by creating an account on GitHub.
correct-apricot•2y ago
Let me know if this helps.
I could help with a Stackblitz example, but I'm not sure when I'll get around to it since I have a couple weeks of jury duty coming up.
correct-apricot•2y ago
Got some time today, heres a working example with file-based.
https://stackblitz.com/edit/github-5larry
I've set up the redirects in the loader of the root route.
Sean Cassiere
StackBlitz
File Based with Auth - StackBlitz
Run official live example code for Router Basic File Based Codesplitting, created by Tan Stack on StackBlitz
extended-salmonOP•2y ago
Thank you so much for taking the time! This ended up giving me a better understanding on how route works, though i see the github project is really comple! Nice Work!