Protect SvelteKit Routes with Hooks 

- great visualisation - mentioning issues many devs faced (e.g. confusion about 'locals -> local storage') - information apply for Typescript AND Javascript devs - great detail Thank you so much! You are helping sveltekit users so much! Please keep going :) Potential future topics: - error handling - integrating payment solutions (stripe, PayPal)

You and Joy Of Code are doing amazing things in the Svelte community. Keep it up. I have been watching y'all a lot.

Just like with form actions, you are breaking down another advanced topic within Sveltekit. This video + using it in my own project = level up.

Very informative and in plain English. Thank you

Thank you Sir so much for explaining hooks, locals, protected route so clear, I finally know how to handle authentication with Sveltekit, you are live saver 🙏😭

Another quality tutorial to compliment your growing SvelteKit playlist. As a beginner, I find that the diagrams make it much easier to understand the process and the dialog/interaction between the various steps in the system as a whole. It is very daunting to open up the SvelteKit documentation and know where to start, having just a basic understanding of web development. Having someone brighter and more technically gifted to lead the way is a real privilege. I really appreciate you giving your time, effort and energy. I hope to see you around far into the future and wish you every success with your channel.

Wow, Thank you, sir. That is a straightforward and to-the-point description of Handle hook's usage.

I’m working on authentication with SvelteKit right now and this is hugely helpful! Thanks so much

You're such a blessing to this world

Thanks to you learning SvelteKit has been nothing but pleasure. Absolute life saver, thank you so much.

This was the missing video I really needed, thank you very much for all your insightful videos on the subject of Svelte(Kit), but especially this one

I didn't understand why someone would do this, but then It literally came to me in my sleep why this is a good solution. I also read up about this on git and sooo I tried to implement it. Soo much easier, cleaner and safer. Thanks for the explanaiton.

SVELTEKIT 1.O OFFICIALLY RELEASED. 🤩

Thank you for sharing. However, when I use group layout(), I encounter an issue where the URL is not received within the hook, and if I place it outside, the layout is not separated between routes.

Thanks so much, I'm finally beginning to use SvelteKit at its full potential!

Great video, really helped me understand the locals concept! Thanks a lot! 😄

OMG finally I get what locals means, thank you so much 👍

Fantastic video. Very clear and concise. Much appreciated. Thank you.

Your videos are so great! Thanks for posting them 🙏👌

It is important to note that this wouldn't work for client side navigation, as the Handle hook would only run when requests are made to the server. If svelte assumes it wouldn't need to call the server, when you go to `/protected` you would still be able to access it even when logged out. I think for you it calls the server, because you have a `protected/+page.server.js` that does nothing. If you remove that you would probably be in trouble.

This is EXACTLY what I was looking for, great example and even better explanation. Thanks a lot!

found your channel and really loving it. I have been tasked with build a simple application for onboarding customers. I am pretty much a backend dev but sveltekit has become my goto framework for when I need it. Your content is really amazing, I have learnt so much

What a great Svelte/SK resource! Thank you

Best channel for svelte

++ on the route protection trick with the handle hooks!

ATTN: I’ve heard this comment multiple times so I need to address it to stop the spread: Do not solely use +layout.server to handle auth for a bunch of routes, unless you are awaiting parent on every subsequent +page.server. Watch this video for more info: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-UbhhJWV3bmI.html

Very useful and very well explained, thank you!

Thank you very much! Clear explanation! It helps to make progress!

Another banger!! 🔥🔥🎉

17:38 if you want to move it down without the mouse you can simply hold alt and then use the arrow keys to move it up or down. Also if you hold shift + alt and then use the arrow keys you can duplicate the selected line(s) :)

Damn, I think this is the exact thing I am looking for. Very good video, ty!

What an awesome video - explained everything so well

Awesome content as usual. Thanks for making this!

Very useful info using hooks, can't wait for your other lessons in the sveltekit series ❤❤

Phenomenal video. Thanks!

Great video! I do have a quick question though. In the Admin protected route section, will this work if you were to provide a link to this section so that the application routes client side (instead of directly typing the route in the address bar)? I think if the admin route doesn’t have a +page.server.js file, then the hook will never run meaning if the user was logged out while on the page with the link, they could still navigate to the admin route. Any thoughts here would be appreciated. It’s something I am struggling to figure out a way around at the moment.

Thanks! Great video!

Idk if it's me but the handle hook only get called once when the page is fetched. If the user then navigates you need client side code that prevents the user from beeing ablte to access your content. That's why I now have both within my code. Maybe someone know whats wrong?

Great video, appreciate the straightforward approach! One question: how would you approach consuming the session/user data in the protected routes themselves. Type-wise, the session and user objects can both be undefined, and +page.server is not "aware" that the auth check has been done in the hooks already. So the options are to either do a non-null assertion, or do the session null check + redirect in +page.server again, even though it has already been done in the hook. Any other option which would be cleaner?

