SvelteKit Session Authentication Using Cookies
Ғылым және технология
In this video I show how to setup a SvelteKit app with both pages and endpoints to demonstrate how to do authentication using session based cookies. I demonstrate how to create a registration and login that leads to a profile page displaying some basic profile information. I also show two different ways to do client side redirects.
If you enjoy my content you can find me on Twitter @BraydenGirard and make sure you are subscribed on KZread so you don't miss out on upcoming content!
/ braydengirard
Пікірлер: 114
no channel can get anymore underrated than this one
@BraydenGirard
3 жыл бұрын
Thanks
Awesome stuff! Thanks so much for sharing this!
Just found your channel and I love the content you are making. As a backend developer that's been recently trying to learn a frontend framework, your channel has been keeping me on track!
@BraydenGirard
3 жыл бұрын
Awesome, thanks for the feedback!
@roastgg
2 жыл бұрын
@@BraydenGirard 4 months since your last video - when you comin back?
Some of the best tuts I've ever seen!
@BraydenGirard
3 жыл бұрын
Thank you
You give me the knowledge about sever side part of sveltekit that I looking for a long time. Thank you
@BraydenGirard
3 жыл бұрын
Glad I can help.
Thank you helping people to discover Svelte kit. Great help for me, thank you
@BraydenGirard
3 жыл бұрын
Thanks, appreciate the feedback!
Thanks for this vid bruv. It was helpful. I think using JWT rather than uuid to set as cookies with short expiry time + refresh token endpoint will be nice for those using external backend services.
Thank you, that was helpful to understand the whole session magic 🙌
@BraydenGirard
2 жыл бұрын
Thanks for watching!
Loved your turorial 👍🏻
@BraydenGirard
3 жыл бұрын
Thanks
This clears up a lot. The docs say how and you show why...
@BraydenGirard
3 жыл бұрын
Thanks!
Hey Brayden, really love this video. Would also love to see that logout function!
I don't know who you are, but I will find you and SERVE THE WORLD'S BEST BREAKFAST FOR YOU. Excellent. Subscribed!
@BraydenGirard
3 жыл бұрын
Thanks! I love breakfast.
Thank you for your great new video and details involved. Would you consider to show us how you can make and well structure folders of backend api endpoints with Sveltekit in some of your next videos? Thank you.
@BraydenGirard
3 жыл бұрын
I can do a video on that for sure! I have shown how to do pieces of it on both this video and my todo app video. I will do a video on just endpoints though!
@kvetoslavnovak423
3 жыл бұрын
@@BraydenGirard Thank you very much. Sometimes tools like Sveltekit or Next confuse me how frontend blends with backend. Especially to be sure o some specific code won’t run on client side. So dedicated video would be really welcomed.
thankyou so much for these tutorials!
@RushikeshKhatkhede
3 жыл бұрын
Did you find anything about that race condition? also if possible please do a project with custom oauth provider login like github and jwt authentication for hasura.
@BraydenGirard
3 жыл бұрын
JWT video is coming soon.
Great video! When I was implementing this though, it came to my mind that it might not be the most secure thing to send the unhashed password to the auth api. It's better to do the cryptographical stuff in the browser before sending it out!
Thank you very much for the videos, I'm learning javascript and svelte, and your content are great. The problem with "authenticated: false", isn't because getSession function is not async?
@BraydenGirard
3 жыл бұрын
Possibly, Thanks for the tip.
@spartant_1212
2 жыл бұрын
@Carlos Did you find a solution ?
was trying to understand cookies for authentication. thanks man! How would you handle user logout?
@BraydenGirard
3 жыл бұрын
You would remove the cookie from the database and clear it in the browser. Doing both might be slightly redundant but I’d rather be safe.
Great job!
@BraydenGirard
3 жыл бұрын
Thanks
Perfect tutorial! Thanks a lot!
@BraydenGirard
3 жыл бұрын
Thanks
The bug you mentioned at 47:23 that the cookie isnt set correctly when using load() is there now a better solution?
@BraydenGirard
2 жыл бұрын
To be completely honest, I haven't had a chance to go back and look at it as I normally use JWT for authentication. I did a video on this as well if that might interest you.
Did you find a solution for the bug ? If you do please share it.
Hey Brayden, I was wondering if you found a solution to the session issue. I am using hooks as well (using the handle function) to process cookies. Everything works, except if you have two windows open with the app and you logout in one of them, the other window has no clue that you have logged out. It still lets me access protected routes because the session never gets refreshed.
Is it possible to authenticate user with jwt token with sveltekit? I would be very happy to see a tutorial on that, because you emphasize security checks in your tutorials, and it would be great to see them more
@BraydenGirard
3 жыл бұрын
I am going to have a video coming up on this.
@ulvidamirli2758
3 жыл бұрын
@@BraydenGirard Thanks a lot! I like your videos. It would be great to see more and more security-related stuff.
@BraydenGirard
3 жыл бұрын
Thanks
Awesome stuff man! Svelte kit is cool. Much easier than react or Vue by a long shot. Do you mind adding a link to the code?
@BraydenGirard
3 жыл бұрын
I don’t have it up on GitHub right now but I plan to get it up there in the fire. Thanks for checking out the video!
43:49 just vibin'
@BraydenGirard
2 жыл бұрын
Guess I should have edited that out
Hey I'm following your tutorial and I'm getting that same thing where the first time you hit a page the session doesn't get refreshed. Mind helping me out there? Ik it's awhile since you posted.
Randomly searched for developers working on a sailboat and saw this, then your avatar. I learned SvelteKit stuff from you a couple years ago back before the big routing change. 😂 Still using Svelte? Do you work full time while living on board? Do you work while under way? And what are any unexpected or tricky things you had to figure out or manage doing this? Pretty much my dream, other than getting my workplace on Svelte which is actually starting to happen.
@BraydenGirard
5 ай бұрын
I spend a lot of time at anchor when working. While I am travelling on the boat I usually do so during down time from work, too much to focus on to get into deep working sessions. I live on a larger river so I travel up and down the river in the summer months but hope to do larger passages in the future.
35:23 that's why you need typescript
@BraydenGirard
2 жыл бұрын
For sure!
Thank for the video, hope you can make Token base authentication as well. and graphql integration :)
@BraydenGirard
3 жыл бұрын
Thanks there on the list
Hi, how do we setup redis on windows? I dont know how to follow your tutorial :(
@BraydenGirard
3 жыл бұрын
There are several ways to setup Redis on windows. If you are still struggling please send me a DM on Twitter and I can try to help out!
Excellent tutorials any chance you can post your examples on github
@BraydenGirard
2 жыл бұрын
Looking at doing more of that in the future
I have this issue where I'm doing a fetch post request like you at 15:05 but my Content-Type application/json is not working and instead the request in dev tools shows this request header is set to text/plain;charset=UTF-8... any ideas on what's the reason for this?
Great Video! I've done the same just with MySQL instead of Redis and when doing the hooks.js I'm getting following error: "TypeError: Cannot read property 'authenticated' of undefined", so he cant get the context param in the getSession Hook, do you know why?
@itisallnewtome1
2 жыл бұрын
context is undefined... having same trouble... anyone else?
@skitzskr
2 жыл бұрын
@@itisallnewtome1 do the stuff from getContext inside if getSession so just do 1 function instead of 2 getContext and getSession, then it should work because (sveltekit docs) the hook getContext doesn’t exist
@skitzskr
2 жыл бұрын
Or maybe reversed? idk anymore but that’s the way I did it and it worked 😂
@elthomas_
2 жыл бұрын
@@skitzskr I have the same error, putting the getContext code in getSession reveals the user info, defeating the purpose. It seems like getContext isn't running at all because I couldn't console.log from it nvm I think only the value returned from getSession is exposed
@skitzskr
2 жыл бұрын
@@elthomas_ back in time I checked the svelte docs and there wasn’t even a getContext function, just wondered why it worked in the video when we all did exactly the same 😂
isn't it s frontend language ? login or auth should be handle by backend? or rest api (golang /php/node etc?)
@weiiswurst
Жыл бұрын
the serverside javascript runs on the server with nodejs and does not get sent to the user. In 2022, js is a perfectly valid option for the server as well.
I think session only be executed after page reload, you should add "import {session} from '$app/store'" in login.svelte, then change $session according to test conditions in profile, will work.
@BraydenGirard
3 жыл бұрын
Thanks for the advice I’ll have to try this
I also spent lot of time perfecting user/password auth. But lately I am pushing users towards sign in with google, facebook and apple. And user/password auth is backup option. Might even eliminate it soon.
@BraydenGirard
3 жыл бұрын
Seems to be the trend. This was more for basic educational purposes.
@brandongibbs5880
3 жыл бұрын
While this is definitely the trend, it is important (at least for now) to not be solely reliant on external sources. For instance, users that do not use social media, or may not understand / trust the process of using Oauth... and in doing so you could end up managing many login processes. You also should consider a few things... What is your target audience and what are they most likely to use. Professionals? Probably LinkedIn. Neutral? IG/FB, Google, etc. Tech? GitHub, and other options as well. With that, you're also at the mercy of the terms and changes in not only policy, but process of these 3rd party logins.
@NikosKatsikanis
3 жыл бұрын
@@brandongibbs5880 yeah I hardly ever use those social logins
@paolo-e-basta
2 жыл бұрын
@@NikosKatsikanis which kind of nefarious side effects could have logging with social logins?
@NikosKatsikanis
2 жыл бұрын
@@paolo-e-basta u cant reember what you used to ogin, and end up creating duplicate accounts
3:16 I can't find the lib folder in src.. Sorry I am kind of dumb
Audition for a super man role, seriously!
@BraydenGirard
3 жыл бұрын
Lol
wow that couch looks familiar.
Is there a github for this code?
Any github code to look at ? :)
Can you share the github folder ?
@BraydenGirard
3 жыл бұрын
I don’t have this code on GitHub. I will in future videos.
@anhvuuc8693
3 жыл бұрын
@@BraydenGirard or just need all files :\ I want read code to more understand
Next Video -> SVELTE SSR if you could
@BraydenGirard
3 жыл бұрын
I’ll add it to the list!
@Systemx93
3 жыл бұрын
@@BraydenGirard sure thanks Also sapper vs sveltkit
@BraydenGirard
3 жыл бұрын
@@Systemx93 this is more likely coming soon!
project git?
@BraydenGirard
2 жыл бұрын
I haven’t put them all on Git yet. I plan to do more of this in the future!
found a fix for the race condition?
are you ok from 43:46 to 44:26 ?
@BraydenGirard
3 жыл бұрын
Hahaha, thanks for reminding me that I was supposed to edit that out.
@donovanm
3 жыл бұрын
@@BraydenGirard Great video anyway :D, have you find a solution for the Unauthorized issue ? I've been looking into it but I can't find anything it just seems like the cookie is set after the load function on the profile page
@BraydenGirard
3 жыл бұрын
@@donovanm I haven’t yet, but I’ll be diving deep into auth next week and I’ll let you know!
@donovanm
3 жыл бұрын
@@BraydenGirard Ok so I just had to put a load function on the unauthorized page that redirect to /profile if user is authenticate
@BraydenGirard
3 жыл бұрын
Smart workaround for the time being!