At the beginning I was really confused since the whole authentication thing is pretty advanced. But the more I watched the video, the more every previous step made sense to me. Thank you for this video, it helped me a lot!
@@SakuraDev So my guess is that it's gonna include some form of jwt token being assigned to a user on account creation. So it might also me a good idea to include stuff like password change (forgot password or when logged in) and email change since im guessing they will use similar logic
@@SakuraDev yes it's a good job. I would like to know if you can add verification features to this tutorial, it can interesting especially for me. Thanks 👏
I'm so happy to hear that you enjoyed the video! Thank you for your support and for taking the time to leave a comment. Your feedback is greatly appreciated and helps me to improve my content.🌷🌷🌷
this is the only tutorial that worked for me, very good job, personally would add custom login/register to the tutorial as it is pretty desirable, still thanks for the tutorial
I dont like on the videos and don't subscribe to channels just search for what I want but you deserve like and subscribe for making such a comprehensive video.
This is the best tutorial about Authentication with Next-Auth and Next.js 13 for 100% sure, your explanation is so clean! Thanks a lot for your valuable knowledge!
Awesome video! This is one of the most comprehensive videos I have seen on next-auth. One question I do have is about using the jwt. I understand that we can use jwt to protect the api routes. But instead of using jwt, can we simply use the session information? For example, I have an api route to delete a post, and i could get the session information from the getServerSession provided by next-auth and then get the current user id, and if this user id matches the user id of the post, then it will delete the post. If it doesn't match, then simply return an error. So I am just wondering if this would also be a viable approach to protect the api routes. Once again, great video and keep up the good work!
Hi, first of all, thanks for your nice feedback 🌹🙏🌹🌹. And about your question, yes you can use getServerSession to protect API. But with using JWT you can consume your API in other apps like mobile apps.
You are such a great teacher. Thank you, sir. Please when you can please create a video on Prisma and what will be the advantages of using Prisma for Mongodb over using Mongoose. Thank you
Great series of videos. It helped me a lot. My one suggestion is if the data needs to be restricted to the JWT user_id then probably that should be extracted from the verified JWT and used in the primsa where clause. Otherwise a valid token could get the data from any user /api/user/1, /api/user/2, etc
Thanks for great tutorial. More power to your channel. But I have a question, I saw that verifyJwt is used in the user/[id] route, is it possible to have like middleware to check or verify token? It seems like we will always put that code in every api endpoint's function?
hi, thanks for your nice feedback🌷🌷, middleware will redirect to to login page if user is not authenticated, so it is not good. but you can use getserverSession if you don't want to use jwt.
Is there a reason for you to not add the Bearer prefix? I mean, it works without it but I don‘t think that‘s best practice because the token type could vary in complex systems. Besides that, awesome video. I‘d love to see how to revoke or invalidate a JWT since this is the hatdest step in my opinion.
hi, no I just wanted to keep it simple but yeah the convention is that we should add Brearer prefix specially when we are using some libraries like Passport.js to do this job for us. By the way, thanks for your nice feedback 🌷
Great video! Thank you for the tutorial. I encountered an issue during the build process of the app. I had to return a NextResponse.json(...) instead of a Response(...) from the POST. I assume this is related to the types that Next is expecting. I would really like to hear your opinion on the new App directory architecture, specifically regarding functions called on the server side. What are the pros and cons of calling a function directly in the server component versus creating a GET/POST and fetching from it?
First thanks for your nice feedbacks. Well there is nothing wrong with calling feteching function directly on server components, but sometimes we need to fetch data in client components. in such use cases we can use APIs. Beside, With APIs we can feed other client apps such as mobile apps.
Hello, I think using Prisma with SQLite is fantastic. However, I wonder if taking the same course with MongoDB would be beneficial? Thank you for considering my request.
Your videos are awesome. Can you do me a simple favor i created a program but no matter what i do getServerSession don't gives me empty objects even loged in or not. How can I solve that?
You are amazing!!!! You solve my problem that how to protect api. However, I would like to know how to serverside auth instead of client side. Did you cover it in your playlist? Thank you so much!!!!!
Hi, I am really happy that my tutorial is useful for you.🌷🌷🌷. And about your question, its reading docs+research about the topic+github repo code examples+10 years of experience in coding. 🌷
the documentation still discourages Credentials provider but it's the only one able to auth using your own backend auth, very common in business applications
Good video thank you so much for this🎉, an alternative to return new Response is the NextResponse that already transform tha answer to json and includes all the needed headers for you :)
Thank you for the great tutorial! For me, one question stands out, and that is how would you implement password resets? Obviously there would need to be an API endpoint and the reset logic is straightforward, but how would you go about safely getting the user to that endpoint using the tools in this video? A reset link would be ideal, but how do you create such a link that takes a user to an appropriately protected page? I'm really hoping to be able to do this for a client, but at the moment I think I am going to have to stick to the email provider and the google provider. Thanks again!
Wow this is awesome. I tried to do the same after watching your previous videos. I took me several hours and I thinks it has some bugs cause doesn't work as I would like💀 I'm still struggling with uploading to Vercel. Please post videos about that.
Thank you for your comment! We're glad you enjoyed the video. Uploading to Vercel can be challenging, but I will consider making a video about it soon.
Hello, thank you very much for the great lecture. I'm not good at English, so I used Google Translate. Please understand if the translation is strange. Is the SessionProvider of next-auth a session obtained from the server? If I use jwt, I don't have to use session ?
hi, I am glad it was helpful for you. session provider is not from server. it just react context that allows you ti access session throght application. and jwt is one of two way of keeping session of next auth.
Hi your explaination is very clear and imp points are covered under it but its making bit confusion because you have uploaded separate videos for all authentication functionalities for nextjs. Why don't you make a complete single video which will contain all essential authentication and authorization methods such as next-auth, jwt api and client security using accessToken and refreshToken under it which will make us understand whole process in one go in single video. That will be really helpful as no content creator have uploaded video like this. Thank you!
@@SakuraDev Thanks for the reply. Please consider all points for proper prod level authentication and authorization for nextjs login registration and other data routes with next-auth and jwt tokens. Also please provide it with frontend connection. Thank you. Eagerly waiting for your this video.😇
I encountered a problem when using signIn method with credentials, the result of that method always status: 200 even when I don't find any user data. If I tried it with postman directly to my server (I use express server), it will return 404 when no user found. I did tried to reject promise, return null and throw an error with try catch in next-auth.tsx. Any suggestion about this?
Hi, Thanks 🙏, we can use getServerSession as well. But using JWT has on advantage and it is when we have other clients e.g. a mobile app. With JWT we can authenticate mobile user as well. It kinda more generic.
I really appreciate this nice video! For whom may get stack useSession() doesn't work in SigninButton function, which I got in my local, I had to use "status" as well. const { data: session, status } = useSession(); if (status === "loading") { return ( loading... ) } else if (session && session.user) { return (... ); }
nice video but i dont know if it is a correct question or not, if i go to the userpost do the headers automatically attach a token or do i need to copy and paste the access token to the postman? should be automatically attached whenever i go to any protected route. Can you please show a reference me how to do it?
I did not understand why you used the access token to protect the api routes instead of getServerSession although I learned how to insert additional data to the User and modify the Session type
Hi, you can use both. But access tokens can be issued to different types of clients, including web applications, mobile apps, and other third-party services, allowing for a flexible and versatile authentication mechanism.
This tutorial is very usefull. But, how to revalidate user data when I refresh the page? When I delete user from database and refresh the page, the session still exists. Hopefully you can help me
Hi. if your backend server is also on next.js you can call signout function from next-auth. but if your backend server is a sperate project, then you should set a low expiry time for jwt access token and then on refresh token API first you should check in your database if user existed or not. so if user is not existed (since you've delete the user) you send a 401 message as response of refresh token API to front end.
Thanks for sharing! It runs all fine in dev mode. There's an issue when I build the application. I'm wondering if it's because we call api in another api and it's not workable in prod? npm run build npm run start After I created an account, and login it shows up error "fetch failed" connect ECONNREFUSED ::1:3000
When I provide the data and click sign in it returns the error page and when I check the network I find error unexpected end of json endpoint even though I did exactly what you did. Can you help me, please ? When I test the API in Postman it works right.
Hi, getserversession is used in server components and api routes. in client components we can use session provider and useSession which is more straightforward
I think you made a mistake, take a look from the official doc: "Previously, API Routes could have been used for use cases like handling form submissions. Route Handlers are likely not the solution for these uses cases. We will be recommending the use of mutations for this when ready."
@@SakuraDev The Login API its OK, because you are fetching data. But the User Register API part, following the docs, its not ok, because you are performing a mutation; you should use a Server Action instead.
One doubt I had. Wrapping the whole app inside a session provider which is a client component, won't make whole application to be client side rendered? if yes. what's the solution for this?
@@SakuraDev Thanks a lot man if you can use an external api i have many problem with this approch cookies sendeed in next js but not saved in browser. if you can show as you external api in the new video
why not add api/user/path* to middleware? What's the point of having jwt guard here? It doesn't matter if it's 1 or 200 user route since they all should be protected equally
Firstly, I wanted to show how you can create a JWT and validate it. Second, If you have a third app that consume your APIs, like a mobile App, You should protect your APIs with JWT.
Thanks for your efforts but i noticed one thing , i don't know if it is a normal behavior : When clicking SignIn Button and entering the email ans password and clicking "Sign in with Credentials Button" the app rerenders the sign in button again then it render Immediately the Sign Out Button with the user name next to it,
Solved it like that , because there is a status parameter whose loading state is causing the problem i mentioned: export default function Home() { const { data: session, status } = useSession(); if (status === "loading") { //Or you can return null here return Loading; } if (status === "authenticated") { return (
Signed in as {session.user.email} signOut()}>Sign Out
Do you know you can get the user session through a server side method ? Then you can wrap your layout with this server component : getServerSession ! Thanks to this, you can make directly Prisma request instead of fetching an API in the case of client side, like you did.
For some reason, following along and I'm getting a error 500 for my user api endpoint, even though, I have all the attritbutes in the prisma schema file. Although my login endpoint works fine and returns null so far when I put a "wrong" user info in. Any suggestions? Been struggling with it all day
@@SakuraDev the same way you used your software for api endpoint testing I did with postman. But on VSCOde it was saying it was was an error with the bcrypt
Hi, I have some doubts about using next-auth, what if i want to have an external api? I dont see a way of making the authorization for that external api routes using the jwt generated in the client-server in a simple wa ,maybe sending the user and checking if exist in the db in a middleware in the node external server but i dont think is a good practice, is there any way of generating the jwt on the external api and refresh it and keep using next auth? I ask this bc in the future I dont know if i will have a mobile app, and leave all api responsabilities to next.js doesnt seem to be that good ?
hello thank you for this guide ! is there easy way how to send token in header via axios, or should i call in component useSession than get token and send it as header ? ..you showed it via postman but not in real call
Can you make a video that handles complete auth process with different providers (email+ google) with next,prisma,supabase(postgre)/planetscale?@@SakuraDev
@@SakuraDev would I be able to contact you with some assistance on using the next-auth-sanity plugin? it seems easy to setup but I keep running into issues.
Thank you so much for your kind words! I'm thrilled to hear that you enjoy my content and find it valuable. I appreciate your support and hope to continue creating content that you'll love. 🌷🌷🌷
Hi, I have those error when I deploy to Vercel “"Type error: Route "app/api/auth/[...nextauth]/route.ts" does not match the required types of a Next.js Route." . Everything works fine locally but when deploy to vercel it cause this error during build time. Do u experience this? And to solve it? Thx 🙏
The best next auth tutorial we can find on youtube. The video has more content apart of only next-auth which is briliant in such a short video.
Thanks🌷🌷 your really nice comment gives me energy to move forward.
At the beginning I was really confused since the whole authentication thing is pretty advanced. But the more I watched the video, the more every previous step made sense to me. Thank you for this video, it helped me a lot!
Thanks 😊 . I am really happy that it helps you ☺️
@@SakuraDev btw do you think you can create a video about email confirmation after registration? Either with a link or a code?
@@GameDSS Good idea, I will work on it.
@@SakuraDev So my guess is that it's gonna include some form of jwt token being assigned to a user on account creation. So it might also me a good idea to include stuff like password change (forgot password or when logged in) and email change since im guessing they will use similar logic
Probably the best tutorial about Next-Auth. Thank you for your work.
Thanks. I am really glad you think so.
I just realized your name is vahid
دمت گرم وحید خیلی عالی بود
Mamnoon🌷
Honestly I've been looking for such a video. It's just an explicite and clean job. Thanks Bro. Keep it up 👏
Thanks for your positive feedback. It really encourges me. Thanks 🌷🌷🌷
@@SakuraDev yes it's a good job. I would like to know if you can add verification features to this tutorial, it can interesting especially for me. Thanks 👏
Such a simple, clean and down-to-earth explanation! Great video, thanks man.
I'm so happy to hear that you enjoyed the video! Thank you for your support and for taking the time to leave a comment. Your feedback is greatly appreciated and helps me to improve my content.🌷🌷🌷
Its an awesome tutorial. Would you consider making one where the sign in component is customizable?
@@somerandomchannel382 thanks for your nice feedback. have you seen "custom login page"?: ua-cam.com/video/hADeo48SATU/v-deo.html
this is the only tutorial that worked for me, very good job, personally would add custom login/register to the tutorial as it is pretty desirable, still thanks for the tutorial
Thanks 👍 I am working on the topics you mentioned
Thank you for taking the time to share the knowledge. I have a firmer understanding of next-auth
Glad you found it useful 🙏🌹
I dont like on the videos and don't subscribe to channels just search for what I want but you deserve like and subscribe for making such a comprehensive video.
Hi, your nice comment really gives me energy to move forward. Thanks for support🌷🌷🌷🌷
This is the best tutorial about Authentication with Next-Auth and Next.js 13 for 100% sure, your explanation is so clean!
Thanks a lot for your valuable knowledge!
Dude, that is the best nextjs tutorial, thanks from Brazil
Thanks for your nice feedback 🌹
Amazing. Liked and subbed. I wish there was more explanation about callbacks in nextauth options.
Hi welcome to my channel and in the upcoming videos I am going to explain more about the callbacks .
@@SakuraDevThank you. I appreciate it.
Hi, Very clear explanation ! Thanks! And waiting for Prisma tutorial ;)
hi, thanks 🌷🌷. working on it
Thanks for the video, it helps me a lot. A suggestion that jwt token verification would be put in middleware
Thanks 🙏 and yes that'd be better.🌹
thx i was searching for such inofmative and folder structured video in nextauth
Thank you! This video helped me deal with Next Auth in Next 13... really good and to the point explanation.
Thanks. Your nice feedback encourages me to move forward. 🙏🙏🌹
Thank you so much. Just one question, why don't you use the Prisma adapter!? Thanks
Hi, just wanted to show what is going on in low level.
@@SakuraDev wow that's great ! Thanks again 🙏
@@thebeep4427 Thanks 🌹👋
I'm so glad that I found this amazing channel!
Thank you so much for your kind words! I'm thrilled to hear that you find my channel to be amazing. 🌷🌷🌷🌷
Awesome video! This is one of the most comprehensive videos I have seen on next-auth. One question I do have is about using the jwt. I understand that we can use jwt to protect the api routes. But instead of using jwt, can we simply use the session information? For example, I have an api route to delete a post, and i could get the session information from the getServerSession provided by next-auth and then get the current user id, and if this user id matches the user id of the post, then it will delete the post. If it doesn't match, then simply return an error. So I am just wondering if this would also be a viable approach to protect the api routes.
Once again, great video and keep up the good work!
Hi, first of all, thanks for your nice feedback 🌹🙏🌹🌹. And about your question, yes you can use getServerSession to protect API. But with using JWT you can consume your API in other apps like mobile apps.
Could you make a video about new server actions in nextjs 13.4?
Would really love to see this!
Sakura you definitely explained it in the best way possible. Thank you for the service! Like for the vid.
Thanks for your support
You are such a great teacher. Thank you, sir. Please when you can please create a video on Prisma and what will be the advantages of using Prisma for Mongodb over using Mongoose. Thank you
Thanks a lot for your nice feedback 😊😊🙏🌹. I will create a comparison video about Prisma and mongoose for mongoDB .
Great series of videos. It helped me a lot. My one suggestion is if the data needs to be restricted to the JWT user_id then probably that should be extracted from the verified JWT and used in the primsa where clause. Otherwise a valid token could get the data from any user /api/user/1, /api/user/2, etc
Thanks for great tutorial. More power to your channel. But I have a question, I saw that verifyJwt is used in the user/[id] route, is it possible to have like middleware to check or verify token? It seems like we will always put that code in every api endpoint's function?
hi, thanks for your nice feedback🌷🌷, middleware will redirect to to login page if user is not authenticated, so it is not good. but you can use getserverSession if you don't want to use jwt.
One of the helpful video ever I sea............... Thanks ❤❤❤❤
Wow, Thanks for your nice word...🙏🙏🙏🙏🌹🌹🌹😃
THANK U SO MUCH FOR THIS SIMPLE TUTORIAL
i will subscribe you, have a nice day
Thanks for the sub!
Thanks for the video :) Keep it up.
Thanks for your support
Great easy to follow tutorial.
Thanks for your nice comment.
If you like this tutorial, please consider subscribing. 🌷🌷
This tutorial is great and easy to understand. Thanks man!
Thanks for your nice feedback. I am very happy it was helpful for you.🌷🌷
Great video. Just one note on the section about creating the login API... the function name should be "POST" not "Post".
Oh, Thanks for bringing that to my attention, I will fix it in the repo
Is there a reason for you to not add the Bearer prefix? I mean, it works without it but I don‘t think that‘s best practice because the token type could vary in complex systems. Besides that, awesome video. I‘d love to see how to revoke or invalidate a JWT since this is the hatdest step in my opinion.
hi, no I just wanted to keep it simple but yeah the convention is that we should add Brearer prefix specially when we are using some libraries like Passport.js to do this job for us. By the way, thanks for your nice feedback 🌷
Great video! Thank you for the tutorial.
I encountered an issue during the build process of the app. I had to return a NextResponse.json(...) instead of a Response(...) from the POST. I assume this is related to the types that Next is expecting.
I would really like to hear your opinion on the new App directory architecture, specifically regarding functions called on the server side. What are the pros and cons of calling a function directly in the server component versus creating a GET/POST and fetching from it?
First thanks for your nice feedbacks. Well there is nothing wrong with calling feteching function directly on server components, but sometimes we need to fetch data in client components. in such use cases we can use APIs. Beside, With APIs we can feed other client apps such as mobile apps.
@@SakuraDev Makes sense! Thank you!
Hello, I think using Prisma with SQLite is fantastic. However, I wonder if taking the same course with MongoDB would be beneficial? Thank you for considering my request.
Yeah that would be nice, thanks for bringing that to my attention.
Thank you this tutorial. Could you do a vid on how to handle pagination with prisma? Also how to implement it in the FE.
Your videos are awesome. Can you do me a simple favor i created a program but no matter what i do getServerSession don't gives me empty objects even loged in or not. How can I solve that?
You are a legend my friend, great video!
Thanks for your very nice feedback 🌹.❤️🙏
The best, some sneaky stuff but those were so clever.
Thanks for your feedback 🌹🙏
what a lifesaver tutorial. Thank you
Thanks 🙏,I am glad it was helpful for you 🌹🌹
Hello!! Excelent video!I'm having trouble typing the callback functions, how do you type the jwt and the session? just using any got me into trouble
thanks you , your video help me on my deadline
Really glad it was helpful for you 🌹🌹
You are amazing!!!! You solve my problem that how to protect api. However, I would like to know how to serverside auth instead of client side. Did you cover it in your playlist? Thank you so much!!!!!
Hi, Thanks 🙏. Do you mean auth in a sperate backend server?
I mean using userServerSession.
But I tried it. Thank you
Hello big fan of you! I wanted to know how do you know this massive information by reading the documentation? or other? thankyou
Hi, I am really happy that my tutorial is useful for you.🌷🌷🌷. And about your question, its reading docs+research about the topic+github repo code examples+10 years of experience in coding. 🌷
i didn't see yet the full video but thank you
the documentation still discourages Credentials provider but it's the only one able to auth using your own backend auth, very common in business applications
Yes, you are right. We can also turn other provider to username and pass . In my upcoming videos, I will talk about that.
Good video thank you so much for this🎉, an alternative to return new Response is the NextResponse that already transform tha answer to json and includes all the needed headers for you :)
Nice tip. Thanks for bringing that to my attention 👍
Great tutorial!
Thanks 👍🌹
finally thank you for the tutorial sir, you very very help us to learn using jwt
Simply sensational and very useful. Thanks!
Thanks 😊🌹🙏
This tutorial is really a life saver. Thank you very much!
Thanks 🙏.I am glad it was helpful for you 🌹
Thank you for the great tutorial! For me, one question stands out, and that is how would you implement password resets? Obviously there would need to be an API endpoint and the reset logic is straightforward, but how would you go about safely getting the user to that endpoint using the tools in this video? A reset link would be ideal, but how do you create such a link that takes a user to an appropriately protected page? I'm really hoping to be able to do this for a client, but at the moment I think I am going to have to stick to the email provider and the google provider. Thanks again!
Hi, i was thinking about a prisma crash course, i think it is a great db for developers...
Hi, yes prisma is great and actually
I have complete course for prisma: ua-cam.com/video/yW6HnMUAWNU/v-deo.html
Wow this is awesome. I tried to do the same after watching your previous videos. I took me several hours and I thinks it has some bugs cause doesn't work as I would like💀
I'm still struggling with uploading to Vercel. Please post videos about that.
Thank you for your comment! We're glad you enjoyed the video. Uploading to Vercel can be challenging, but I will consider making a video about it soon.
Hello, thank you very much for the great lecture.
I'm not good at English, so I used Google Translate.
Please understand if the translation is strange.
Is the SessionProvider of next-auth a session obtained from the server?
If I use jwt, I don't have to use session ?
hi, I am glad it was helpful for you.
session provider is not from server. it just react context that allows you ti access session throght application.
and jwt is one of two way of keeping session of next auth.
@@SakuraDev Thank you very much for your reply.
Good lecture I really enjoy watching.
Thanks to you, the program is more fun.
thank you
@@bongjames2222 🙏🙏🌹
very well explained, thanks 🙏
Thanks 🙏🙏🙏
Hi your explaination is very clear and imp points are covered under it but its making bit confusion because you have uploaded separate videos for all authentication functionalities for nextjs. Why don't you make a complete single video which will contain all essential authentication and authorization methods such as next-auth, jwt api and client security using accessToken and refreshToken under it which will make us understand whole process in one go in single video. That will be really helpful as no content creator have uploaded video like this. Thank you!
well, I think thats a good idea. so I will go for it.
@@SakuraDev Thanks for the reply. Please consider all points for proper prod level authentication and authorization for nextjs login registration and other data routes with next-auth and jwt tokens. Also please provide it with frontend connection.
Thank you. Eagerly waiting for your this video.😇
@@WM-fz5si ok .
I encountered a problem when using signIn method with credentials, the result of that method always status: 200 even when I don't find any user data. If I tried it with postman directly to my server (I use express server), it will return 404 when no user found. I did tried to reject promise, return null and throw an error with try catch in next-auth.tsx. Any suggestion about this?
Hi. I'm wondering why you did not use Prisma Adapter ? it supplies authentication and authorization based on role ! it's easier then.
Mybe in next video 😁
I just learned it's useful to link Google Provider (and cie) to our database, is it right ?
@@mediacreatif Yes if you want to keep track of your users, you should do that.
@@SakuraDev do you confirm that credentials provider is not concerned?
@@mediacreatif I'm not sured i got your meaning, what do you mean by "not concerned"?
Any reason you don't use get server session? That handles all the verification of jwt. Great video though!
Hi, Thanks 🙏, we can use getServerSession as well. But using JWT has on advantage and it is when we have other clients e.g. a mobile app. With JWT we can authenticate mobile user as well. It kinda more generic.
@@SakuraDev makes sense, thank you
I really appreciate this nice video!
For whom may get stack useSession() doesn't work in SigninButton function, which I got in my local,
I had to use "status" as well.
const { data: session, status } = useSession();
if (status === "loading") {
return (
loading...
)
} else if (session && session.user) {
return (...
);
}
Thanks nice feedback, also thanks for your nice tip.
Top! Thank you very much!
Thanks🌹
nice video but i dont know if it is a correct question or not, if i go to the userpost do the headers automatically attach a token or do i need to copy and paste the access token to the postman? should be automatically attached whenever i go to any protected route. Can you please show a reference me how to do it?
I did not understand why you used the access token to protect the api routes instead of getServerSession although I learned how to insert additional data to the User and modify the Session type
Hi, you can use both. But access tokens can be issued to different types of clients, including web applications, mobile apps, and other third-party services, allowing for a flexible and versatile authentication mechanism.
I can't access the password property for user @13:30. Is there any solution to that ? Or did i miss something ?
we exclude the password from usee object.
Pls make a video of upload this project to vercel.
I used prisma and sqlite and having problem in vercel build but works well locally
what kind of error you got?
@@SakuraDev file not found. Location to database.
If you make a video it will be very helpful
BTW. Thanks for great content
@@mohdsajidshaikh4291 oh, I am really sorry, I sent you another video.
This is the right video 📷: ua-cam.com/video/khNwrFJ-Xqs/v-deo.html
Well done, brother !! Tks a lot 🎉
Thank you too! ❤️
This tutorial is very usefull. But, how to revalidate user data when I refresh the page? When I delete user from database and refresh the page, the session still exists.
Hopefully you can help me
Hi. if your backend server is also on next.js you can call signout function from next-auth. but if your backend server is a sperate project, then you should set a low expiry time for jwt access token and then on refresh token API first you should check in your database if user existed or not. so if user is not existed (since you've delete the user) you send a 401 message as response of refresh token API to front end.
@@SakuraDev thankyou bro
Thanks for sharing! It runs all fine in dev mode.
There's an issue when I build the application.
I'm wondering if it's because we call api in another api and it's not workable in prod?
npm run build
npm run start
After I created an account, and login it shows up error "fetch failed"
connect ECONNREFUSED ::1:3000
How to deploy this project on vercel and cpanel? Please make and upload project deploy video?
I will make a video about it.
Any thoughts on a forgot/reset password feature?
Actually I am planning to create a vudeo about it very soon
I haven't used nextauth in awhile but why did you create a new login api route and not just call prisma in the authorize function?
Very useful. Thank you!
Glad it was helpful!
When I provide the data and click sign in it returns the error page and when I check the network I find error unexpected end of json endpoint even though I did exactly what you did. Can you help me, please ? When I test the API in Postman it works right.
Thank you very much !!! SIMPLY SUPER !!!
Thsnks for your nice feedback.🌷
nice job bro
Thanks
What are the difference between sessionprovider vs getserversession? I can still get session from getserversession
Hi, getserversession is used in server components and api routes. in client components we can use session provider and useSession which is more straightforward
I think you made a mistake, take a look from the official doc:
"Previously, API Routes could have been used for use cases like handling form submissions. Route Handlers are likely not the solution for these uses cases. We will be recommending the use of mutations for this when ready."
Hi, do you mean that we shouldn't use API routes to create Login end point ?
@@SakuraDev The Login API its OK, because you are fetching data. But the User Register API part, following the docs, its not ok, because you are performing a mutation; you should use a Server Action instead.
Very helpful bro
Thanks for your nice feedback 🌹🌹🙏
One doubt I had.
Wrapping the whole app inside a session provider which is a client component, won't make whole application to be client side rendered? if yes. what's the solution for this?
Nice question. The answer is No! You can have a Server Component wrapped inside Client component.
can make video to use startigy of database and send token with cookies and check if exist in database
Yes, This is exactly the topic of my next video
@@SakuraDev Thanks a lot man
if you can use an external api
i have many problem with this approch cookies sendeed in next js but not saved in browser.
if you can show as you external api in the new video
@@ahmedakermi Hi, In this video, I have used an external API for keep track of users: ua-cam.com/video/cDWytA0V2kI/v-deo.html
shouldn't we disconnect to prisma in the "api" folder methods after finishing the DB queries ?
since we have one global instance of Prisma, we don't need to disconnect it. Welcome to my channel BTW 🌷
How to implement register using next-auth . I did not see this in video.
Hi, I will create a vid about it
thanks, very nice and good video🤗
Thanks 🙏, I am really glad you like it
why not add api/user/path* to middleware? What's the point of having jwt guard here? It doesn't matter if it's 1 or 200 user route since they all should be protected equally
Well, actually i wasn't complaining or criticizing you, i really want to understand, what was the reason? Have i missed something?
Firstly, I wanted to show how you can create a JWT and validate it. Second, If you have a third app that consume your APIs, like a mobile App, You should protect your APIs with JWT.
At 12:26 why can’t you just query from the database directly in the async authorize function?
We can. But I wanted to show you what would happen if we had a separate backend.
Thanks for your efforts but i noticed one thing , i don't know if it is a normal behavior : When clicking SignIn Button and entering the email ans password and clicking "Sign in with Credentials Button" the app rerenders the sign in button again then it render Immediately the Sign Out Button with the user name next to it,
Solved it like that , because there is a status parameter whose loading state is causing the problem i mentioned:
export default function Home() {
const { data: session, status } = useSession();
if (status === "loading") {
//Or you can return null here
return Loading;
}
if (status === "authenticated") {
return (
Signed in as {session.user.email}
signOut()}>Sign Out
);
}
return Sign in;
}
Do you know you can get the user session through a server side method ? Then you can wrap your layout with this server component : getServerSession ! Thanks to this, you can make directly Prisma request instead of fetching an API in the case of client side, like you did.
Yes we can!
@@SakuraDev it's an easier way ?
@@mediacreatif well it depends, but the rule is as far as you can, send all processes to the server.
@@SakuraDev that's why some say Next is becoming like PHP lol
For some reason, following along and I'm getting a error 500 for my user api endpoint, even though, I have all the attritbutes in the prisma schema file. Although my login endpoint works fine and returns null so far when I put a "wrong" user info in. Any suggestions? Been struggling with it all day
Hi, what is the error. 500 is internal server error, so you can find error message on vscode terminal.
@@SakuraDev the same way you used your software for api endpoint testing I did with postman. But on VSCOde it was saying it was was an error with the bcrypt
any suggestions? I still havent figured it out@@SakuraDev
@@hunggarchristian well, have you set the key for bcrypt encryption in your .env file?
@@SakuraDev no, I havent seen that in the tutorial yet. Which variable is it in the env file?
Hi, I have some doubts about using next-auth, what if i want to have an external api? I dont see a way of making the authorization for that external api routes using the jwt generated in the client-server in a simple wa ,maybe sending the user and checking if exist in the db in a middleware in the node external server but i dont think is a good practice, is there any way of generating the jwt on the external api and refresh it and keep using next auth? I ask this bc in the future I dont know if i will have a mobile app, and leave all api responsabilities to next.js doesnt seem to be that good ?
Hi, thanks for your nice question.
In this video I have used an external API : ua-cam.com/video/fYObrr3jf0w/v-deo.html
@@SakuraDev nice!!!! Am glad you are able of making content of it!
@@jesustzinon Thanks🌹👍
Will this work for other database types like postsql?
yes, why not?
@@SakuraDevok thanks also it will be appreciated if you make a updated video using server action
Also you got +1 subscribe
hello thank you for this guide ! is there easy way how to send token in header via axios, or should i call in component useSession than get token and send it as header ? ..you showed it via postman but not in real call
hi, you can do it automatically. you can use the approach I used in this video: ua-cam.com/video/RPl0r-Yl6pU/v-deo.html&lc=UgwO6GcXLkBpxPjl7et4AaABAg
when authenticating using jwt and google authentication how can we tell whether its the same user?
You should keep track of jwts in a database
Can you make a video that handles complete auth process with different providers (email+ google) with next,prisma,supabase(postgre)/planetscale?@@SakuraDev
Thanks, i cloned the repo by couldn't make it work, for some reason it doesn't call the authorize function in the configuration provider.
is diferent if i not use typeScript, or i can follow the tutorial using Javascript?
You can use it. Just skip the types and interfaces.
Thanks. Do you know how to handle logout when the user close browser without press the logout button ?
I use Azure provider
Hi, use This:
window.addEventListener("beforeunload", (ev) =>
{
signOut();
});
any chance you could do a video like this with Sanity?
Hi, sure. It is on my list.
@@SakuraDev thats great! the documentation from Sanity is really hard to follow.
@@SakuraDev would I be able to contact you with some assistance on using the next-auth-sanity plugin? it seems easy to setup but I keep running into issues.
Bro you are the best!
Thank you so much for your kind words! I'm thrilled to hear that you enjoy my content and find it valuable. I appreciate your support and hope to continue creating content that you'll love. 🌷🌷🌷
any chance to add all users to a mysql db?
I'm not sure I got what you mean exaclly, but if wanna insert all users from an other source you can do it with a sql script
Can we use phone number authentication with next auth?
yes we can, but we need some sms service to send a verification message to users
did you made a video to store the next session in database ? some users deactivate cookies in their navigator !
we can do that with adapter. I recently created a video for saving session in supabase database.
@@SakuraDev do you have the link pleaee ?
@@mediacreatif
this is the link 🌹
ua-cam.com/video/ogrnOefwGnA/v-deo.html
Hi, I have those error when I deploy to Vercel “"Type error: Route "app/api/auth/[...nextauth]/route.ts" does not match the required types of a Next.js Route." . Everything works fine locally but when deploy to vercel it cause this error during build time. Do u experience this? And to solve it? Thx 🙏
build time error fixed but still give no secret error