Hey friends! 👋 I hope you learned how SvelteKit auth works but in your projects I would advise you to use an auth library that deals with edge cases like Lucia.
I really, really appreciate how you make a text article with every video, especially with longer videos like this. It makes it SO much easier to focus on things that I need more time to think about than jumping around pausing all over the place.
Thank you so much for this! I was new to sveltekit, found one of your old vid about this, but after that route changes I couldn't really understand the old one. You're the best!
I love your videos. It's really easy to chill and follow along. And whenever I'm in a hurry it's great to have access to the web article and just see the code quickly. Thanks so much for sharing this!
I totally agree about Prisma. I often think, Am I missing something? Why doesn't every JS developer in the world use Prisma? :) I tend to work in the opposite direction as you did in this video. I set up and make changes directly in the database, and then in the project I can just 'npx prisma db pull' and then 'npx prisma generate'. Magically the DB and ORM are synced. Love it.
Thank you for your wonderful explanations! With combined help from you, and others, I have a working authentication system on my app. I'm also integrating JWT into the cookie. I love how you explained the code as you went, and not just narrated your typing... Thank you again for your awesome Svelte videos!
@@JoyofCodeDev A little question. Should the token we send as a cookie be encrypted? I saw that a lot of packages require a secret ( ex: express-session ) and I'm not sure why.
That would be so cool to see how you would implement a login, register and logout with JWT auth, access - refresh tokens. I’m struggling with this at the moment.. Anyway, your videos are amazing and it’s crazy how well made and concise your videos are. Thank you very much.
I ended up to implement an auth system the same way than you, the only thing different is that I'm using a jwt token inside a cookie instead of a session, that way I can extract the user information in the server without having to query the database
Thank you for this update. Really gotta get going with Prisma especially now that it has mongodb support so I should supposedly just be able to generate my schemas and do the swap…
I might make a Prisma guide because most of what I've seen just reads the documentation to you but it's hard to understand how to model your data if you're not familiar with SQL and how it maps to Prisma.
Great stuff! Does sveltekit have anyway to use a common "load" function for all routes in the (protected) folder? Or do we still have to check on every route?
You can and it works great most of the time but beware that the load function for a layout is not guaranteed to always run when navigating from one child route to another under the layout. This will be possible to have to run for every request in a not too distant future though (see linked GitHub issue). Personally I YOLO it currently and just live with it but the safe way is to do like Matt does here in this video. Check sveltejs/kit issue 6315
Amazing video. Just a question: I have a params page that has the action to delete the user; the user is deleted successfully but using the progressive enhancement it does not redirect me, but brings me to the +error.svelte since the page itself does not exist anymore. But when I remove the progressive enhancement it works
Your form has to have it's own endpoint if you want to use progressive enhancement. For example one thing I tried in the past was having register, login and logout for one action but that doesn't work since the form can't POST somewhere else and work without JavaScript. If you need further help join the Svelte Discord server svelte.dev/chat.
Do you know how to hydrate said data with a class that is available on all pages? I am currently doing site lookups, but I want the object available on the client to be a Site object. That object contains basic information (provided by the server), but also a bunch of helper methods to get the appropriate data where required, such as site features.etc. I know I can use a writable store that gets shared between all components, and establish the Site object via that - but the problem is that this value should not be writable - it should be set once, and then forget about it, and remain immutable. Any ideas?
can I request a JWT auth turorial for the current sveltekit? :P With refresh token and all that? I struggle so hard implementing this. This turorial was great! Thank you very much for this!
@@JoyofCodeDev thanks for the reply! I ditched my project for now and I try to use Prisma like you showed here. Seems like sveltekit is not made to work with a regular REST API. I know it can be done, but currently there is not much information and I really get confused about where to store which token and such
@@1roOt I would read kit.svelte.dev/docs/routing because that's what SvelteKit is made for and if you need help take advantage of the Svelte Discord server svelte.dev/chat.
I am a newbie for sveltkit and your videos have helped me a lot!! thanks much for all your great works. But I got one problem with logout from the implementation from this video. Longing out sort of works fine, it redirects to a target page, login page or home page etc, but when I click the back button, the previous page still shows up. And yeah if I reload the previous page from back button, it is gone and the login page shows up, of course it is normal because i logged out. guess it is a cache problem, but I have no idea how to resolve this problem with sveltkit. Any idea on this?
I don't remember having that problem but I would use an auth library like Lucia in your project since now you understand how auth works and can use it with confidence github.com/pilcrowOnPaper/lucia-auth .
That's the idea! You only have to change the settings and don't have to change your database. Keep in mind SQLite might have less features than PostgreSQL like enums which is important to know.
9:47 literally never knew there was an issue or that there was a way to refresh the page for that issue. I thought I just didn't understand typscript....
Hey! Thank you so much for your help! I am learning both Svelte and Sveltekit and I have one question: I didn't know about the page store ($app/stores) and was using a writeable store (with subscribe, set and update), and was setting the store within the hook, as opposed to setting event.locals as you do. I noticed that the store wasn't updating when I was subscribing to it in another page.svelte (is was still using the initial value I set in the store with the writeable() constructor despite the hook being hit before the page was load). I'm a little surprised why this isn't working, as isn't what you are suggesting in the video with using event.locals and the page store in $app/store following the same ideas? Thanks so much!
It doesn't work because stores aren't shared across the client and server. You can read more about state management and what to avoid in SvelteKit: kit.svelte.dev/docs/state-management.
Hi Matia, Since I first visited your site I have gained confidence in your professionalism and dedication you place in your work. I have been diligently following many of your video tutorials and have learnt a ton of new skills. It goes without saying, that I am greatly indebted to you for the skills and knowledge you have thought me. In the last few days I have also educated myself in the possibilities offered by a host of AI driven No/Low Code platforms: ChatGPT-4, Framer, Midjourney, Feather, Notion AI, Canva AI, Synthesia, Web Flow and Figma to just name a few as they are many more. All these platforms are competing to dominate the front-and-backend technologies by people that have NO training whatsoever (while a typical developer would have dedicated years of hard work). The Al technology platforms as of now can produce astonishing pieces of code very fast, optimized for SEO, for Accessibility, for UX, for content, for graphics and etc etc. The scary part is that ChatGPT-5, currently in the making is planned for release before the end of this year and experts are saying it is going to be a game changer ! My question to you is as follows. How we, who are following your video tutorials, can ever be able to make any reasonable use of the techniques you are teaching us ? How are we going to make any earning with the skills you are sharing with us ? Lets consider the matter rationally: absolute majority of us following your tutorials, are learning web development to make an earning. My fear is that most of your students, including myself, will have to nearly throw away all we have learnt from you and very soon start using AI platforms in order to make some/any earning. Knowledge of HTML, CSS, JS, NodeJS, Svelte, SvelteKit seems to be a relic of the past for absolute majority of developers. Or am I wrong ? And if you are of a different opinion, please, share with us/me how people like me - potential web developers - are to compete for earning with No/Low Code developers. I am asking for your kind advise on this matter. I would definitely prefer if I could be making use of my current knowledge and training in Svelte and SvelteKit. And hence my questions above are all about how I can make an earning with coding knowledge in Svelte/SvelteKit (and JS, CSS, HTML, etc) in the age of AI ?
I'm confused. How does this scale when there is multiple users accessing the server? Does the locals from hooks.server.ts get shared? Or is it just add an authentication object to other pages?
I think there might be a bug in your code related to $page.data.user -> it appears to be undefined and thus breaks the nav bar functionality. I was pulling my hair out on my project because I couldn't get it to work, and then I just cloned yours as a sanity check and it also appears to be broken on yours. I haven't been able to find anything about it changing in the docs, so I'm not sure what is going on. But it looks like you could potentially use LayoutServerData instead...?
1. user.role is if fact an object so passing user.role.name to locals is important: event.locals.user = { name: user.username, role: user.role.name } 2. if you're using typescript it's better to use Page Data like this to have full types support: import type { PageData } from './$types' export let data: PageData
Hey thanks for the tutorial! I got a question that may sound silly but I can't get my head around it. Let's suppose the server where I ask the auth token is slow, I would like to show a loading spinner in the login button. My idea was to have a "let loading" in the svelte file for login, this way I can conditionally render the spinner. I set this variable to true when i click the button and set to false after the promise has been resolved. The problem is that from the svelte file I don't know when the promise will be resolved. I added this logic in the enhance closure (at the start loading is true and at the end is false) but I don't think that this is a clean solution. Any idea?
You can use the SvelteKit action for pending UI states kit.svelte.dev/docs/form-actions#progressive-enhancement and if you need help don't hesitate to ask in the Svelte Discord chat svelte.dev/chat.
Hey friends! 👋
I hope you learned how SvelteKit auth works but in your projects I would advise you to use an auth library that deals with edge cases like Lucia.
Would love to see a video about that 👍
@@ricardoreix agree with you.
I really, really appreciate how you make a text article with every video, especially with longer videos like this. It makes it SO much easier to focus on things that I need more time to think about than jumping around pausing all over the place.
I'm glad you appreciate it! 😄
Thank you so much for this!
I was new to sveltekit, found one of your old vid about this, but after that route changes I couldn't really understand the old one.
You're the best!
That means a lot! 😄
I love your videos. It's really easy to chill and follow along. And whenever I'm in a hurry it's great to have access to the web article and just see the code quickly.
Thanks so much for sharing this!
Thank you! 😊
Yooo! my voice-man is here with a great refresh. it was really a joy to watch this one! Keep them coming! very insightful.
Thank you! 😄
Love this! I’ve been waiting for this refresh 🤩
Enjoy! 😄
Loving this content. It’s really helping me with sveltekit.. Your videos are so easy to follow and you explain things well..
I appreciate that! 😄
I totally agree about Prisma. I often think, Am I missing something? Why doesn't every JS developer in the world use Prisma? :) I tend to work in the opposite direction as you did in this video. I set up and make changes directly in the database, and then in the project I can just 'npx prisma db pull' and then 'npx prisma generate'. Magically the DB and ORM are synced. Love it.
Yeah, that's awesome! 😄
Thank you for your wonderful explanations! With combined help from you, and others, I have a working authentication system on my app. I'm also integrating JWT into the cookie. I love how you explained the code as you went, and not just narrated your typing... Thank you again for your awesome Svelte videos!
Great video as allways. Never tried Prisma but it is on my list. Keep up the good work 💻
Thank you! 😄
The precious and rarest piece on earth as on date. Thanks.
Thank you! 😊
Insane video man
You are a god to me, the way you explain everything is phenomenal. Truly adds joy to my life.
Bro I really wish I can give 10 thumbs up!!!! 👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍 Excellent video everything works as expected!
That's good to hear! 😄
Thank you! I was really looking into cookie auth yesterday, and found your other videos. Thanks again! You are awesome!
I try my best! 😎
@@JoyofCodeDev A little question. Should the token we send as a cookie be encrypted? I saw that a lot of packages require a secret ( ex: express-session ) and I'm not sure why.
@@mihaiandrei434 I can't say I know the answer.
@@JoyofCodeDev i did some research. You did it alright. No need to hash it😬
thank you bro for all you effort to explain this , you are awesome!
You're welcome! 😄
I would love to see an updated version of this using SvelteKit 2.0 and Svelte 5! Maybe even with JWT Tokens instead of just a uuid.
Thanks you so much!!!
Fantastic, very well done man.
🔥
Hey! Thanks so much for this video!
You're welcome! 😊
AWESOME!!!
love this video... thanks so much!
You're welcome! 😄
Super Helpful ,
Thank you! 😄
That would be so cool to see how you would implement a login, register and logout with JWT auth, access - refresh tokens. I’m struggling with this at the moment..
Anyway, your videos are amazing and it’s crazy how well made and concise your videos are. Thank you very much.
I don't know a lot about doing it with JSON Web Tokens but I wouldn't mind having a look when I have time! 😄
Nice!
Lucia docs got updated for the SvelteKit RC. Very handy!
The developer is also incredibly nice and helped provide feedback! 😄
Great video.
🔥
Super info. Thanks man. I should say if role is User and user tries accessing admin, the admin server load should redirect.
The admin route is just an example! 😄
You are great sr. please continue with sveltekit and prisma, an ecommerce would be great
Thank you! 😄
Thank you for this !!! i do think adding types prisma and all this might make it hard for beginners to follow .
I would never show you something I wouldn't do myself and underestimate you if I skip things for convenience.
Thanks
Thank you! 😄
I ended up to implement an auth system the same way than you, the only thing different is that I'm using a jwt token inside a cookie instead of a session, that way I can extract the user information in the server without having to query the database
Awesome! 😄
Thank you for this update. Really gotta get going with Prisma especially now that it has mongodb support so I should supposedly just be able to generate my schemas and do the swap…
I might make a Prisma guide because most of what I've seen just reads the documentation to you but it's hard to understand how to model your data if you're not familiar with SQL and how it maps to Prisma.
@@JoyofCodeDev sounds good. Trying it out with a playground project tonight.
Any upcoming video that uses oauth2?
Great stuff! Does sveltekit have anyway to use a common "load" function for all routes in the (protected) folder? Or do we still have to check on every route?
Yes it does! Search "When to use layout groups" in SvelteKit Documentation
You can and it works great most of the time but beware that the load function for a layout is not guaranteed to always run when navigating from one child route to another under the layout.
This will be possible to have to run for every request in a not too distant future though (see linked GitHub issue). Personally I YOLO it currently and just live with it but the safe way is to do like Matt does here in this video.
Check sveltejs/kit issue 6315
Amazing video. Just a question: I have a params page that has the action to delete the user; the user is deleted successfully but using the progressive enhancement it does not redirect me, but brings me to the +error.svelte since the page itself does not exist anymore. But when I remove the progressive enhancement it works
Your form has to have it's own endpoint if you want to use progressive enhancement.
For example one thing I tried in the past was having register, login and logout for one action but that doesn't work since the form can't POST somewhere else and work without JavaScript.
If you need further help join the Svelte Discord server svelte.dev/chat.
Do you know how to hydrate said data with a class that is available on all pages? I am currently doing site lookups, but I want the object available on the client to be a Site object. That object contains basic information (provided by the server), but also a bunch of helper methods to get the appropriate data where required, such as site features.etc.
I know I can use a writable store that gets shared between all components, and establish the Site object via that - but the problem is that this value should not be writable - it should be set once, and then forget about it, and remain immutable.
Any ideas?
can I request a JWT auth turorial for the current sveltekit? :P With refresh token and all that? I struggle so hard implementing this. This turorial was great! Thank you very much for this!
I would love to but I don't know much about it and using cookies seems easier if you can.
@@JoyofCodeDev thanks for the reply! I ditched my project for now and I try to use Prisma like you showed here. Seems like sveltekit is not made to work with a regular REST API. I know it can be done, but currently there is not much information and I really get confused about where to store which token and such
@@1roOt I would read kit.svelte.dev/docs/routing because that's what SvelteKit is made for and if you need help take advantage of the Svelte Discord server svelte.dev/chat.
I am a newbie for sveltkit and your videos have helped me a lot!! thanks much for all your great works. But I got one problem with logout from the implementation from this video. Longing out sort of works fine, it redirects to a target page, login page or home page etc, but when I click the back button, the previous page still shows up. And yeah if I reload the previous page from back button, it is gone and the login page shows up, of course it is normal because i logged out. guess it is a cache problem, but I have no idea how to resolve this problem with sveltkit. Any idea on this?
I don't remember having that problem but I would use an auth library like Lucia in your project since now you understand how auth works and can use it with confidence github.com/pilcrowOnPaper/lucia-auth .
Great tutorial! Everything works except the user logout button on mobile. The logout form button does not reset the cookies.
What browser are you using?
@@ojosh1h You can leave it here and I'm going to have a look at it.
I cannot add a reply it keeps getting removed
Does prisma work with any Database, like Postgresql. Mysql etc ?
That's the idea! You only have to change the settings and don't have to change your database. Keep in mind SQLite might have less features than PostgreSQL like enums which is important to know.
is login part im trying to redirect to home page but it routing to '/?login' how to fix this?
throw redirect(302, '/') not working
Try asking your question with an example on Discord: joyofcode.xyz/invite.
9:47 literally never knew there was an issue or that there was a way to refresh the page for that issue. I thought I just didn't understand typscript....
This has improved but if you have problems generating the types restarting the development server should resolve the problem.
I am using nest js for backend stuff, login works fine but how do I access the cookie/session data throughout the app?
You can do it the same way as I show you in the video.
@@JoyofCodeDev yeah I have figured it out (by watching the video 2 more times 😅)
hooks are like middlewares?
Yeah! 😄
What VSCode theme are you using?
You can find a link to what I use in the description.
13:30 For those who have large forms you can Object.fromEntries(data).
That's a great tip! 🔥
Which OS you are using?
Here is what I use: joyofcode.xyz/uses.
hi friend, i have an api with express, could i use this login system too?
I don't know! You're only concerned if the user is authenticated or not but I don't know how it plays with an existing API.
@@JoyofCodeDev ok, thanks
so handler works as middleware... in this case is it too much to make this call everytime we send a request to the server?
It's the safest method.
@@JoyofCodeDev I was thinking about it, I couldn’t find a different solution
You could authenticate the user inside the layout but using hooks is safer: th-cam.com/video/UbhhJWV3bmI/w-d-xo.html.
import { redirect, fail } instead of invalid.
Those are recent changes! 😄
Thanks for sharing! You saved me
@@JoyofCodeDev to be expected with such a young framework.
Is this serverless?
You can deploy it anywhere! 😄
Hey! Thank you so much for your help! I am learning both Svelte and Sveltekit and I have one question: I didn't know about the page store ($app/stores) and was using a writeable store (with subscribe, set and update), and was setting the store within the hook, as opposed to setting event.locals as you do. I noticed that the store wasn't updating when I was subscribing to it in another page.svelte (is was still using the initial value I set in the store with the writeable() constructor despite the hook being hit before the page was load). I'm a little surprised why this isn't working, as isn't what you are suggesting in the video with using event.locals and the page store in $app/store following the same ideas? Thanks so much!
It doesn't work because stores aren't shared across the client and server. You can read more about state management and what to avoid in SvelteKit: kit.svelte.dev/docs/state-management.
@@JoyofCodeDev Thank you!
Your lack of use of tab autocompletion triggers me so bad...
Hi Matia,
Since I first visited your site I have gained confidence in your professionalism and dedication you place in your work. I have been diligently following many of your video tutorials and have learnt a ton of new skills. It goes without saying, that I am greatly indebted to you for the skills and knowledge you have thought me.
In the last few days I have also educated myself in the possibilities offered by a host of AI driven No/Low Code platforms: ChatGPT-4, Framer, Midjourney, Feather, Notion AI, Canva AI, Synthesia, Web Flow and Figma to just name a few as they are many more. All these platforms are competing to dominate the front-and-backend technologies by people that have NO training whatsoever (while a typical developer would have dedicated years of hard work).
The Al technology platforms as of now can produce astonishing pieces of code very fast, optimized for SEO, for Accessibility, for UX, for content, for graphics and etc etc.
The scary part is that ChatGPT-5, currently in the making is planned for release before the end of this year and experts are saying it is going to be a game changer !
My question to you is as follows.
How we, who are following your video tutorials, can ever be able to make any reasonable use of the techniques you are teaching us ? How are we going to make any earning with the skills you are sharing with us ?
Lets consider the matter rationally: absolute majority of us following your tutorials, are learning web development to make an earning. My fear is that most of your students, including myself, will have to nearly throw away all we have learnt from you and very soon start using AI platforms in order to make some/any earning. Knowledge of HTML, CSS, JS, NodeJS, Svelte, SvelteKit seems to be a relic of the past for absolute majority of developers.
Or am I wrong ? And if you are of a different opinion, please, share with us/me how people like me - potential web developers - are to compete for earning with No/Low Code developers.
I am asking for your kind advise on this matter. I would definitely prefer if I could be making use of my current knowledge and training in Svelte and SvelteKit. And hence my questions above are all about how I can make an earning with coding knowledge in Svelte/SvelteKit (and JS, CSS, HTML, etc) in the age of AI ?
I'm confused. How does this scale when there is multiple users accessing the server? Does the locals from hooks.server.ts get shared? Or is it just add an authentication object to other pages?
Not sure if SvelteKit team improved use:enhance method but it works without any additional code in layout and login page
That's great! 😄
I think there might be a bug in your code related to $page.data.user -> it appears to be undefined and thus breaks the nav bar functionality. I was pulling my hair out on my project because I couldn't get it to work, and then I just cloned yours as a sanity check and it also appears to be broken on yours. I haven't been able to find anything about it changing in the docs, so I'm not sure what is going on. But it looks like you could potentially use LayoutServerData instead...?
I never encountered this! Did some update happen perhaps? A reproduction might be great.
1. user.role is if fact an object so passing user.role.name to locals is important:
event.locals.user = {
name: user.username,
role: user.role.name
}
2. if you're using typescript it's better to use Page Data like this to have full types support:
import type { PageData } from './$types'
export let data: PageData
Hey thanks for the tutorial! I got a question that may sound silly but I can't get my head around it. Let's suppose the server where I ask the auth token is slow, I would like to show a loading spinner in the login button. My idea was to have a "let loading" in the svelte file for login, this way I can conditionally render the spinner. I set this variable to true when i click the button and set to false after the promise has been resolved. The problem is that from the svelte file I don't know when the promise will be resolved. I added this logic in the enhance closure (at the start loading is true and at the end is false) but I don't think that this is a clean solution.
Any idea?
You can use the SvelteKit action for pending UI states kit.svelte.dev/docs/form-actions#progressive-enhancement and if you need help don't hesitate to ask in the Svelte Discord chat svelte.dev/chat.
if you had a donation method (YT/buymeacoffee/etc), i would use it to show my appreciation - thanks for putting these together
I'm going to set it up! 😄