Auth.js (Next Auth) V5 (2024) with Next.js, Tailwind, DrizzleORM, NeonDB | Full Tutorial

[@GiraffeReactor]

EDIT: I apologize for the audio issues was a huge overlook on my part, I hope everyone will be understanding and still appreciate the work I put into this video! Hi, thanks for stopping by! I know it's a long video so if you have any questions or what me to point you to a timestamp please let me know! If not I think everything in the video ties together nicely and if you have the time i'd say give it a full go through!

[@AlexanderMoyer-k3b]

ha no problem. thanks for the awesome video. idk why people say nextauth is easy to implement

[@GiraffeReactor]

@@AlexanderMoyer-k3b it's easy to implement for simple credentials with email and password (could probably be done in 5 minutes) It's all the customizing that makes it difficult but it also gives you power as the developer to make the auth work for your customization and needs so it's give and take Thanks for the comment!

[@nabiljara9626]

@@GiraffeReactor Thanks, that fixed it, excellent tutorial!

[@the_beat]

You know whats funny is I have been trying to understand this whole thing from top youtube programmers but all they do is to show how smart they are,here you are making me understand this thing in one go,Thanks mate!

[@GiraffeReactor]

Thank you mean's a lot, i know a lot of time is spent on unrelated stuff and its a bit longer overall then I would of liked but I was really happy with the video (minus the terrible audio i found out afterwards T_T). But yeah thank you for the words!

[@mjylove2]

two and an half hours in .. and this vid is a masterpiece

[@SpiceDune]

This is one of the best tutorials. I love the approach. Everything is well thought out, which makes it easy to understand, not just copy-paste like other tutorials. Also loved how you broked down each part into sub parts. Would love to see more tutorials from you.

[@GiraffeReactor]

Appreciate the comment does help me want to make more, have some ideas but currently low on time~!

[@shinuy-yk2mv]

I can't believe youtube is recommending me such high quality bloggers, I'm following you decisively!

[@GiraffeReactor]

Thank you for the comment!

[@shinuy-yk2mv]

@@GiraffeReactor Such long videos are really great, I've been watching continuously for four hours, although I'm really sleepy 😁

[@yixie-hu2jm]

100% wonderful project!!!!!!!!!! It is the fourth day to follow coding!!!! The last chapter now.. so happy!!!!!!!!!!!!!!

[@SSECA]

Thank you for this course on Next.js & Auth. It helped me to better understand the dynamics of authentication within Next.js.

[@GiraffeReactor]

@@SSECA appreciate the comment!

[@furkankaracan2076]

thank you for your service sir

[@GiraffeReactor]

@@furkankaracan2076 Thank you for your comment!

[@OnlyJavascript]

i see the efforts. keep going man!

[@GiraffeReactor]

Appreciate the comment!

[@HenokGebresenbet]

this video is underrated

[@GiraffeReactor]

@@HenokGebresenbet thanks for the comment!

[@codernerd7076]

Would be awesome to update this video with Next.js 15 and React 19 and maybe some alternative like Better Auth?!

[@prashlovessamosa]

+1

[@prashlovessamosa]

Thanks 🙏

[@zhenobiikuzo4957]

holy shems this is gold

[@GiraffeReactor]

@@zhenobiikuzo4957 appreciate the comment

[@thecoder1631]

just came across your channel, definitely want to try the new auth, this would be perfect video. audio has bit of problem but i think you're aware of it :) thank you for putting so much effort into this. cheers.

[@GiraffeReactor]

@@thecoder1631 hey thanks for the comment, yeah definitely know about the Audio TT, considered remaking it or dubbing over it but it took me quite a while to make it not sure if it's worth it, just wanted to provide a free resource + the repo for everyone to view

[@thecoder1631]

@@GiraffeReactor nah i think that would be too much work, should put that energy and time into making another project or something :) maybe new ai tools can help you with audio ? not sure just guessing.

[@kushaltanna5569]

wow..! great video

[@GiraffeReactor]

@@kushaltanna5569 thanks appreciate the comment!

[@zatakzataks]

@@GiraffeReactor hey bro you made my day thanks bro love you

[@yoJuicy]

Love the stack, thanks for sharing. Your audio is only coming out thru the left. I would suggest using a better mic next time.