easiest subscribe in a while. here for it.

Great tutorial!

Awesome, this was so helpful! Thanks! Do you have a strategy for components too? For instance if you wanted to render markup conditionally in the main nav (like showing a login button if the user isn't logged in yet). How do you keep it reactive?

Banger video, you can also do (procected) directory to still use layouts without creating a subdirectory for the routes

Awesome content!

thanks for the great explanation!

Keep it up bro. I support you.

Interesting to see how Svelte does middleware. Its a shame they don't just call it that. I feel a lot of us with experience know what middleware is. These new frameworks just love the word "hook" lol. Thanks though this video really helped, be wrap my head on how svelte does this.

thanks, for this! 2 quick questions - given we already have the hook.server.ts which handles the redirect do we need the load function or even the +page.server.ts file (setting aside that you need it for simulating a login in this case) in the base of the routes folder? - how do you decide if the hook file should be a server.ts or or just a ts file? thanks again! love the content :)

if I have a separate backend server running, and I want to make a fetch call which passes a cookie, what do I have to do for Svelte to let me pass the cookie? I've looked at the documentation, but handleFetch doesn't seem to work for me. The backend server is on the same machine, just on a different port.

Nice tutorial. I've got an off topic question though: Which vs code icons are those?

Not working with links thats are made with a tag in build version prerender mood. But working perfectly in dev mode. Any solution?

Great explanation. Thanks 👍 you might want to try sveltekit auth which vercel just announced

That is very awesome, good explanations and great topic, you made me understand the hooks. Does it work with another backend than sveltekit like node js? I have tried but without any success.

just send a few coffees your way, thank you!

If I go to the admin page using an anchor link it bypasses the hook, it only runs if there is a +page.server file inside the admin folder, however if done as a hard redirect it checks the role

Hunter, I could be mistaken but at about 16:17 in the video, when you're demonstrating that a user with a regularusertoken would be unable to access the '/protected/admin' route, it looks like you were able to access the route with the regularusertoken. Was there something misconfigured there - I haven't been able to grab the repo and go through it yet, thank you.

Hey, uhm, I don't know if I'm doing something wrong, because uh... it works for the most part, except that the client-side router may still execute the load function of a protected route when it's preloading that protected route as a response to the user hovering over a link that points towards a protected route. So I still get a console log in my browser that basically says "fetching sensitive data". It seems like in that scenario, the hook on the server is not being invoked. Do you have any tips for that? Or do I just have to disable preloading?

I kinda wish having group-scoped hooks in the future 😊

Great video!!

So is all this necessary if you're using firebase or something similar?

So how do we do if we want the handle to be run on client-side routing as well? I have some pages that are not super important to guard, but I still want to redirect if the user got logged out for some reason. Now they can still navigate in the app client side when the cookie is removed.

I had problems with this technique in my own code: after logging out, i redirect users to the login page. But the user is able to go "back" to the protected page, and still use the nav menu to go to another protected link and it would STILL load that page (and not redirect to login page like it should.) The only simple solution I found is to disable csr. With this solution, the user could go back, but clicking a link to protected route would correctly redirect to login page.

might look good in theory, but if you have an API call inside +page.server.ts it then event.url.pathname will show the API url, not the current page?

Something than I found is every route than you want to protect you have to create +page.server.ts file, Are there something different to that? thank in advance

Great video

Thanks for this great tutorial. After I wached that video I downloaded the coding from git because "LOGOUT" doesn't worked correctly in my coding. The cookie is not deleted and still I don't know why. After I downloaded your coding from git plus installation, the issue is stile there. Do you have any advise, why the cookie is not deleted?

If I've understood the diagram at the start of the video correctly, can I think of the Handle hook as (similar to) middleware?

thank you!

Thanks a lot

Fantastic video! I first watched your "don't protected with layouts", and then watched this... You helped me understand a ton about the page building process, and where to intercept the authentication checks. I really appreciate it. One question, if you put all of your protected content under a "(app)" folder using parenthesis, how should we update the event.url.pathnamne.startsWith function? (around 13:55 in). How to apply the hook to every page within a group?

Great video, thanks for putting it (and others) together. One thing I don't understand though, it seems that your protected route requires protected/+page.server.ts to exist (even if empty) in order for the handler hook to fire from a link. If you remove protected/+page.server.ts you will see that the hook is not run unless you manually navigate to it by typing in the URL (e.g. localhost:/protected). Is Sveltekit intended to work this way? Seems like a variation of the naive layout issue you referenced elsewhere in comments that could lead to dangerous consequences if you somehow forget to put an empty +page.server.ts file there.

Great video ! But I have a problem, if I delete the cookie and navigate with the previous page button of my brownser, i can still reach protected route unitl I refresh the page manualy. This is the same problem that explain in the next video "Stop using +layout for auth", thanks

So handle is just a service worker for Svelte, right?

