next auth is discouraging the use of credentials due to the inherint security risk. Imo who the frick wants to log in with email and password anyways and then confirm - when i can let google / github / discord handle that? If an app does not offer SSO chances are people just dont try them
@@dinoDonga sure, personally I use auth0 for everything because I can't be bothered to set up auth myself. but it doesn't mean knowing how to set it up isn't useful.
Finally someone making a simple yet completely efficient auth example; I watched and read 20+ tuts on this matter and all of them either cut corners or implemented the most obscure auth ever... Subscribed!
Finally at least something usefull. I don't want to use any "cloud" services. All tutorials anbout nextJS is only about "connecting" a lot of cloud services. In this video I see only postgres via Vercel - very nice. 8 cloudless NextJS points out of 10 Thanks!
This is the INSANE video i have ever seen. I was searching this tech stack and implementations for a week but, i couldnt find full of this on the same video. Thank you very very much you'r the best!!
Thank you for the video! I'm learning NextJs now but it's difficult to find clear tutorials with App Router. This is finally clear on the project structure and flow for NextAuth!👍
Immediately subscribed! This content is golden! 💎 Thank you so much for showing credentials setup with NextAuth. I really enjoy how well-structured your guides, and you also manage to add a human touch to them. Please, continue will this great content! 👍
Great Tutorial!, would be keen to an extension to this tut to add google sign in to same login page. Thanks for the hard work putting this tutorial together!
@@WebDevEducation Wait no way, I also live here in Indonesia (East Java, Malang). No wonder why you have that Suzuki Baleno car since that car is pretty popular here, and I guess I didn't notice the white and black license plate coloring format on the back of the car (0:08). Nice, keep up the good work!
If you're using App folder with newer Nextjs 14 you need to put the middleware.ts file inside src to be at the same level as app folder. Nextauth docs are worst than sheet, they don't even have documentation on their hooks nor sessionprovider, or something useful at all.
I have the same code as you at 31:43 but I keep getting an error in the authorize function where it says the type credentials Record is not assignable to a type and it goes like a waterfall of type errors. Does anyone know why this happens? I appreciate the responses
Same problem. I solved it by including if( user == null ) return null; before the const passwordCorrect and deleting a question mark in "user.password" in the compare function.
Hello. I used your guide, logging in/registering with next-auth is a new topic for me and I have a problem. Logging out doesn't work for me, i.e. sign-out with next-auth logs me out, but when I refresh the page in localstorage, a new session immediately appears, so I'm de facto logged in all the time, without the option of permanently logging out. Could you advise me something? I've been looking for documentation, etc., but I haven't yet found a reason why it keeps setting a session at startup, even without logging in.
Great TUT! I learned a shit-ton from this video! I appreciate you, Man! Quick question, at 37:50, regarding the 'router.refresh'. For some reason, I had to remove it because the page would not push back to the homepage. Was that deprecated? Again...thank you so much!
Great tutorial! How can i implement both Credentials and oAuth providers in Auth.js, but with my backend logic in NestJs? That is, store my users in DB, but only NestJs can read/write database?
Hello, I am developing the front-end of a project with Next.js, but the back-end of the project is in Django. I want to know if I can use NextAuth for authentication without causing any issues with the Django back-end? Also, could you advise me on whether I should store the token in a cookie or use NextAuth? Please guide me.
how did u manage to start a session using credentials login , i watched the video many time but i didn't find a way to createSession on login using credentials ,please explaine
Hello, excellent course, but I have a question. In the documentation, it says that I need to create the path "pages/api/auth/[...nextauth].js," but in the course, you do it like this: "pages/api/auth/[...nextauth]/route.ts." Is it the same, or what differs when doing it this way?
Both ways are correct, it just depends on if you're using the pages directory or app directory. With the app directory it should be app/api/auth/[...nextauth]/route.ts
@WebDevEducation At 23:51, won't the code be vulnerable to an SQL injection attack, as you are directly inputting the given values into the database without formatting?
Hello thank you for the great tutorial! I have a project with an Express.js backend and a Next.js frontend, does it make sense to use NextAuth in that case? If so how would you do it? Cheers
So I have implemented the logic of logging in, but after I try to login with the right credentials, my credentials aren't being logged unlike in the video. Instead I get an error in the console saying: "r is not a function", it redirects me to "/api/auth/error" and in the console of the browser it gives me this error: "ClientFetchError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data." or the error: "failed to fetch RSC for localhost:3000/auth/login (my login route). Anybody have any idea what I might be doing wrong? Someone had the same issue perhaps?
You're probably using an unstable beta version, downgrade next-auth instead to the latest stable one (4.24.7) by running "npm i next-auth@4.24.7" in your vs code terminal. This would fix the error message :)
I figured it out for the most part, except now the getSession (in v5 auth() ) returns null after a login and I don't understand why since the user in the authorize function is being logged in the console
you didnt show requests tho. so like when i send a request to backend that can only be sent by user which tokens do i send with it or how is it handled
No need to send any tokens to backend. To get logged in user from backend you can use getServerSession next-auth.js.org/configuration/nextjs#getserversession
thanks for the vid. curious, when I look inside session from getServerSession after logging in, it returns an object likeso: { user: { name: undefined, email: undefined, image: undefined } } why?
is it possible to store sessions in database? to be able to keep track of sessions and expire sessions manually
Год назад
You've got the explanation for client/server components wrong when creating the Registration page. Also, you're not seeing the console log during registration in your terminal because you moved the handler to the client component, so it's logged in the browser.
Also, the console logs I'm referring to the second time "we should see some console logs in our terminal" is the console log from the api endpoint, not the handlesubmit function. You're right tho, when I originally said we should see it in the terminal for handlesubmit, that's not the case and are indeed logged in the browser because it's within the client component.
Год назад
You're right@@WebDevEducation , I got confused at 16:56 because the error message in the browser states "Client Component", but by default it's a server component in Next.js 13.4
it actually works, I were facing issues with middleware just not working but then I tried moving middleware.ts to the root directory and it worked, before that it was at approot/app
Hello, thanks for the awesome content! Got one question though, given this setup, what would be the best way to handle making requests to a backend using the jwt-token in the header?
While the heart is awesome, answers would be even more appreciated. :) No pressure. I am genuinely wondering what the best setup for this is and some resources or something would be much appreciated. Thanks in advance, you deliver awesome content!
The route handlers in Next JS are the backend, and we can grab the session from getServerSession. You should be able to grab any headers you need from the route handler. If you're using a different backend then you'll probably need a different solution than next-auth as its next specific. With that said next-auth team have created authjs.dev/, (which I believe will be used instead of next-auth in the future) which provides more generic auth solutions for other frameworks and backends that may be more suited to your needs.
Tutorial yang sangat bagus, Tapi saya punya kendala untuk menampilkan pesan error dibrowser jika kata sandi yang dimasukan salah, saya menggunakan prisma di /api/auth/login dan saya sudah membuat Response.json({status: false, message: "Password is wrong."}), bagaimana caranya response tersebut ditampilkan pada browser? Terima kasih.
@@WebDevEducation Oh iya btw cara diatas kita tidak bisa mengatur custom message. async handleSubmit(...) { // Mencari pengguna const res = await fetch("/api/accounts/search?username="+username) const user = await res.json() if (res.ok && !user.found) { setMessage(user.message || "Nama pengguna tidak terdaftar.") } } Ini caraku sih buat mengatasi signIn() yang tidak bisa membuat custom message.
I would suggest adding an additional field in the user database. Upon registering the field defaults to loginApproved=false. You would need an admin page where the account could be approved and then change the loginApproved=true. Modify the SQL query in your authorize function to include a WHERE loginApproved = true.
I have issues as I have pages as root folder then inside I have _app.tsx and _document.tsx it is hard for me to manage the session and also use the navbar globally everywhere
This tutorial uses the app router. The setup is slightly different if you're using the pages router. If you check the next auth docs they have the differences in setup outline there 🙏
can you imagine I had the bugs for 2 weeks 😪 I was trying to use a session when the user was signed in or out but it was hard I found that I had to wrap the session provider in _app.tsx the useSession maybe next time better to give us the link who used different setup @@WebDevEducation
hashing client side doesn't really make anything more secure. to make it secure you need to be using https (which you should *always* be using in production), and so you can hash password server side before storing it. in next 13.5 and newer you can run https in development pretty easily as well.
Who thinks I should create a next-auth with github login next? 👀😆
Nah....how about a MySpace login. Lol.
😂
Facebook login
next auth is discouraging the use of credentials due to the inherint security risk. Imo who the frick wants to log in with email and password anyways and then confirm - when i can let google / github / discord handle that? If an app does not offer SSO chances are people just dont try them
@@dinoDonga sure, personally I use auth0 for everything because I can't be bothered to set up auth myself. but it doesn't mean knowing how to set it up isn't useful.
Finally someone making a simple yet completely efficient auth example; I watched and read 20+ tuts on this matter and all of them either cut corners or implemented the most obscure auth ever... Subscribed!
Finally at least something usefull. I don't want to use any "cloud" services. All tutorials anbout nextJS is only about "connecting" a lot of cloud services. In this video I see only postgres via Vercel - very nice.
8 cloudless NextJS points out of 10
Thanks!
FINALLY! I agree that everybody does not have these cloud services. user/pass is good, always has been. Thank you brother!
after 2 days of searching, landed on the right video with minimal design and accurate explanation.
thanks.
This is the INSANE video i have ever seen. I was searching this tech stack and implementations for a week but, i couldnt find full of this on the same video. Thank you very very much you'r the best!!
Finally, someone with brains. Thanks for this tutorial
Haha you're welcome 🙏
Thank you for the video! I'm learning NextJs now but it's difficult to find clear tutorials with App Router. This is finally clear on the project structure and flow for NextAuth!👍
Immediately subscribed! This content is golden! 💎
Thank you so much for showing credentials setup with NextAuth. I really enjoy how well-structured your guides, and you also manage to add a human touch to them. Please, continue will this great content! 👍
Until now, the best tutorial about nextauth credentials I found, helped a lot. Thanks for sharing. 👌
Bless your soul for this tutorial, came in clutch when no other documentation or tutorials made any of this clear. Cheers!
Great Tutorial!, would be keen to an extension to this tut to add google sign in to same login page. Thanks for the hard work putting this tutorial together!
Thanks a lot !
Had a hard time following, but 0.75x speed and lots of pause, it all went well :)
Programming while in a car turned off is wild. Insane that you didn't get hot while inside the car (still watching 3 mins in)
Haha the car was on, I live in Indonesia so would not have survived without the AC 😆
@@WebDevEducation Wait no way, I also live here in Indonesia (East Java, Malang). No wonder why you have that Suzuki Baleno car since that car is pretty popular here, and I guess I didn't notice the white and black license plate coloring format on the back of the car (0:08). Nice, keep up the good work!
Ahhh awesome! Yes I live in Bali :)
This is exactly what I was looking for. Thank you for helping with next-auth!
This video is amazing. Rewatching it for the 4th time
Mans here making tutorials from the car. Dedication.
😂
60sec, fully agree! They do it because its an easy tutorial and drives views, but lacks real world value imo...
You tut is so clear. Thanks man
Glad it helped! 🙏
This video saved today of work, really thank
If you're using App folder with newer Nextjs 14 you need to put the middleware.ts file inside src to be at the same level as app folder. Nextauth docs are worst than sheet, they don't even have documentation on their hooks nor sessionprovider, or something useful at all.
This is great, thank you... As a suggestion maybe go a little deeper and show a graphql implementation.
This was excellent thank you!!!
Your introduction just killed me. 'login with github' 😀.
😂
I have the same code as you at 31:43 but I keep getting an error in the authorize function where it says the type credentials Record is not assignable to a type and it goes like a waterfall of type errors. Does anyone know why this happens? I appreciate the responses
I have the same issue and need help
Same problem. I solved it by including
if( user == null )
return null;
before the const passwordCorrect and deleting a question mark in "user.password" in the compare function.
Intro just 🔥 🔥🔥🔥🔥
Great tutorial -- really helped me :)
Awesome! Glad it helped!
Hello. I used your guide, logging in/registering with next-auth is a new topic for me and I have a problem. Logging out doesn't work for me, i.e. sign-out with next-auth logs me out, but when I refresh the page in localstorage, a new session immediately appears, so I'm de facto logged in all the time, without the option of permanently logging out. Could you advise me something? I've been looking for documentation, etc., but I haven't yet found a reason why it keeps setting a session at startup, even without logging in.
Great TUT! I learned a shit-ton from this video! I appreciate you, Man!
Quick question, at 37:50, regarding the 'router.refresh'. For some reason, I had to remove it because the page would not push back to the homepage. Was that deprecated?
Again...thank you so much!
I understood everything (even with my broken English).
Great tutorial! How can i implement both Credentials and oAuth providers in Auth.js, but with my backend logic in NestJs? That is, store my users in DB, but only NestJs can read/write database?
OMG. what I am looking for, Thank you
awesome! seamlessly implemented it
It's really helpful for me thanks for this video I want to specify
Great video! Does getServerSession on a next page opt you out of ISR? I'm assuming it does but want to be sure
Hello, I am developing the front-end of a project with Next.js, but the back-end of the project is in Django. I want to know if I can use NextAuth for authentication without causing any issues with the Django back-end? Also, could you advise me on whether I should store the token in a cookie or use NextAuth? Please guide me.
Great tutorial but how do we send axios post request if the backend is separate from the front end and the api needs an authorization jwt token
Amazing brother! great content!
finallyyyyyyy, somebody that think properly has released a good tutorial😐😐
how did u manage to start a session using credentials login , i watched the video many time but i didn't find a way to createSession on login using credentials ,please explaine
that was refreshing! those github tutorials were infuriating! lol
This is the tutorial that im searchin for!
thank you so much 💖
You're welcome 😊
the middleware part is not working not restricting the dashboard page if logged out !!
when i test register the response show in client side not server side what happen about that?
Hello, excellent course, but I have a question. In the documentation, it says that I need to create the path "pages/api/auth/[...nextauth].js," but in the course, you do it like this: "pages/api/auth/[...nextauth]/route.ts." Is it the same, or what differs when doing it this way?
Both ways are correct, it just depends on if you're using the pages directory or app directory. With the app directory it should be app/api/auth/[...nextauth]/route.ts
@@WebDevEducation Thank you very much for the response
thank for the help @@WebDevEducation
Thank you! amazing tutorial!
"who the freak is logging in to the application using github" killed me 🤣
hello, thanks for the great video. Can you show us how to reset password works?
It's something I've been thinking of doing for a while but just haven't had the time yet. Hopefully soon 🙏
yeah, this dude is make sense
im subscribe
@WebDevEducation At 23:51, won't the code be vulnerable to an SQL injection attack, as you are directly inputting the given values into the database without formatting?
Nope. Check the docs:
vercel.com/docs/storage/vercel-postgres/sdk#preventing-sql-injections
intro 10/10
Great vid. For the next vid, maybe an online payment for next jd.
nah for real youre goated
Man, you are funny. I like your video. Thanks though, it's helpful.
Hello thank you for the great tutorial! I have a project with an Express.js backend and a Next.js frontend, does it make sense to use NextAuth in that case? If so how would you do it? Cheers
I would assume it's possible but I've never tried to hook up next auth with express so I'm not sure.
Thanks man, really thanks.
How to get rid of the callback url that appears in the browser url. I just want to display /login without /login?callbacksUrl=...
So I have implemented the logic of logging in, but after I try to login with the right credentials, my credentials aren't being logged unlike in the video. Instead I get an error in the console saying: "r is not a function", it redirects me to "/api/auth/error" and in the console of the browser it gives me this error: "ClientFetchError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data." or the error: "failed to fetch RSC for localhost:3000/auth/login (my login route).
Anybody have any idea what I might be doing wrong? Someone had the same issue perhaps?
You're probably using an unstable beta version, downgrade next-auth instead to the latest stable one (4.24.7) by running "npm i next-auth@4.24.7" in your vs code terminal. This would fix the error message :)
I figured it out for the most part, except now the getSession (in v5 auth() ) returns null after a login and I don't understand why since the user in the authorize function is being logged in the console
Can you create this video using NextJS14, server actions, prisma with sqlserver - and credentials using email & password
What if I want to show the custom error coming from the backend instead of just the credentialsSignin error
you didnt show requests tho. so like when i send a request to backend that can only be sent by user which tokens do i send with it or how is it handled
No need to send any tokens to backend. To get logged in user from backend you can use getServerSession
next-auth.js.org/configuration/nextjs#getserversession
sir, what is the difference between this method and server action for handling login/register?
Hi from Singapore!
a quick question, will this work if signin and register are moved into server actions?
yes should do, in next-auth v5 this is indeed the method outlined in the docs, i.e. calling signIn via a server action.
How can this code be refactored if the backend is handled by a different server?
thanks for the vid. curious, when I look inside session from getServerSession after logging in, it returns an object likeso:
{ user: { name: undefined, email: undefined, image: undefined } }
why?
it might be because I forgot to pass the authOptions to the getServerSession:
next-auth.js.org/configuration/nextjs#in-app-router
잘 배우고 갑니다
next-auth 어려운거 아니었네
Absolutely love the mentality
is it possible to store sessions in database? to be able to keep track of sessions and expire sessions manually
You've got the explanation for client/server components wrong when creating the Registration page. Also, you're not seeing the console log during registration in your terminal because you moved the handler to the client component, so it's logged in the browser.
What did I get wrong?
Also, the console logs I'm referring to the second time "we should see some console logs in our terminal" is the console log from the api endpoint, not the handlesubmit function. You're right tho, when I originally said we should see it in the terminal for handlesubmit, that's not the case and are indeed logged in the browser because it's within the client component.
You're right@@WebDevEducation , I got confused at 16:56 because the error message in the browser states "Client Component", but by default it's a server component in Next.js 13.4
great video.. but the middleware is not working properly
it actually works, I were facing issues with middleware just not working but then I tried moving middleware.ts to the root directory and it worked, before that it was at approot/app
i love how simple next auth is but the error handling is just so trash
Hello, thanks for the awesome content! Got one question though, given this setup, what would be the best way to handle making requests to a backend using the jwt-token in the header?
While the heart is awesome, answers would be even more appreciated. :) No pressure. I am genuinely wondering what the best setup for this is and some resources or something would be much appreciated. Thanks in advance, you deliver awesome content!
The route handlers in Next JS are the backend, and we can grab the session from getServerSession. You should be able to grab any headers you need from the route handler. If you're using a different backend then you'll probably need a different solution than next-auth as its next specific. With that said next-auth team have created authjs.dev/, (which I believe will be used instead of next-auth in the future) which provides more generic auth solutions for other frameworks and backends that may be more suited to your needs.
I think you can just add the jwt token your auth provider gives you and use it as a bearer token in all your requests
Tutorial yang sangat bagus,
Tapi saya punya kendala untuk menampilkan pesan error dibrowser jika kata sandi yang dimasukan salah, saya menggunakan prisma di /api/auth/login dan saya sudah membuat Response.json({status: false, message: "Password is wrong."}), bagaimana caranya response tersebut ditampilkan pada browser?
Terima kasih.
Makasih kak 😊
Kalo mau tampilkan error bisa pake useState kayak ini (app/login/form.tsx):
const router = useRouter();
const [error, setError] = useState("");
const handleSubmit = async (e: FormEvent) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
const response = await signIn('credentials', {
email: formData.get('email'),
password: formData.get('password'),
redirect: false,
});
console.log({ response });
if (!response?.error) {
router.push('/');
router.refresh();
}else{
setError(response.error);
}
};
return (error ? {error} :
Login
);
@@WebDevEducation Terimakasih, tapi sudah solved kok dari kemarin-kemarin.
@@WebDevEducation Oh iya btw cara diatas kita tidak bisa mengatur custom message.
async handleSubmit(...) {
// Mencari pengguna
const res = await fetch("/api/accounts/search?username="+username)
const user = await res.json()
if (res.ok && !user.found) {
setMessage(user.message || "Nama pengguna tidak terdaftar.")
}
}
Ini caraku sih buat mengatasi signIn() yang tidak bisa membuat custom message.
Nice. Can you do a video on authentication using JWT and next auth using backend nestjs and frontend nextjs?
Unfortunately I've never used nest js so wouldn't know how to
does vercel/postgres work with local postgres?
Now how do I store the session in database and use it
Thank you!!! How would you add admin approval before users can login?
I would suggest adding an additional field in the user database. Upon registering the field defaults to loginApproved=false. You would need an admin page where the account could be approved and then change the loginApproved=true. Modify the SQL query in your authorize function to include a WHERE loginApproved = true.
Thank you!@@Chambrln
Very useful
I have issues as I have pages as root folder then inside I have _app.tsx and _document.tsx it is hard for me to manage the session and also use the navbar globally everywhere
This tutorial uses the app router. The setup is slightly different if you're using the pages router. If you check the next auth docs they have the differences in setup outline there 🙏
can you imagine I had the bugs for 2 weeks 😪 I was trying to use a session when the user was signed in or out but it was hard I found that I had to wrap the session provider in _app.tsx the useSession maybe next time better to give us the link who used different setup @@WebDevEducation
Nice video! What‘s the benefit of extracting the forms into their own client components leaving the register and login pages as server components?
You know what? I'm not actually sure why I did it that way 😆 I think the pages as client components would be a better approach in this example.
It's just a good practise, it allows to load page faster, in this example it's not much, but in page with more elements it will do diffrence
because of async
Subscribed!
🙏
Very useful post🔥🔥🔥
Glad it was helpful!
You are awesome
bro learning from a car:DDD
Note: using raw SQL code will make vunrable to SQL injection please use an orm or sanitize the user input
Please read the docs. This method isn't vulnerable to sql injection 🙏
vercel.com/docs/storage/vercel-postgres/sdk#preventing-sql-injections
thank you!
tysm!!!
create a video on Auth.js credentials
Watch this space 👀
Perfect
U r the best
thank you.
best best best
10/10
tysm
🙏
thanks
why do you fetch email and pass to your API at 21:00 without hashing them? wouldn't it be very insecure? just asking because I don't know how it works
hashing client side doesn't really make anything more secure. to make it secure you need to be using https (which you should *always* be using in production), and so you can hash password server side before storing it. in next 13.5 and newer you can run https in development pretty easily as well.
@@WebDevEducation https makes total sense. Thanks for the guide, it is great showcase of bare minimum that illustrates the principle
Was that intro even necessary?
I'm getting this error when using getServerSession():
./node_modules/next-auth/core/init.js:10:14
Module not found: Can't resolve 'crypto'
Any idea??