[@GiraffeReactor]

@@yoJuicy I know! I'm so upset 😭 I think my webcam mic was enabled instead of my regular mic I'll be sure to triple check everything next time

[@yoJuicy]

@@GiraffeReactor all good homie. Could still hear you just fine in one ear😁

[@AlexanderMoyer-k3b]

a. local postgres server with prisma b. start with auth js -> that's why we're watching the tutorial.

[@Jacob-od8rl]

This is the content is one of the best content ever seen. !!! 10 out of 10.!! I got 2 questions. 1: what's the name of the extension or settings when you type a code there are guide you to comment "session is possibly null or undefined" ? - if it's "Error Lens", could you share the settings? or how to enable/disable showing "null | undefined" error? 2. What's the name of extension when you type console.log then show the result beside?

[@GiraffeReactor]

Hello, thanks for the comment! 1. it is error lens, i dont think i set up any custom settings for it 2. second one is called console ninja, unfortunately the free version doesnt work with the newest version of next.js which sucks because i really like the extension

[@Jacob-od8rl]

@@GiraffeReactor Thanks for the reply. BTW, are you still using the console ninja? I've just started install but it says they don't support next.js 15 turbopack. how you handle it?

[@alexandervasilenko7773]

Nice work. Lets continue in the same manner... But you've to dive deeper in the db transactions principle.

[@GiraffeReactor]

What would you like to see?

[@alexandervasilenko7773]

@@GiraffeReactor When you trying to execute several queries (select, update...) to the db it should be less dangerous to execute all of them in one transaction. Just an experience - nothing else, bro :)

[@nelco63]

Great Work, would love your thoughts on removing third party Auth (Google/Github etc) and replacing with Passkeys in a Next Js SaaS application?

[@martinriedl1505]

6:00:56 - coffee break ☕

[@rezwanulhaque9935]

great

[@GiraffeReactor]

@@rezwanulhaque9935 thank you for the comment

[@yixian0716]

I appreciate your hardwork and it is an awesome tutorial. But I would like to ask whether is this authentication secure enough when going into production?

[@GiraffeReactor]

@@yixian0716 I think it's pretty solid It really depends on the scale of the company or if it's just a personal project - All your users are in a database so migration is doable in the future if necessary - I would probably use a better email provider maybe like resend or mail gun so things are easier to handle

[@yixian0716]

@GiraffeReactor Okay tqvm for the clarification 😊

[@_vyas_ayush]

Can you please guide about how i can automatically referesh the token from google console oauth playground.? i have to manually refresh it . Great video btw.

[@mohamedyoussef8835]

Wow... awesome video.

[@GiraffeReactor]

@@mohamedyoussef8835 thank you!

[@angletheeta]

I have a issue when this goes to production im use self hosted vps with nginx when i place riderect url doman/api/auth/callback/google it ridirected to localhost:3000error why is that

[@corpsedad7368]

I want to know something can the roles be implemented here i dont know how to implement roles like one admin , user and other roles if i want for general manager or any other from the super admin type. I know its complex but hope please make a short video to include that please

[@GiraffeReactor]

I cover roles at 01:08:15 - Drizzle Schema Setup 05:46:03 - PART 6: User Roles (USER vs ADMIN) i only use two roles in this tutorial user and admin the process to add a third role like moderator or something is exactly the same as adding a 2nd role like I did with admin, if I have time I will make another video covering three roles.

[@mjylove2]

question: when using useSession() hook, does this hook send request to the /api/auth/[...nextauth] route handler so that the handler read session cookie and send back user info?

[@GiraffeReactor]

@@mjylove2 I assume this is the case since the [...nextauth] catch all covers all the routes for next auth and since useSession is used in a client component it has to access to access server data via those route handlers

[@mjylove2]

@@GiraffeReactor Thank you for the reply !

[@cubeunicorn4055]

Great video Nice work or dividing in multiple parts bur my issue is i don't want to create the first part so if you can provide the code according to part by part is will be very easy to work with please provide this one thanks

[@GiraffeReactor]

I understand, I should have prepared that better in advance I have a very similar repo that has part 1, part 2, part 3, part 4, part 5 in different git branches so you can look there github > destocot > authjs-practice-070804

[@prashlovessamosa]