I get the above, but what happens if you have a link Href on the Layout or Nav bar, and a user click on it to go to a /protectedpage ? I'm finding the above doesn't prevent a user from doing that :S ? Am I missing something? Edit: every protected page must have a server side function, otherwise it will bypass the hooks and be rendered as a static site page! I used a console log during testing to trigger this 👌🏾 works!

Thank you for a great video! Can you please tell me if event.locals object is different for every user? So i dont get leaks between different users' sessions? Sorry for a perhaps dumb question but i'm just starting... Thanks again!

I think SvelteKit should provide a better way to deal with this with something like Angular guards, for example.

Thanks!

Hey, I'm just starting to learn Svelte, or really making webapps in general, and just want to thank you for your awesome content so far, that I was able to discover yesterday and today. I noticed you did some videos on Supabase and Pocketbase, and while I really like Supabase, their selfhosted version is not as feature rich and usable as their cloud version. An interesting alternative to those two is Appwrite, wich selfhosted version gives you the same experience as their hosted one. Would it be possible for you to make some basic tutorials about Svelte and Appwrite, like securely loggin in users, with it? I'm a bit unsure how to use handle routes together with appwrite for securing access. Thank you again for your awesome tutorials :)

Love the content, do you have any plan of doing something similar with Firebase auth?

Nice video

Just implemented some authentication thanks to this video. But what would be the best practise to save cookies into local storage to access the user info globally? For example, I have a Navigation.svelte component in the root +layout.svelte (where i want to display the user email) but I don't want to have every page request on the server side. But since the auth.js, hooks.server.js, and registration are done on the serverside, where should I save the cookies to the local storage? Should I have some condition in the root layout.svelte component when the cookie is set? Or should I just access the cookie in the .svelte files directly? Thanks for any help :)

hunter love your videos! Could you possibly make a video about middlewares? Im thinking of multitenant with subdomain for each tenants and I think this is doable via using a function in +layout.ts but not sure how, another option is using node/express adapter. Do you know how to do it, can you possibly cover it in a video? Thanks!

Liked and viewed . Fair trade =)

why do we need cookies then, if everything can be stored in locals?

hook only run which route have +page.server.ts file if you navigate any route inside produced path without have +page.server.ts using button it will navigate because hooks.server.ts not run

I got an empty object when console logging... after 20min I found out it was because I named the hook file `hook.server.ts` and not `hooks.server.ts` ......................

At 13:30, you demonstrate protected an entire path with hooks.server.ts. Then you say, "you're still going to want to ensure users aren't trying to create items for other users and things like that . . . ." Can you elaborate on what you're referring to? Are you referring to row-level security on the database side, or to some other checks? Also, I'd love a tutorial tying together SvelteKit protected routes and Supabase authentication.

There seems to be a bypass to this method if you have a link from an unprotected route to a "protected" route

hi, great video and it is really helping me in my project. But a quick question, is it secure doing it this way? I mean we are using cookies to handle authentication and I just managed to land on the admin page by just changing the value of the cookie in my browser (with a cookie editor) from "regularusertoken" to "adminusertoken". Just like that I was able to land on to the admin page. I have heared about cookie steaaling and such but I wanted to ask if the case I am describing is the same as cookie stealing or is the issue with the way we are handling the request? Because in the current scenario any user can just log in to our site as admin without much trouble at all. Thanks

please make some clone tutorials using sveltekit. Thanks in advance.

I find this easier to do by just moving whatever routes in to a route group like `(unauthenticated)` and `(app)` then making a `+layout.server.ts` that does the check of user is logged in or user role etc and doing the redirect there. That way you can apply to all the routes w/out relying on hardcoded route strings and having to prepend a path like `/protected` to it.

wouldn't this just clutter your handle hook? you'd be mixing permission checks along with user auth and probably some more stuff in one hook. wouldn't it be better to just check for permissions on each subsequent route with pageserverload? of course the benefit of handling all of it in the server hook would be that you have it one place but other than that i see no real advantage of this over checking it in the load function of each page. i may be wrong though and if i am, please do tell.

Wait, is this the best solution that we have? This is terrible, basically we disable CSR, so every request goes back to the server in order to check the secure cookie... There's got to be a better way.. BTW do we even care if the user deletes their token? We have to revoke it server side anyway. Am I missing something here?

Standard of explain

So is this the ultimate fool proof way?

Are you using @rometools ? Curious how it is working with SvelteKit

How can I protect layouts too? I created +layout.server.ts and I put the same code but it does not work

I get the following Error: Error: Parse failure: Identifier 'Handle' has already been declared (3:11) I´m at 5:09 in the Video and my Code in the hooks.server.js is: import {Handle} from "@sveltejs/kit" export const Handle = async ({event, resolve}) =>{ const response = await resolve(event) return response } Does anyone know what i´m doing wrong?

You are the best 🫶