Next auth credentials - signup & login with email & password (Next JS app router)

[@WebDevEducation]

Who thinks I should create a next-auth with github login next? 👀😆

[@kamaboko1]

Nah....how about a MySpace login. Lol.

[@WebDevEducation]

😂

[@agneldominique352]

Facebook login

[@dinoDonga]

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

[@WebDevEducation]

@@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.

[@bandekhoda7801]

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!

[@osoznayka]

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!

[@hakanaki]

Finally, someone with brains. Thanks for this tutorial

[@WebDevEducation]

Haha you're welcome 🙏

[@hamzakhan-gn4ue]

after 2 days of searching, landed on the right video with minimal design and accurate explanation. thanks.

[@zb2747]

FINALLY! I agree that everybody does not have these cloud services. user/pass is good, always has been. Thank you brother!

[@tsykin]

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! 👍

[@gcfhornet]

Until now, the best tutorial about nextauth credentials I found, helped a lot. Thanks for sharing. 👌

[@marcinknara4147]

Bless your soul for this tutorial, came in clutch when no other documentation or tutorials made any of this clear. Cheers!

[@oguzhanercelik]

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!!

[@mattcrane5203]

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!

[@zarkarkas]

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!👍

[@BullsEye72]

Thanks a lot ! Had a hard time following, but 0.75x speed and lots of pause, it all went well :)

[@wandie87]

Mans here making tutorials from the car. Dedication.

[@WebDevEducation]

😂

[@alhajiahmed3782]

You tut is so clear. Thanks man

[@WebDevEducation]

Glad it helped! 🙏

[@uchennaofoma4624]

This video is amazing. Rewatching it for the 4th time

[@kamikazeslammer]

This is exactly what I was looking for. Thank you for helping with next-auth!

[@gurjotsinghpandher3908]

Great tutorial -- really helped me :)

[@WebDevEducation]

Awesome! Glad it helped!

[@Not_Aran8276]

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)

[@WebDevEducation]

Haha the car was on, I live in Indonesia so would not have survived without the AC 😆

[@Not_Aran8276]

@@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!

[@WebDevEducation]

Ahhh awesome! Yes I live in Bali :)

[@MrBassBD]

Intro just 🔥 🔥🔥🔥🔥

[@sandwidimohamed4914]

This video saved today of work, really thank

[@steveportock2177]

This was excellent thank you!!!

[@jdooweb]

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!

[@j7coder]

Amazing brother! great content!

[@armantgold]

60sec, fully agree! They do it because its an easy tutorial and drives views, but lacks real world value imo...

[@Alex.Shalda]

awesome! seamlessly implemented it

[@SreenathSreekrishna]

@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?

[@WebDevEducation]

Nope. Check the docs: vercel.com/docs/storage/vercel-postgres/sdk#preventing-sql-injections

[@webdeveloper2769]

OMG. what I am looking for, Thank you

[@Pulguetafx]

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

[@tharishaperera9345]

I have the same issue and need help

[@Holsp]

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.

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.

[@DiksiAhida]

This is the tutorial that im searchin for! thank you so much 💖

[@WebDevEducation]

You're welcome 😊

[@OlesyaSolovtsova]

Thank you! amazing tutorial!

[@naatr2668]

It's really helpful for me thanks for this video I want to specify

[@rambosweat]

that was refreshing! those github tutorials were infuriating! lol

[@TheBuddilla]

This is great, thank you... As a suggestion maybe go a little deeper and show a graphql implementation.

[@LoneDarkWarrior013]

yeah, this dude is make sense im subscribe

[@EtienneDev]

Your introduction just killed me. 'login with github' 😀.

[@WebDevEducation]

😂

[@benyamin4634]

finallyyyyyyy, somebody that think properly has released a good tutorial😐😐

[@JCDZK]

Great video! Does getServerSession on a next page opt you out of ISR? I'm assuming it does but want to be sure

[@facundocarreno8956]

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?

[@WebDevEducation]

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

[@facundocarreno8956]

@@WebDevEducation Thank you very much for the response

[@facundocarreno8956]

thank for the help @@WebDevEducation

[@HamzahAl-Hamadani]

nah for real youre goated

[@PhilippAlbrecht-c4e]

hello, thanks for the great video. Can you show us how to reset password works?

[@WebDevEducation]

It's something I've been thinking of doing for a while but just haven't had the time yet. Hopefully soon 🙏

[@ubucux]

I understood everything (even with my broken English).

[@Evaldo_Souza]

Thanks man, really thanks.

[@limhongchuan1031]

Hi from Singapore!

[@davidkorn5253]

intro 10/10

[@alemendieta3346]

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?

[@jrmayol857]

Great vid. For the next vid, maybe an online payment for next jd.

[@mzakysyukur3417]

when i test register the response show in client side not server side what happen about that?

[@60Ji5]

Subscribed!

