Comprehensive Authentication Tutorial in Next.js 14
Vložit
- čas přidán 11. 07. 2024
- Comprehensive Authentication with latest features of Next.js 14
Please Subscribe To my Channel ❤️
I Wish you all a successful year.
GitHub Repo (Please Give a ⭐ on GitHub): github.com/vahid-nejad/Nextjs...
Chapters
0:00:00 Intro
0:01:34 Setup Next.js Project
0:02:36 Setup Prisma
0:03:53 Creating Prisma Models
0:08:30 Setup Next-Auth
0:21:03 AppBar
0:26:22 Signup Page
0:30:12 Signup Form
0:39:03 Form Validation
0:46:02 React Hook Form
0:51:11 Integrate ZOD with React Hook Form
0:55:49 Password Strength Checker
1:05:37 Server Action for Saving New User
1:14:55 Testing Next-Auth Sign In Page
1:22:43 Altering Next-Auth User Type
1:25:33 Next-Auth Callbacks
1:31:32 Custom Signin Page
1:55:46 Activation Email
2:04:54 Setup Third Party SMTP Server
2:08:26 Design The Body Of Emails
2:11:51 HandleBars
2:19:41 Encrypting URL in Emails with JWT
2:37:07 Forgot and Reset Password
2:45:42 Server Action For Password Reset
3:10:04 Differnce Between useSession and getServerSession
3:19:30 Two Ways of Page Protection
3:21:52 Next-Auth Middleware
3:24:53 Role Based Authorization Card
3:25:20 Google Provider Card
Sekura ❤ I’m only at the first hour of this tutorial. Had to submit a comment to say a big thank you! You absolutely know how to explain and teach. I love every minute of it.
Thanks a lot. I am really glad you found it helpful 🙏
wow this is crazy i have beenn expecting this kind of tutorial from scratch on youtube what can i say thank you happy new year
Happy new year! Glad it was helpful!
Thanks a million. Your tutorial is not only the best abaout next-authenticaition. Its the door to modern next14 Fullstack Development.
Thanks for your nice words 🙏🙏
This is what i been looking for
Thanks 🎉
Amazing tutorial. All I've been asking for for years. Thank you very much
Thanks a lot 🙏🙏🙏
Tanks been waiting for this great project ❤
Thanks for you vid.
I've watched your Nest/Next vídeo from last year, and comparing with this new one, it's much better.
I also think you improved your explaning skills a lot.
Congratz bud.
Thanks for your encouragement 🙏🙏🙏. This will give me energy to move forward ⏩
This channel is highly underrated, as a lead software engineer in our start up we are using nextjs and I used this channel's refresh and access tokens for authentication tutorials and it has been our day to day application because it enables us hit the same API for our mobile application
Thank you so much 🙏🙏. I am really glad it was helpful for you 🙂🙂.
@@SakuraDev truly helped me a lot.
I agree with your comment, god bless your parents.
shut up mohammed
Man, you deserve a lot more subscribers. As a beckend developer, I had hard time understading the working of Nextjs, you nailed it with your best in class course. Now I could build an awesome application.
Thank you so much 🙏. I am really glad that it was helpful for you 😊
Keep making content like this, your content is great🙏
Thanks for your support 🙏🙏🙏
First time here, and I'm blown away by your content! Your teaching is exceptional. Looking forward to more! Could you cover Role and Permission-based Access in your upcoming videos? Thanks for the great work!
Thanks 🙏🙏. I have already actually 2 videos on role based authorization.
Thanks alot for this tutorial! It was a big help to my project. Great job! 👍
Thanks you so much 😊
Vahid, thank you very very much for the such an amazing tutorial!! Really appreciate it :) Lets continue? Waiting...
Thank you, I will
You're really amazing. Just everything I need right now. Thank you
Thanks 🙏🙏🙏
I am highly appreciative of this tutorial! Like others I have had many false starts due to gaps in my knowledge of all the necessary packages/libraries that work together in a nice onboarding service. This tutorial answers a majority of my knowledge gaps as a noob. Thank you for putting this together as I know how much effort and planning goes into something like this. I look forward to many more tutorials from you!
Thank you so much for your enthusiastic comment. Thi gives me energy to move forward ⏩
Thank you!
Thank you!!
Thank you for this video!!!
Thank you so much 🙏🙏🙏🙏🙏
Amazing tutorial! Thank you so much!
Glad you enjoyed it!
Perfect New Year GIFT! Thanks a lot
Thanks a lot.
Thank you very much teacher, it was the best authentication training I have seen. Thankful
You are the best ❤️
this is the most straight foreward tutorial on next auth I love it
I'm really glad that you liked it 😊
I have subscribed your channel immediately after seeing your intro of this video.
Thanks for your support 🙏🙏
Thank you for the video, watching it here from 🇧🇷 Brazil, God bless you and your family, thank you very much for the great content, success brother!
Thank so much 🙏🙏🙏🎉💖
Good jobs 👏🏻👏🏻
Massive job. Thank you
Thanks a lot 🙏
I must say this is an amazing course on next-auth, your way of teaching is very clear and easy to understand sir. I've learnt so much from this video, really useful for my uni project, going to share this with my friends. Thank you so much once again🙏🙏
I'm really glad it was helpful.
You have no idea how many incomplete videos I had to go through until I found this one. First person to explain every step properly and I finally get it. Took me a week to learn nextauth and without your vid it might've been a month.
I am really glad that it was helpful for you 🙂. Thank you so much 🙏
@@SakuraDev I have a noob question if that's ok. Some websites have the ability to sign in with either an username or an email interchangably in a single field. Is this possible with next auth? Can I implement some kind of conditional logic to my authentication that accepts either parameter as a sign-in credential?
Yes it is possible. In your authorize function of the next auth, you can find the user in in user table where it emails match with entered username or matched with user's email
@@SakuraDev Thanks a lot there are a lot of details in your video that are super important yet people don't cover.
Thanks a lot 👍
❤❤love the way you teach
❤️🌹
i will say that sakuradev is an underrated channel, thanks for all bro
I appreciate that!
Impressive....
Nice one sakura ❤❤
First Comment 😅 Thanks 🙏🙏
merci kheili khob bod
awesome !!!!
Thanks 🙏🙏🙏
hey Sakura, nice video!
in one of your last videos you showed how to create a custom authentication service using nestjs and nextjs with jwt tokens send via the header. could you make a new fullstack authentication video using http only cookies? i would really appreciate. 🎉
good tutorial tanks
Thanks 🙏
looking forward to the next nextjs tutorial❤
Thanks Sakura.
Thanks 🙏🙏🙏
Thank you for sharing this content. I have one question, how do you handle redirecting the user to the profile page when that user tries to access the login page after successful authentication using middleware.
because of this vedeo i just sub you with my two accounts
Thanks for your support
Hi very good tutorial, only one question on form validation, is it a client or server side validation for user registration?
Hi Sekura! It's me again!
I've done some custom stuff to the project, and it's working fine on my machine.
After that, I've send to Netlify, but after the deploy for some reason I'm getting error messages when trying to comunicate with prisma.
Wich aditional configuration I need to do to make it work?
have one question, first case if both frontend and backend as next, how to store session and access token and refresh token, should i store it in cookie or what?? how to recall the refresh token . same question about separate backend. bit stuck here, thank you.
Great video but what about for consuming external nest.js REST APIs?
Hi bro how to set the default page to be login when go to npm run dev in the browser it to be handle localhost:3000/login not the home page localhost:3000 I implemented but when I gave localhost:3000 its changing to localhost:3000/login but the issue is white space occuring 2secs then login page occuring how to resolve this issue
great tutorial thank you so much can you also make project based tutorial using microservices architectures with nestjs,graphql,prisma,nextjs,docker so on
Great suggestion!
Thank you dear Vahid🤍
🙏🙏🙏
This video is the best explanation on next auth with a credentials provider period.
Thanks for your great work.
Do you have a video on how to verify a jwt token returned by a backend?
Thanks for your nice words 🙏, Actually I have video about your question
czcams.com/video/khNwrFJ-Xqs/video.html
Is there a reason why we're creating 'pages/api/auth/[...nextauth].route.ts' instead of 'pages/api/auth/[...nextauth].ts' like the documentation suggested on their site?
Thank you so much for sharing such a great tutorial video! sorry for asking, When exactly we need to use Nest.js too, for authentication?
I mean while Next.js is capable of authentication what is the point of using Nest.js?
Thanks. We are using nextjs as a full stack project, so we don't have a backend server. If we use nextjs just as front end, then we need a back end server like nest.js to keep track of our user data. I have a video on that. You can find it on my channel
❤🙏@@SakuraDev
I have a question since it's been a month since I completed this and since then I've learned about the difference between token based and session based auth. With your method of implementing auth can I revoke user access instantly or will they still have an active token if I delete them from my database? There are multiple written and video tutorials on the web but all of them use jwt token sessions and it's very hard to manage access with them as the client keeps them even if they're removed from db.
Hi, Nice Point, we should keep a database of tokens. with that, we can easily revoke tokens. We usually use Redis for that in our real world projects.
I have followed the tut and was so proud that all works now. But a bit too well? I noticed that all server actions can be called from the client side even without authorization. I don’t use Prisma but just a executeQuery function for mysql2. That server function can be used on client, as it should, to make database queries with normal sql (can just put the query in there). But: Anyone can use it. I made a button on a client page (just the home page outside of protected routes) that accesses the server action. And it works! And whatever I do I cannot prevent the client to always and anywhere use that server action. No idea how to protect it…
Really frustrating because that would mean I need to use api routes for database queries??
There are so many videos on Auth on this channel. There's a playlist but it doesn't have all the videos on Auth from this channel. Can you please tell me the order in which I am supposed to watch these videos?
btw, coming here from your prisma/ drizzle tutorials and absolutely loved them!
Hey Sakura, I have followed your NestJs and nextJs combine tutorial for handling refresh token. I replicate the same using Nextauth-5
In callback, we check the expire time and if expire we made call to refreshToken then we get
But if in case, refreshToken also expire, the function will give 401. Under this condition, still nextauth keep user login. Is there any way yo trigger signOut() without clicking button ?
Or is there any way to auto signout when such event happen
unfortunately nextauth signOut() is only working in client side ... all you can do is to redirect the user to an client side page which will call the signOut() function.
in my opinion i think nextauth is really not well designed to work with refresh tokens (especially when using http only cookies)
At @2:18:32 I'm getting an error: Error: You must pass a string or Handlebars AST to Handlebars.compile. You passed undefined
Thanks Sakura for this great video, can we elaborate to connect OAuth with backend?
Yes I am going to create a tutorial for next.js and Nest.js in the backend and integrate the OAuth with the backend
I came up with some solution getting google OAuth and refresh token strategy to work, thanks to your video: czcams.com/video/khNwrFJ-Xqs/video.html It's is working but I don't know is it a good solution, I can share the code with you if you are interested. @@SakuraDev
Why api/auth/[...nextauth] is not working for me ??
Hey Sakura, I have a question.
I've watched you vid, an ultil the part 17 when you finish the signin form, you dont talk about the authentication expires.
If I'm not wrong, the authentication goes like:
1st access? - create a token and insert user data inside a token
2nd access? - use the session to get the token and retrieve the user info
But for how long the token is up? Or its only expires when you log out? You can change the expire time like the commom Jwt method ou your NestJS vid?
Thanks!
Edit: Also, I added two new columns to user table (createdAt and updatedAt) to manage future updates. But I can't find a way to insert the values for this two new fields.
I cant do this in the formSingUp with zod, but because of this I cant also do it on the registerUser function on routes.ts method because to make it work, I need to inputs these new fields to Omit.
Can you give me an idea to make it work please?
Lov u!
Hi, For the first connection, when we use nextjs as a fullstack, I believe, we do not need to worry about refresh token. but if we have a separate backend we need to think about the refreshing the access token.
and for the second question, you can set a default value in the schema for createdAt or you can set the createdAt manually when you creating a user, i.e. inserting a new user with Prisma. In this case you don't need to change the zod schema because we don't want to take the value of createdAt from the user in the Form. So just handle it inside the create user function. the same goes with the updated at
BTW, thanks for your support.
Thank you very much for take your time to help.@@SakuraDev
I know only react and a little bit of next, is it enough to understand these concept?
👋 if you have some basic understanding of next.js, you can understand this video pretty good 👍
Thanks for amazing video. But your video sound is very low. I have set to maximun volume i my pc and youtube video player. still sound is low. Cordial Suggestion to improve sound quality.
Thanks for bringing that to my attention, I have amplified the second volume in my today video
What is the theme that You use in VSCODE?
Bearded themes
@@SakuraDev thank you and which theme specifically do you use? 😊
thanks sakura, can you please guide us how to logout inactive users based on session
you can adjust the jwt expiry time.
Why dont you let to save this on a list so I can watch it whenever I want?...
i wonder if you also put refresh token client & server way too ..
Since we are using the next.js as full stack project, we don't need refresh token. but I have covered it in my previous video which is about combination of Nest.js and Next.js: czcams.com/video/khNwrFJ-Xqs/video.html
cool sakura, and your explanation on that video it so good 🔥
Thank you. Next.js + apollo client GraphQL Tutorial please...
Put it on my list
Thank you@@SakuraDev
Does this work for next auth v5 too?
Unfortunately not, for v5 you can watch my auth.js v5 video
@@SakuraDev yeah just watched it, v5 become simpler and easier to implement
Sir pls add the Github link soon.
Awsm video for beginners like me.
Added
Thank you so much
it was a rly good tutorial but i felt like the "okey" wasn't enough
why pucking no body uses backend for authentication nowadays, wtf?
Hi, you can watch my full stack auth video. It has a separate back end
unfortunately next-auth 5.0 changed all their code.
@SakuraDev When I send message, it can be seen in Mailtrap Inbox, but activation link is not sent to actual Email id.
as I said you should register with your company email address in the mailtrap. with free email accounts like Gmail, we can just test the process. Although you can set SMTP Server with Gmail Server and send emails through your account.
@@SakuraDev Thanks
sakura thank you for this amazing tutorial but i have little bug when i try to load my env variable from .env it doesn't load it shows me this error "Error: Missing credentials for "PLAIN"" but it works well when i hard coded
it works when i hard code it like this
user: "myemail",
pass: "mypass",
but it doesn't work in this case
user: process.env.SMPT_EMAIL,
pass: process.env.SMTP_GMAIL_PASS,
to fix it try changing the "port" to 587