That was so helpful to see the console.log(event) and see how much stuff it has access to. I still don't totally follow the issue with doing auth via hooks but it's making a bit more sense after reading that Github issue. It also looks like AuthJS is working on some integrated-ish SvelteKit support (since it's Vercel-supported) and that may help too.
Glad it was helpful! It is kinda crazy everything that you can do. Pretty much anything your mind can come up with. Examples being: adding a special header to check for in your backend, deleting cookies that don't meet a criteria you determine, re-routing traffic and on and on. If you are still feeling unsure of why you shouldn't authenticate in hooks read this: github.com/sveltejs/kit/issues/3897. I was originally going to show it, but there are people that are hacking together work arounds. So I actually removed that part of the video. It is never good to hack a work around to a piece of underlying framework functionality, even worse of an idea when it is your application security. So best to just be EXTREMELY cautious implementing it the way I show in the protected routes video and wait for the development team to finish their official response to our request for something better.
A dark/light mode example sounds fun! I would need a little more detail on how you would want me to incorporate hooks into that. When last I thought about doing this I thought I would just make a svelte store writable and toggle it from the navbar. What do you think of that idea?
The way that hooks work in SvelteKit by nature they do NOT persist any data. Anything you pass to that hook in say locals would be gone in the very next request. You want to be careful here not to break the separation of concerns. What I mean is that your UI (front-end code) should be soley responsible for all display logic. Just as your backed (server) should be soley responsible for backend logic. The flicker is caused by the need to remember a users choice. I think I have a solution I can demo using a service worker. These sit in front of your UI so they have access to the choice before the page is rendered. Let me flesh that out and put it together!
Great question. Typically, all load functions are run at the exact same time. When you have nested loads you can add await parent() and SvelteKit will stop that load function where you have that line and won't run anymore of that load function until all top level promises have resolved in the parent load function.
If you are wanting authenticated user data, then inside of page.server.js, you can use hooks.server however you need to make sure that you dot your I's and cross your t's or you will create a security hole read this for more github.com/sveltejs/kit/issues/3897
heck yeah! the hooks video!
superb!!
Thank you.
That was so helpful to see the console.log(event) and see how much stuff it has access to. I still don't totally follow the issue with doing auth via hooks but it's making a bit more sense after reading that Github issue.
It also looks like AuthJS is working on some integrated-ish SvelteKit support (since it's Vercel-supported) and that may help too.
Glad it was helpful! It is kinda crazy everything that you can do. Pretty much anything your mind can come up with. Examples being: adding a special header to check for in your backend, deleting cookies that don't meet a criteria you determine, re-routing traffic and on and on. If you are still feeling unsure of why you shouldn't authenticate in hooks read this: github.com/sveltejs/kit/issues/3897. I was originally going to show it, but there are people that are hacking together work arounds. So I actually removed that part of the video. It is never good to hack a work around to a piece of underlying framework functionality, even worse of an idea when it is your application security. So best to just be EXTREMELY cautious implementing it the way I show in the protected routes video and wait for the development team to finish their official response to our request for something better.
Hey Graham, nice to see ya!
Can you do a dark/light mode example wth hooks ?
A dark/light mode example sounds fun! I would need a little more detail on how you would want me to incorporate hooks into that. When last I thought about doing this I thought I would just make a svelte store writable and toggle it from the navbar. What do you think of that idea?
@@ConsultingNinja I want dark / light mode value persisted on server side when page refreshed we wont see a flicker 😘
The way that hooks work in SvelteKit by nature they do NOT persist any data. Anything you pass to that hook in say locals would be gone in the very next request. You want to be careful here not to break the separation of concerns. What I mean is that your UI (front-end code) should be soley responsible for all display logic. Just as your backed (server) should be soley responsible for backend logic. The flicker is caused by the need to remember a users choice. I think I have a solution I can demo using a service worker. These sit in front of your UI so they have access to the choice before the page is rendered. Let me flesh that out and put it together!
why my console log show undefined
Did you figure it out? You can use the repository if you get stuck. It is available here: github.com/consultingninja/authenticationApplication
thank you again, you're amazing
Thank you, you are welcome!
what is happening when you do 'await parent()'?
Great question. Typically, all load functions are run at the exact same time. When you have nested loads you can add await parent() and SvelteKit will stop that load function where you have that line and won't run anymore of that load function until all top level promises have resolved in the parent load function.
i have one question, what is the best way to fetch user data. Using page.server or hook, thenk you
If you are wanting authenticated user data, then inside of page.server.js, you can use hooks.server however you need to make sure that you dot your I's and cross your t's or you will create a security hole read this for more github.com/sveltejs/kit/issues/3897
@@ConsultingNinja thank you!!!