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

  • @edgeeven2226
    @edgeeven22263 жыл бұрын

    no channel can get anymore underrated than this one

  • @BraydenGirard

    @BraydenGirard

    3 жыл бұрын

    Thanks

  • @JamesQQuick
    @JamesQQuick2 жыл бұрын

    Awesome stuff! Thanks so much for sharing this!

  • @jlegolasUR
    @jlegolasUR3 жыл бұрын

    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

    @BraydenGirard

    3 жыл бұрын

    Awesome, thanks for the feedback!

  • @roastgg

    @roastgg

    2 жыл бұрын

    @@BraydenGirard 4 months since your last video - when you comin back?

  • @NikosKatsikanis
    @NikosKatsikanis3 жыл бұрын

    Some of the best tuts I've ever seen!

  • @BraydenGirard

    @BraydenGirard

    3 жыл бұрын

    Thank you

  • @HuoShengChiou
    @HuoShengChiou3 жыл бұрын

    You give me the knowledge about sever side part of sveltekit that I looking for a long time. Thank you

  • @BraydenGirard

    @BraydenGirard

    3 жыл бұрын

    Glad I can help.

  • @galiteswebdesigngillestest7010
    @galiteswebdesigngillestest70103 жыл бұрын

    Thank you helping people to discover Svelte kit. Great help for me, thank you

  • @BraydenGirard

    @BraydenGirard

    3 жыл бұрын

    Thanks, appreciate the feedback!

  • @jeremiahikwuje2399
    @jeremiahikwuje23992 жыл бұрын

    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.

  • @Codebryo
    @Codebryo2 жыл бұрын

    Thank you, that was helpful to understand the whole session magic 🙌

  • @BraydenGirard

    @BraydenGirard

    2 жыл бұрын

    Thanks for watching!

  • @masedinet
    @masedinet3 жыл бұрын

    Loved your turorial 👍🏻

  • @BraydenGirard

    @BraydenGirard

    3 жыл бұрын

    Thanks

  • @michaelpotter9006
    @michaelpotter90063 жыл бұрын

    This clears up a lot. The docs say how and you show why...

  • @BraydenGirard

    @BraydenGirard

    3 жыл бұрын

    Thanks!

  • @iDreamOfOkra
    @iDreamOfOkra Жыл бұрын

    Hey Brayden, really love this video. Would also love to see that logout function!

  • @politibetjent
    @politibetjent3 жыл бұрын

    I don't know who you are, but I will find you and SERVE THE WORLD'S BEST BREAKFAST FOR YOU. Excellent. Subscribed!

  • @BraydenGirard

    @BraydenGirard

    3 жыл бұрын

    Thanks! I love breakfast.

  • @kvetoslavnovak423
    @kvetoslavnovak4233 жыл бұрын

    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

    @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

    @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.

  • @RushikeshKhatkhede
    @RushikeshKhatkhede3 жыл бұрын

    thankyou so much for these tutorials!

  • @RushikeshKhatkhede

    @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

    @BraydenGirard

    3 жыл бұрын

    JWT video is coming soon.

  • @MrUeberkrass
    @MrUeberkrass Жыл бұрын

    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!

  • @cfale
    @cfale3 жыл бұрын

    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

    @BraydenGirard

    3 жыл бұрын

    Possibly, Thanks for the tip.

  • @spartant_1212

    @spartant_1212

    2 жыл бұрын

    @Carlos Did you find a solution ?

  • @zzej
    @zzej3 жыл бұрын

    was trying to understand cookies for authentication. thanks man! How would you handle user logout?

  • @BraydenGirard

    @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.

  • @mcdba41
    @mcdba413 жыл бұрын

    Great job!

  • @BraydenGirard

    @BraydenGirard

    3 жыл бұрын

    Thanks

  • @ulvidamirli2758
    @ulvidamirli27583 жыл бұрын

    Perfect tutorial! Thanks a lot!

  • @BraydenGirard

    @BraydenGirard

    3 жыл бұрын

    Thanks

  • @GeneralMine
    @GeneralMine3 жыл бұрын

    The bug you mentioned at 47:23 that the cookie isnt set correctly when using load() is there now a better solution?

  • @BraydenGirard

    @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.

  • @spartant_1212
    @spartant_12122 жыл бұрын

    Did you find a solution for the bug ? If you do please share it.

  • @iDreamOfOkra
    @iDreamOfOkra Жыл бұрын

    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.

  • @ulvidamirli2758
    @ulvidamirli27583 жыл бұрын

    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

    @BraydenGirard

    3 жыл бұрын

    I am going to have a video coming up on this.

  • @ulvidamirli2758

    @ulvidamirli2758

    3 жыл бұрын

    @@BraydenGirard Thanks a lot! I like your videos. It would be great to see more and more security-related stuff.

  • @BraydenGirard

    @BraydenGirard

    3 жыл бұрын

    Thanks

  • @eaglebirdiepar
    @eaglebirdiepar3 жыл бұрын

    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

    @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!

  • @--Arthur
    @--Arthur3 жыл бұрын

    43:49 just vibin'

  • @BraydenGirard

    @BraydenGirard

    2 жыл бұрын

    Guess I should have edited that out

  • @22lilbean
    @22lilbean2 жыл бұрын

    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.

  • @Palundrium
    @Palundrium11 ай бұрын

    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

    @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.

  • @ray-lee
    @ray-lee2 жыл бұрын

    35:23 that's why you need typescript

  • @BraydenGirard

    @BraydenGirard

    2 жыл бұрын

    For sure!

  • @gasacchi6734
    @gasacchi67343 жыл бұрын

    Thank for the video, hope you can make Token base authentication as well. and graphql integration :)

  • @BraydenGirard

    @BraydenGirard

    3 жыл бұрын

    Thanks there on the list

  • @iQCudi
    @iQCudi3 жыл бұрын

    Hi, how do we setup redis on windows? I dont know how to follow your tutorial :(

  • @BraydenGirard

    @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!

  • @ElementsOfAmbience
    @ElementsOfAmbience3 жыл бұрын

    Excellent tutorials any chance you can post your examples on github

  • @BraydenGirard

    @BraydenGirard

    2 жыл бұрын

    Looking at doing more of that in the future

  • @jpgarcia90
    @jpgarcia902 жыл бұрын

    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?

  • @skitzskr
    @skitzskr2 жыл бұрын

    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

    @itisallnewtome1

    2 жыл бұрын

    context is undefined... having same trouble... anyone else?

  • @skitzskr

    @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

    @skitzskr

    2 жыл бұрын

    Or maybe reversed? idk anymore but that’s the way I did it and it worked 😂

  • @elthomas_

    @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

    @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 😂

  • @xman6267
    @xman6267 Жыл бұрын

    isn't it s frontend language ? login or auth should be handle by backend? or rest api (golang /php/node etc?)

  • @weiiswurst

    @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.

  • @notme9432
    @notme94323 жыл бұрын

    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

    @BraydenGirard

    3 жыл бұрын

    Thanks for the advice I’ll have to try this

  • @ApoorvMote
    @ApoorvMote3 жыл бұрын

    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

    @BraydenGirard

    3 жыл бұрын

    Seems to be the trend. This was more for basic educational purposes.

  • @brandongibbs5880

    @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

    @NikosKatsikanis

    3 жыл бұрын

    @@brandongibbs5880 yeah I hardly ever use those social logins

  • @paolo-e-basta

    @paolo-e-basta

    2 жыл бұрын

    @@NikosKatsikanis which kind of nefarious side effects could have logging with social logins?

  • @NikosKatsikanis

    @NikosKatsikanis

    2 жыл бұрын

    @@paolo-e-basta u cant reember what you used to ogin, and end up creating duplicate accounts

  • @bone_breakerdudu
    @bone_breakerdudu Жыл бұрын

    3:16 I can't find the lib folder in src.. Sorry I am kind of dumb

  • @NikosKatsikanis
    @NikosKatsikanis3 жыл бұрын

    Audition for a super man role, seriously!

  • @BraydenGirard

    @BraydenGirard

    3 жыл бұрын

    Lol

  • @coollobsterr
    @coollobsterr2 жыл бұрын

    wow that couch looks familiar.

  • @ekallivrousis
    @ekallivrousis2 жыл бұрын

    Is there a github for this code?

  • @somerandomchannel382
    @somerandomchannel3822 жыл бұрын

    Any github code to look at ? :)

  • @anhvuuc8693
    @anhvuuc86933 жыл бұрын

    Can you share the github folder ?

  • @BraydenGirard

    @BraydenGirard

    3 жыл бұрын

    I don’t have this code on GitHub. I will in future videos.

  • @anhvuuc8693

    @anhvuuc8693

    3 жыл бұрын

    @@BraydenGirard or just need all files :\ I want read code to more understand

  • @Systemx93
    @Systemx933 жыл бұрын

    Next Video -> SVELTE SSR if you could

  • @BraydenGirard

    @BraydenGirard

    3 жыл бұрын

    I’ll add it to the list!

  • @Systemx93

    @Systemx93

    3 жыл бұрын

    @@BraydenGirard sure thanks Also sapper vs sveltkit

  • @BraydenGirard

    @BraydenGirard

    3 жыл бұрын

    @@Systemx93 this is more likely coming soon!

  • @user-hg8jz6pp4n
    @user-hg8jz6pp4n2 жыл бұрын

    project git?

  • @BraydenGirard

    @BraydenGirard

    2 жыл бұрын

    I haven’t put them all on Git yet. I plan to do more of this in the future!

  • @sean_reyes
    @sean_reyes2 жыл бұрын

    found a fix for the race condition?

  • @donovanm
    @donovanm3 жыл бұрын

    are you ok from 43:46 to 44:26 ?

  • @BraydenGirard

    @BraydenGirard

    3 жыл бұрын

    Hahaha, thanks for reminding me that I was supposed to edit that out.

  • @donovanm

    @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

    @BraydenGirard

    3 жыл бұрын

    @@donovanm I haven’t yet, but I’ll be diving deep into auth next week and I’ll let you know!

  • @donovanm

    @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

    @BraydenGirard

    3 жыл бұрын

    Smart workaround for the time being!

Келесі