[@WebDevEducation]

🙏

[@amanuelmekashaw8738]

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

[@saptooaji]

Man, you are funny. I like your video. Thanks though, it's helpful.

[@Robert-jt9yg]

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

[@WebDevEducation]

I would assume it's possible but I've never tried to hook up next auth with express so I'm not sure.

[@super..legend]

the middleware part is not working not restricting the dashboard page if logged out !!

[@BartoszJarzyo]

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.

[@Yasser-e2p]

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

[@MrStarba3]

a quick question, will this work if signin and register are moved into server actions?

[@WebDevEducation]

yes should do, in next-auth v5 this is indeed the method outlined in the docs, i.e. calling signIn via a server action.

[@HamzahAl-Hamadani]

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

[@WebDevEducation]

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

[@rezakhani8627]

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.

[@vbtux1]

Very useful post🔥🔥🔥

[@WebDevEducation]

Glad it was helpful!

[@radutarean9616]

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?

[@radutarean9616]

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!

[@WebDevEducation]

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.

[@JuanDavidPF]

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

[@jovanjevtic1620]

Absolutely love the mentality

[@aminsoraya]

Very useful

[@JuanMunoz-yt5ke]

is it possible to store sessions in database? to be able to keep track of sessions and expire sessions manually

[@ajml_hnter]

Now how do I store the session in database and use it

[@mikhacavin]

sir, what is the difference between this method and server action for handling login/register?

[@Thelukkest]

Nice video! What‘s the benefit of extracting the forms into their own client components leaving the register and login pages as server components?

[@WebDevEducation]

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.

[@HokagePain07]

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

[@antares-the-one]

because of async

[@mohammadutd2323]

Note: using raw SQL code will make vunrable to SQL injection please use an orm or sanitize the user input

[@WebDevEducation]

Please read the docs. This method isn't vulnerable to sql injection 🙏 vercel.com/docs/storage/vercel-postgres/sdk#preventing-sql-injections

[@dmsnm]

How can this code be refactored if the backend is handled by a different server?

[@yogyyconst]

does vercel/postgres work with local postgres?

[@interceptorghost1149]

"who the freak is logging in to the application using github" killed me 🤣

[@antares-the-one]

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

[@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.

[@antares-the-one]

@@WebDevEducation https makes total sense. Thanks for the guide, it is great showcase of bare minimum that illustrates the principle

[@aliyevruslan936]

You are awesome

[@zrzft]

Thank you!!! How would you add admin approval before users can login?

[@Chambrln]

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.

[@zrzft]

Thank you!@@Chambrln

[@idrisolamideganiyu1395]

What if I want to show the custom error coming from the backend instead of just the credentialsSignin error

[@ntwarioscar]

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

[@WebDevEducation]

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 🙏

[@ntwarioscar]

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

[@ilmifaizan1496]

How to get rid of the callback url that appears in the browser url. I just want to display /login without /login?callbacksUrl=...

[@UlambayarTsogbadrakh]

Nice. Can you do a video on authentication using JWT and next auth using backend nestjs and frontend nextjs?

[@WebDevEducation]

Unfortunately I've never used nest js so wouldn't know how to

[@philipjobran2716]

great video.. but the middleware is not working properly

[@pomiusu]

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

[@김인욱-u5q]

잘 배우고 갑니다 next-auth 어려운거 아니었네

[@dreker337]

U r the best

[@cjt9150]

Can you create this video using NextJS14, server actions, prisma with sqlserver - and credentials using email & password

[@raulremesalvanmerode4458]

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?

[@iammohcinefrikh]

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 :)

[@raulremesalvanmerode4458]

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'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.

[@WebDevEducation]

What did I get wrong?

[@WebDevEducation]

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

[@JonAngeloMacaldo]

thank you!

[@wjlee7003]

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?

[@WebDevEducation]

it might be because I forgot to pass the authOptions to the getServerSession: next-auth.js.org/configuration/nextjs#in-app-router

[@pomiusu]

tysm!!!

[@wadahkodeofficial5389]

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]

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 );

[@wadahkodeofficial5389]

@@WebDevEducation Terimakasih, tapi sudah solved kok dari kemarin-kemarin.

[@wadahkodeofficial5389]

@@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.

[@sowmocoding5740]

best best best

[@tomassabol59]

10/10

[@kakun7238]

i love how simple next auth is but the error handling is just so trash

[@navjotsingh2457]

tysm

[@WebDevEducation]

🙏

[@LOGFILEGDmegusta]

Perfect

[@radekvlk8474]

bro learning from a car:DDD

[@shoaibshaikh3651]

create a video on Auth.js credentials

[@WebDevEducation]

Watch this space 👀

[@oliverwolfson]

thank you.

[@vinodverma-cohunt-tech]

thanks

[@morgan24TH]

Was that intro even necessary?

[@hktang13]

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??