Whats your theme and font.

[@kennedymungai1]

drizzle-kit push works better than drizzle-kit generate then drizzle-kit migrate IMO

[@GiraffeReactor]

@@kennedymungai1 I probably should have used drizzle-kit push for this specific tutorial since it's not about drizzle But I think they serve two different purposes, drizzle-kit push just pushes your database changes for quick prototyping, but drizzle-kit generate and drizzle-git migrate gives you an SQL file which you can use to migrate without drizzle in the future

[@kennedymungai1]

@@GiraffeReactor Did not think about that. Noted

[@GiraffeReactor]

@@kennedymungai1 yeah I learned about it when using prisma, if its just a personal project i say just drizzle-kit push all the way

[@codernerd7076]

Have you ever found a way to fix the button issue without reloading the full page?!

[@GiraffeReactor]

@@codernerd7076 nope, you can try the built in signIn, signOut functions from import { signIn, signOut } from "next-auth/react those might give you better luck but then you'll be using them directly in your client component honestly though I see no problem with a full page change, it also helps guarantee no user info is left over from the previous login

[@jeremiahgd1924]

Whats the name of that font

[@GiraffeReactor]

for my vs code? I believe I used cascadia code for the next.js app I believe it's Inter

[@corpsedad7368]

K

[@stormbby880]

Does this tutorial include password hashing?

[@GiraffeReactor]

@@stormbby880 yes timestamps are in the description 00:56:04 - Password Hashing (Argon2)

[@stormbby880]

Just finished the tutorial, awesome work, thank you! Do you have any configurations for connecting to supabase instead of neon?

[@GiraffeReactor]

@@stormbby880 yeah you can simply use supabase as a connection string to a postgres database there's also a guide to using it with drizzle from postgres itself supabase.com/docs/guides/database/drizzle I am unsure how it works with the RLS (row level security)

[@OnlyJavascript]

can you make one for lucia auth?

[@GiraffeReactor]

Ive only learned about lucia auth recently, dont think ill get to it anytime soon but ill keep it mind, check out @codinginflow latest 2 videos he covers lucia auth in that tutorial

[@alexdin1565]

The big problem with this Authjs is facebook provider doesn't work

[@GiraffeReactor]

@@alexdin1565 I've never worked with the Facebook provider but I want to for a future personal project so maybe I'll take a look

[@martinriedl1505]

works for me

[@nabiljara9626]

I have an error in the auth-core-d.ts file line 5 that says: Type 'AdapterUser' recursively references itself as a base type.ts How could I fix it?

[@GiraffeReactor]

Try to use same versions of my next-auth and authcore Try to remove the extends default adapter user part Try to use same version of my nextjs Hopefully one of these works, all source code is in the description of the video

[@nabiljara9626]

@@GiraffeReactor I tried changing the versions but it didn't work. How would the code look if I removed the extends default adapter user part?

[@GiraffeReactor]

@@nabiljara9626 import type { AdapterUser as DefaultAdapterUser } from "@auth/core/adapters"; import { users } from "@/drizzle/schema"; declare module "@auth/core/adapters" { export interface AdapterUser { role: (typeof users.$inferSelect)["role"]; } } If that doesn't work just do a // @ts-ignore and move on so you don't get stuck on it

[@nabiljara9626]

That fixed it thanks! Excellent tutorial

[@GiraffeReactor]

@@nabiljara9626 thank you for the comment!

[@CyrilUrban-nw8vd]

Nextjs is shit framework

[@PierreAtman]

Great video ! at 6:14:21, i guess it doesn't work because you typed "insertData.role === USER_ROLES.ADMIN" instead of "insertData.role = USER_ROLES.ADMIN", i guess the first return false :)

[@PierreAtman]

Great video ! at 6:14:21, i guess it doesn't work because you typed "insertData.role === USER_ROLES.ADMIN" instead of "insertData.role = USER_ROLES.ADMIN", i guess the first return false :)

[@GiraffeReactor]

@@PierreAtman ahh I see good eye, funny how I never figured that out just rewrote it with a ternary xD

[@PierreAtman]

​@@GiraffeReactor as long as it works :D thanks again for the video, i learned a lot :)

[@GiraffeReactor]

@@PierreAtman appreciate it means a lot that I can help at least one person