ฝัง
- เผยแพร่เมื่อ 21 ต.ค. 2024
- If you find my content useful and want to support the channel, consider contributing a coffee ☕: hbyt.us/coffee
📁 Starting Code: github.com/hun...
📁 Final Code: github.com/hun...
SvelteKit Prisma CRUD Video: • SvelteKit & Prisma Ful...
Lucia: lucia-auth.ver...
🚀 Become a channel member: hbyt.us/join
💬 Discord: hbyt.us/discord
🐦 Twitter: hbyt.us/twitter
🖥️ Setup Stuff: hbyt.us/gear
📃 Topics Covered:
SvelteKit SSR
SvelteKit Loading Data
SvelteKIt Load Functions
SvelteKit Data Fetching
SvelteKit speed
SvelteKit performance
SvelteKit Server Load
SvelteKit Prisma
SvelteKit Auth
SvelteKit Lucia
Lucia Auth
Hunter, this video is fantastic as usual. Thank you again for everything you're doing for the SvelteKit community. Since 1.0 released, there has been very few resources on how to implement these standard patterns but you are holding down the fort.
Thank you for the kind words! You are very welcome!
Really enjoyed the video!
Quick tip, if you're using Prisma, you can set Lucia.UserAttributes to be equal to the Prisma type for the user table so you don't have to manually update it when your database model changes.
Oh wow I didn't even think about that (I may have missed it in the docs), but that's even better!
sorry but what part of the video does this address so I know where to lookout for this suggestion? thanks!
@@zackadam2598 9:01
I just saw this comment! I was commenting the same to say I did just this. I am curious, however, @pilcrow, if there is any situation where this would be ill-advised?
I'm still pretty new to web development so your insight on this would be really helpful. If, say, I had the password hashed on my User table (and model) Is there any situation where a Lucia auth function would return this information to the client?
@@ryan_roga Types are removed during compile step, so no issue there. There's no API within Lucia that exposes the password or hashed password, but there is an error indicating if the password was wrong, which should not be sent directly to the user. You want to make the error message on sign in attempt as vague as possible, and the error message on incorrect email and password should be the same.
Lucia has come a long way from its initial conception! Great video!
Thank you!
You just earned a sub. Been looking for a good walkthrough of auth in sveltekit, and this is exactly what I needed.
Thank you!
Thanks for this video! Just picked up svelte/sveltkit 2 weeks ago. And your channel came up while I was searching.
Glad I found it. Signed up for the waiting list of your course can’t wait!
I can't wait either, it's almost complete :)
Hey Hunter, I really appreciate you for making all these ! There's so much options for auth and databases (supabase, pocketbase, lucia, ...), and I see you're getting so many questions about how these options compare to each other. Do you plan on doing a comparison video of all the options at some point ? Maybe you could redirect people asking questions there every time ! Thanks again for your work :)
This is a great idea! I'll put it on the list of possible future videos!
@@Huntabyte I am also highly interested in such a video. Thanks for the great work!
nice explanation so far.....i was trying to explain the process for my blog but yours is way better
Nice library, nice video! Thanks! :) Next episode: SvelteKit Authentication with Lucia & OAuth :D
But, now that I tried it, adding and using OAuth is just a breeze with Lucia! Awesome!
Awesome to hear!
I would recommend to spend little bit more time on what gap lucia is filling? how it is different or similar to supabase auth library? Why you recommend this? Most of the coders have these question when something new come. What it is, why it is, where I can place it with respect to my existing tools and libraries. As always, thanks for the great videos :)
Thanks for that suggestion! I actually had a segment in the beginning but I chopped it out because it felt I was rambling before getting into the content! I will probably make a video about deciding which one to use!
I am going to make a video one day: Code like Huntabyte during 7 weeks hahaah
Really enjoying your content! I'm excited to go build something with Sveltekit now.
I'm glad to hear that!
Cheers Hunter, this is a fantastic tutorial. Lucia seems excellent, and coming from Next, 'locals' seems so powerful
I've been eagerly awaiting this guide ever since first learning about Lucia from one of your other fantastically helpful SvelteKit videos, so thank you for making it.
I'm a bit curious about your reasoning for not automatically logging in the user on registration. I found plenty of discussion elsewhere on the subject generally, and it seems that it basically just depends on the risk profile of the application, as well as whether there's an intermediate email confirmation step during the registration process. Is there anything else I'm missing (maybe related to Lucia itself)?
Thanks again for all you're doing to help the community 🤩
Great question! I didn’t do so in this video as typically there will be some form of verification such as email like you mentioned. I’ve also went down the rabbit hole and have decided for myself after using many many apps that don’t auto sign in on register that I just force a sign in afterwards.
It’s nothing specific to Lucia, if you look at the example in their docs they actually automatically create a session on register. Just a personal preference 🙂
I'v found a way to make it works with Lucia 2.0. Its awesome thank you !
Great video, helps to understand the whole concept of auth and Sveltekit. Started to do a side hustle - your videos are very, very nice and please keep it up for us! 👏
Will do! Thanks for taking the time to comment, Oğulcan!
Amazing! But I did struggle on some details, like the fact that the session store got removed from sveltekit, otherwise great video!
Great video, I’ve been actually looking at Lucia and it’s capabilities (to potentially abstract the rest of Supabase’s functionality).
It's exactly what I've been looking for!
3:52 does Supabase auth do this? If I signed in with my gmail account through social provider, and signed up with email and password, does it link to the same account or create 2 separate accounts? 🤔
uhmm I have a question, in the Minute 5:48 why do you run: ```npx prisma generate``` if ```npx prisma db push``` generates the prisma client automatically by default?
Just a habit I picked up before opening my eyes and realizing db push generates a new client :)
@@Huntabyte Oh, I see, it's okay
9:10 So, I figured since I have a Prisma model for User, I thought I might try adding:
type UserAttributes = import("@prisma/client").User
to your line 19. What are your thoughts on doing this and will I run into issues later?
Pilcrow (the creator of Lucia), says your way is the recommended way of doing it! Good discovery!
@@Huntabyte Nice. :) Can you think of any situation where this would be ill advised? What if the User table has the hashed password, for example. Does this describe any data returned through Lucia auth functions? Your experience far outweighs mine so I'm happy to take your opinion on it over my own discovery. 😅
Excelent video, excelte library. When deploy with node adater only work with safe places, other wise, CORS problems!. Thanks again.
As usual another great video❤. Thanks hunter you are carrying sveltekit content on youtube. I was wondering if you have plans to create a video on Error Handling in sveltekit. The topic is very important but most content creators tend to stay away from it. You have very good ability to showcase sveltekit topics. Thanks
Yes that is actually in the works as we speak!
@@Huntabyte I expected nothing less from you ❤. Man you have no idea how much your tutorials help people. I need to save and cough up for your channel membership. Keep the grind up. I pray your content blows up and helps many people
Great lecture! Do you have a following of this video where you deploy this app? Also do you know how to handle image/static files CRUD functions inside this deploy? ty!
Excellent video !
Which diagram drawing tool you are using ?
Excalidraw!
Top, Thanks !
Thanks very much, this was really interesting. I decided to ditch Next and React for Svelte but in terms of guarding for auth, it looks like a lot of boilerplate that concerns me incase a route gets it’s guard forgotten. Is there a more “global” way to do this checking for valid sessions for specific route groups?
Yeah I did a video on this ‘Protect Routes with Handle Hook’. The one caveat is that you need to ensure you have +page.servers beside your +page.svelte files so the hook actually runs. But I demonstrate a full path protection in that video.
@@Huntabyte Fantastic! Thank you very much for your work and content, always a pleasure!
Would the complexity increase if you want to be able to add more things? like Metatags, images and other things people put on their blogs?
This wouldn't necessarily add complexity to the Auth shown in this video, but it would certainly add complexity to the database. Typically blogs aren't setup like this, I just used 'Articles' as a CRUD example that everyone is familiar with!
Hi, great video as usual! By the way, is it possible to deploy such application to services like Vercel/Netlify without using 3rd party services like Firsebase/Supabase?
Yeah! Your database has to be hosted somewhere though!
@@Huntabyte Ah I see, thanks for reply!
Can you do it with PlanetScale and Drizzle ORM instead of Prisma?
I really enjoy it. Thank you so much
You're very welcome!
@@Huntabyte Can you do an extra thing to seeding prisma with Lucia-auth?
I would like to seeding some account and basic data for my website. Thank you so much.
Is it better to auth guard each page individually like you're doing here? What is the disadvantage to doing it inside of hooks.server.js? Is it better or worse to do it each way if everything but your login/signup page(s) are guarded?
It’s just a matter of personal preference. If I was grouping an entire route directory ‘/admin’, for example, I’d probably handle it within hooks, for everything else I just cover it in the load function / action.
youre amazing man, thank you for this
RIP Lucia you will be missed
Can we get an updated version of the video with Lucia v3?
As usual great video ❤
I am getting so much from these tutorials, thanks a lot for your work! I'm curious though: How would you deploy the app using this stack, for example to vercel? Are you planning on making a video about this, too?
I've deployed the apps in my most recent videos to Vercel, Vercel makes it super easy!
I'll look into that, thanks! Anything one should know when moving the database to production, for example specifying file paths? Right know I have a dev.sqlite db within the prisma folder, but does this just move to prod?
Heard about Lucia was wondering if you were going to do something with it!
You already know !
At 11:10 the key is now changed to primaryKey.
At 13:00 validateKeyPassword is useKey.
Thank you!
About time! Been waiting to see the usage of Supabase go away.
Why? Is there something we should know about Supabase?
@@BryanKlein I don't hate it but it's a bit expensive, similar to any BaaS
@@pilcrowonpaper I haven't paid for it yet, so I haven't had that experience. Their free tier covers my needs so far. But $25 a month seems reasonable for the Pro plan. I pay much more than that for other services that aren't a core requirement of my online business. For example, we are using a Legacy plan for CrowdIn that is $135 a month. If we were to sign up today for the same use it would be over $300 a month. This is only used currently to manage translations of our English UI. These are used by a smaller fraction of our customer base. I could see how $25 a month seems like a lot if you aren't making any money from your application, but I would imagine the free plan could cover it in most cases.
@@BryanKlein The free tier is awesome but the pro tier seems a bit more expensive, especially if you just need a relational database.
@@pilcrowonpaper ah yeah, there are much cheaper services for relational DBs. But the whole package, with Auth, DB with RLS, Functions, Storage, etc. Isn't as common or cheap.
What i would really love some information how you would do on is:
Sveltekit + prisma + mysql.
Sveltekit with running live server, when adding a image you have to restart server or the image is 404, some say you need handlers for dynamic data, Its a huge hassle i think to do 😅
I think you do great videos and I really like to watch them.
Great work again
Thank you!
Thank you for this great tutorial. I've already seen Pilcrow's video about his library. Now I know better how to use it. Is there an easy way to include email confirmation in the registration process?
You could throw nodemailer into the mix using an SMTP service of your choosing. So once you create the user in the registration route, you would fire off a confirmation email. You'd have to generate a token that would be included in the "confirmation" link. Maybe I will make a video on this in the future.
Looks cool but what's the advantage for this stack over Supabase?
I think the advantage is it provides more control over your auth flow and enables you to build your own auth on top of various different databases! Just an alternative way to do it!
@@Huntabyte @Brad Also IIRC, Supabase auth is JWT based whereas this is classic server session.
I Had a bad experiencie with lucia, when I Deployed with node adapter. I got this error when a tried to get routes with actions: "Cross-site POST form submissions are forbidden" and without lucia everything go fine!!. In the development environment, everything went well with Lucia, but in production, I encountered CORS issues. Any ideas about this?
Only works with a secure place. Thats it, i dont know if you can change the cookies parameter in lucia
Hey Hunter, Thanks for the nice video. I was looking for a way to create the organization, and membership entities for the newly created user. I was wondering how I can go about it? I think I should do it in the custom handle, but I'm not sure how to implement it?
export const auth = lucia({ *adapter*: prismaAdapter(*prisma*) }) Give me errors. anyone got any solution?
Okay fixed. was not clear in the docs but you should use the beta release with @beta rather than the normal one.
@@Chomaas It's the library version. compare the libs. if you use v2 you need the beta libs.
what version of lucia did u use?
Amazing tutorials!
Is there any gain / point on using sveltekit with an external backend like Go or Nest or c# so just have sveltekit consume endpoints ?
I hate to be that guy, but "it depends". More specifically, it depends on what type of application you're building. If you want to work with websockets or complex custom backend authentication, or if you want to build a REST API to spec for consumption by multiple clients (mobile app, desktop app, web app, etc.), then I'd 100% go with Nest or Go. You could do these more complex things with just SvelteKit endpoints, but I think it's poorly suited for such (dedicated pages for each route, lack of MVC structure, etc.)
@@Huntabyte how about things like scaling ? Full stack with sveltekit can’t in any way or form scale as good as Go.
Se ve increible esto pero, desafortunadamente no pude seguir el tutorial ya que Lucia eliminó las Keys y otras caracteristicas. intenté seguir el manual oficial pero, definitivamente me sentí perdido. De igual manera son grandiosos tus videos. Bendiciones.
Great video! But I have a question tho, how the configuration will looks like if we have a custom User table name? so instead of "User" let's say I have a table called "AdminUser"
i am having trouble setting it up. specially i have a user-table with id as a number
Have you tried the port from NextAuth into what is now called Auth js? I'm considering both this and that and I'm curious to hear your thoughts if you've tried that one, too
I tried it a few weeks ago and a bunch of the types were broke/documentation was lacking. I will revisit once it's at a more stable release!
Well auth.js works but as huntabyte said the types are a mess rn and also all the adapters are still not ported from next auth and The docs have a long way to go.
@@TechBuddy_ I'm sure they will come along soon enough and I will certainly explore it a bit more then!
@@Huntabyte also auth js is a complete package for auth but Lucia is like a set of helpers to roll your own auth
What browser is that? And what extensions are used to make it look like that?
It’s Microsoft Edge with vertical tabs!
Is it able to defer those auth checks for actions to the hook? I've used sailsjs for a while and it has the similar feature called policy which is pretty neat.
Yeah you can! I have a video dedicated to it on my channel! I prefer to do it on a per route basis as of recently, but hooks are great for a massive summary route
@@Huntabyte That would be great! Thanks for your excellent tuts!
Hi Hunter,
I really liked your videos on Sveltekit. Thanks for the wonderful videos.
Could you please make some videos on building Sveltekit apps with AWS Amplify as backend? Specifically integrating with various backend services provided by AWS Amplify?
Thanks,
Rajasekhar.
Does it make sense to use Lucia with Supabase ? Supabase already has a auth option as far as I know ? Which one is better ?
I'd say if you're using Supabase then use Supabase's auth. Lucia is more for rolling your own auth as it gives you only the bare minimum, the flows are all up to you!
Hey! I wish there was an oauth example. Can you do that with Lucia?
Really helpful video. But theres still something unclear for me. How could I show the user an error if an email / username is already used or if other errors occurs. What would I need to change to get it? Ty
You would need to check the db for the username they request first, and then return `fail` if one exists with the message of your choice!
It works with javascript?
I dont know if to use Lucia or Clerk
What about csrf protection?
How difficult would it be to add TOTP to this?
thank you
You’re welcome!
Love your sveltekit videos man. Isn't merging accounts (e.g. email account with github oauth account) insecure? Because if their github account is compromised, the attacker could gain access to their account in our app via their github account, even if they've never used github to log into it before.
You could say the same thing about password managers, if the password manager is compromised, so is everything else. You could also say the same regarding a physical device, if your laptop is stolen while logged into your services, some damage could be done. I don't perceive this as a gaping security hole, if you have proper MFA setup for your email and GitHub and someone still cracks it, they deserve the access at that point.
@@Huntabyte I see what you're saying but I think it's still slightly different than the examples you mentioned. I as a user am knowingly taking the risk (probably small one) of using a password manager and am aware of those risks for each password I put in there. If you as an app developer merge my email account with my github oauth account, then there's a risk to the user that the user is probably not aware of. Not all users may agree to the risk. But in the case of the password manager it was their own choices. In the case of the stolen laptop they're also aware of the risk. If they don't like the risks they can use stronger security settings on the laptop (password/biometrics to unlock, auto lock after short period, encrypted HD). But again the risk is transparent.
If every app on the internet used this logic, then any time one of your accounts was compromised all of your accounts would be compromised.
Not every 3rd party oauth provider will have MFA as an option, and even if they do offer it not every user will have it turned on. I don't think you can assume MFA as an app dev using oauth provider.
Finally, here is a open source library literally for auth that says they don't do this because of the security risks: supertokens.com/docs/thirdpartyemailpassword/common-customizations/account-linking
Apparently supertokens (auth lib I linked) is adding this account merging feature so maybe you're right and it's not a big deal security-wise? I feel like there are other apps that already do it so I guess it's a grey area? Dunno... @Huntabyte
403 is used for unauthenticated users. 404 is the usual practice for accessing of a resource of an unauthorized user. It prevents unauthorized user guessing what entities exists
But great video nonetheless! 😁👍
Good catch! I think I mixed them around quite a bit in this video, but certainly a good idea!
@@Huntabyte more videos like this please! Just discovered your channel and it's really good!!
Thanks! 😁🙌
That's not quite correct.
401 Unauthorized:
Although the HTTP standard specifies "unauthorized", semantically this response means "unauthenticated". That is, the client must authenticate itself to get the requested response.
403 Forbidden:
The client does not have access rights to the content; that is, it is unauthorized, so the server is refusing to give the requested resource. Unlike 401 Unauthorized, the client's identity is known to the server.
Using 404 seems wrong. You can do it, if you want to pretend that this resource does not exist. But I don't think it has any benefit.
@@W4nn3 that is correct. But if you get your app audited or pen tested, this is one of the common things they’ll ask for
somebody make such an awesome tut for ElysiaJS 😎
Could you do a new video on this?
replace prisma with drizzle and that's perfection 💯 (you'll regret really hard later on when you realize prisma doesn't do sql, and instead makes joins and stuff in code 🤦♂)
It takes around 2..to 3 seconds to login ...why so long ?
Its happen the same to me.
This video is wonderful... but Lucia 2.0 breaks it 😞
Thanks! I'll be doing an update with Lucia v3!
I know some of those words.
Great content! Anyone managed to make it work with trpc-sveltekit?
I'm actually using it in a project right now. Not to the full TRPC capabilities yet, but at least the API portion, yes.
@@Huntabyte Do you have a repo I can take a look at? You would add both the lucia and trpc hooks in a sequence and have access to locals in the TRPC context? Is it that simple?
@@jeno427 bump lol, good question Jeno