Next.js 13 Authentication: Custom Email/Password with NextAuth.js & MongoDB

Check out my courses: gtcoding.net/courses/
In this comprehensive tutorial you will learn how to add authentication to your Next.js 13 app with Email/Password using Next Auth. We will use MongoDB to store the details of the user. We will be using Tailwind CSS for designing the UI.
Source code: github.com/Godsont/auth-with-...
Timestamps:
-----------------------
00:00 - Demo
02:59 - Designing UI Using Tailwind CSS
16:41 - Creating the API
27:07 - MongoDB
42:48 - Authentication using Next Auth

Пікірлер: 167

  • @alokjoshi334
    @alokjoshi33410 ай бұрын

    Thanks a lot for the NextJS 13 videos and end to end projects with database functionality, very much appreciated! very simple and straightforward explanations. Keep up the good work.

  • @GTCoding

    @GTCoding

    10 ай бұрын

    Thank you :)

  • @chiderathankgodobed4496
    @chiderathankgodobed44966 ай бұрын

    fantastic piece on nextauth using app router, I have been having issues integrating next-auth, but your video has made lide easy , Thanks GT coding

  • @Dekorozi
    @Dekorozi10 ай бұрын

    Thank you for great Next JS videos. I watched your last NextJs videos. We learnt making contact page, crud and auth. Now I am waiting for a full project video like a blog website with mongodb :)

  • @MisbahuA
    @MisbahuA3 ай бұрын

    This is one of the best tutorials seen on Nextjs, mongoose and nextauth. Thank you good Sir, really appreciate your effort. Keep it up

  • @HimanshuKumar-rn1cn
    @HimanshuKumar-rn1cn8 ай бұрын

    this was the perfect video for my use case, I wanted to have a custom login and register form without using any google or github provider. Other videos have complex providers and if they implement only credentials, they didnt use database. This video was very helpful thanks

  • @Salah-YT
    @Salah-YT3 ай бұрын

    Thank you immensely! Your video provided the best tutorial I've ever come across. Your effort is highly appreciated. Wishing you a life filled with greatness. Thanks again!

  • @BadrudeenAbdul-hameed
    @BadrudeenAbdul-hameed6 ай бұрын

    This is reeeeally awesome and on point for my use case. I have been battling with authentication for 2 days now, and your video just saved a life. I can't thank you enough.

  • @vernevens1598

    @vernevens1598

    2 ай бұрын

    Only 2 days?

  • @JanBuilds
    @JanBuilds9 ай бұрын

    Thanks for the tutorial using javascript, not typescript! I have been looking for this for quite a while! :) 🙏🤓

  • @chiderathankgodobed4496
    @chiderathankgodobed44967 ай бұрын

    This is has to be the best tutorial i have seen in nextjs auth, thanks so much @GtCoding

  • @tomasburian6550
    @tomasburian65505 ай бұрын

    This works great with JS, but in the professional world we use TypeScript so we could use the tutorial that also includes types, Next Auth is quite difficult to type so maybe make a video in the future to include that.

  • @terry_swd
    @terry_swd3 ай бұрын

    Awesome tutorial! I would also add a little success message when user registration is successful in addition to clearing the form. Also it would be nice to reset any previous error state after a successful registration.

  • @parspy694
    @parspy6947 ай бұрын

    this is one of the best tutorial i've ever seen kudos to you sir

  • @GeorgeDonnelly
    @GeorgeDonnelly7 ай бұрын

    This was outstanding, thank you!

  • @leonardohurovich3381
    @leonardohurovich338110 ай бұрын

    Great video! Love it! Thank you sir

  • @joakuvideo
    @joakuvideo8 ай бұрын

    Impressive! I changed it a little bit for using prisma. :) thanks!

  • @amirhosseinqafari9747
    @amirhosseinqafari97476 ай бұрын

    Great, thanks for this solid tutorial.

  • @kbchannel83
    @kbchannel833 ай бұрын

    Thank You for this video, it's really helpful.

  • @raduscortescu6512
    @raduscortescu65127 ай бұрын

    Thanks, man! Simple great tutorial!

  • @codemelon2698
    @codemelon269810 ай бұрын

    this video is awesome keep up the amazing work

  • @toltec1983
    @toltec19838 ай бұрын

    best tutorial on the subject on yt.

  • @leomeynard7671
    @leomeynard76716 ай бұрын

    Thank you, you explain it well.

  • @veggtips.shorts
    @veggtips.shorts8 ай бұрын

    Nice content! So helpful, i really appreciate...Thanksss!

  • @adelinaakylbekova308
    @adelinaakylbekova308Ай бұрын

    Thank you for this tutorial

  • @sravankumar8763
    @sravankumar87632 ай бұрын

    Very good video, want to spend time and have my custom auth . you saved me a lot of lot of time

  • @maskman4821
    @maskman48216 ай бұрын

    Great tutorial ❤

  • @Binod-km1xm
    @Binod-km1xm4 күн бұрын

    Really Amazing Teaching❤❤

  • @manzurajshahi
    @manzurajshahi10 ай бұрын

    I really needed this simple login using NextApp. Thank you for this beautiful tutorial. I request to you. Please add "Forget password" feature for this tutorial.😊

  • @patlagoon
    @patlagoon6 ай бұрын

    Thanks for this tutorial, it's really clear. I was struggling to understand authentication and this helped me tremendously. Could you do a follow up on this topic with "email validation" after registering and "forgot your email?" functionalities ?

  • @nguyenlehuuduy6272
    @nguyenlehuuduy62723 ай бұрын

    Thank you immensely!

  • @lembazaa7330
    @lembazaa73307 ай бұрын

    thanks a lot you are the besty one that explane this next auth thanks broo keep going 😃😁

  • @byronloarte
    @byronloarte10 ай бұрын

    Great video and more content about Next.JS please my dear friend 🙏

  • @GTCoding

    @GTCoding

    10 ай бұрын

    Sure 👍

  • @codigo6273
    @codigo62738 ай бұрын

    Thanks a lot for this video📌

  • @Nanashi-rq7lk
    @Nanashi-rq7lk10 ай бұрын

    Thanks tutorial. your viedo is good.

  • @tempuser9560
    @tempuser95609 ай бұрын

    Awesome explanation about Next JS 13 Authentication. Thanks a lot. Can you please make one video with mysql server instead of mongoose. and with image upload functionality. Thanks a lot in advance!

  • @sarbeswarsahoo8579
    @sarbeswarsahoo857910 ай бұрын

    Thanks a lot for the video

  • @zee_designs
    @zee_designs10 ай бұрын

    Straightforward approach 🦾

  • @hakanaki
    @hakanaki7 ай бұрын

    Thank you for this tutorial. Every other KZreadr is just doing login with Google SMH

  • @PauloRdeOFerraz
    @PauloRdeOFerraz6 ай бұрын

    Impressed with the quality, congratulations! A question regarding next-auth. Would it be possible to use the same database with registered users to create a login for another React Native application, for instance?

  • @surindersingh7799
    @surindersingh77996 ай бұрын

    great video :)

  • @MarcosFelipe-up9lc
    @MarcosFelipe-up9lc5 ай бұрын

    Thanks bro!!

  • @taukiralam414
    @taukiralam4148 ай бұрын

    Man you are the best ..

  • @mijeongwon2355
    @mijeongwon23558 ай бұрын

    Thanks a lot!

  • @Ruben-sc7dj
    @Ruben-sc7dj8 ай бұрын

    Thank you!:)

  • 9 ай бұрын

    Thank you soo much

  • @michellaurent1361
    @michellaurent13617 ай бұрын

    thanks you, perfect

  • @ManiSingh-gr7zi
    @ManiSingh-gr7zi3 ай бұрын

    Thank you.

  • @mrrafay2530
    @mrrafay25307 ай бұрын

    Good tutorial kindly also add role base authentication in this project

  • @joshjakkrit6085
    @joshjakkrit6085Күн бұрын

    37:00 You don't have to create extra api route (userExists). All you have to do is set email unique: true in the schema. And update the same api route (register). const existingUser = await User.findOne({ email }); if (existingUser) { return NextResponse.json( { message: "Email already in use." }, { status: 409 } // conflict status ); } The form will display the message if you have this when (res.ok) = false const data = await res.json(); setError(data.message)

  • @piodgamer4084
    @piodgamer408428 күн бұрын

    Thanks bro It's very good peace and love ^.^

  • @wayvroom
    @wayvroom7 ай бұрын

    Awesome tutorial my brother keep it up ❤

  • @ezequieloliveira222
    @ezequieloliveira2223 ай бұрын

    Muito bom bem explicado e simples, so achei esse e JS e não em Typscript

  • @testing-jr8tz
    @testing-jr8tz4 ай бұрын

    thanks man

  • @piotrrodzen772
    @piotrrodzen7729 ай бұрын

    great tutorial. Perhaps you could also add password system with JWT as I feel its much more secure in general

  • @judevector

    @judevector

    9 ай бұрын

    Jwt is not for password,bcrypt is . Jwt is for cookies , sessions and I think next-auth comes automatically with it , you can see he use jwt in that credentials there ,am thinking maybe that's how it's been used in NextJS unlike Nodejs

  • @Hasoon-ry8pu
    @Hasoon-ry8pu10 ай бұрын

    Thanks for this video. Will you make a complete blog that brings together all the concepts?

  • @GTCoding

    @GTCoding

    10 ай бұрын

    Sure.

  • @ProgrammerArif
    @ProgrammerArif10 ай бұрын

    Great!

  • @darshanathamara8546
    @darshanathamara85469 ай бұрын

    Thank You Very Much can you do video for file upload API ? and Role-based routing?

  • @razonspielt1851
    @razonspielt185110 ай бұрын

    So i have a question, if I would make the same as you. Can I host it on a webhoster like hostinger in a shared hosting? Or do I need a vps? I ask this because this is my first next js project with auth js.

  • @afzaalahmedtai8211
    @afzaalahmedtai82119 ай бұрын

    Thanks for amazing video but I didn't understand that why did you make another API to check user exist or not. Can we check while register user in register API?

  • @user-kx8gv2yk4v
    @user-kx8gv2yk4v9 ай бұрын

    Could you make a tutorial about how to use the jwt and cookie to store the user's login condition with nextjs and next-auth? Thank you very much

  • @A03L
    @A03L5 ай бұрын

    I just subscribed :) Great content, easy and simple explanation I have a question tho, how do I hide that callback query in the url, its really annoying ... thanks

  • @vsandhudeveloper3282
    @vsandhudeveloper328210 ай бұрын

    Can you please start an ecommerce series which include all concepts with mongo

  • @yellowsmurfz
    @yellowsmurfz10 ай бұрын

    Thank you for this helpful video, will you make a follow up tutorial for adding tokens in your requests to the api and logging out the user if the token expires?

  • @GTCoding

    @GTCoding

    10 ай бұрын

    Ok, I'll try.

  • @praiseoshilim1006

    @praiseoshilim1006

    10 ай бұрын

    @@GTCoding handling refresh tokens too please?

  • @arshah246
    @arshah2469 ай бұрын

    thanks alot great work. but i think its time for server action

  • @Iyexis
    @Iyexis6 ай бұрын

    Hey, we're using cognito provider for authentication, is there a way to implement the same or similar solution for a custom form with a different provider?

  • @deepaknegi3940
    @deepaknegi39409 ай бұрын

    Can you please a video on how to use NextAuth and Next-intl together.

  • @patrickjreid
    @patrickjreid7 ай бұрын

    Great video. is there a way to do this server side?

  • @targettech2578
    @targettech25789 ай бұрын

    Nice work.. how about change and forget password

  • @theDStaten
    @theDStaten4 ай бұрын

    i already have NextAuth configured for Google OAuth flow. Will the email & password setup from this video work with another OAuth provider being set up?

  • @rogertan2153
    @rogertan21538 ай бұрын

    i love mongodb all my homies love mongodb

  • @programwithalex
    @programwithalex2 ай бұрын

    hey thank you. you seemed like one of those random indian channels but you cantually have good content!

  • @Sebas-lk3jv
    @Sebas-lk3jv10 ай бұрын

    thx

  • @heisenbergcodm7380
    @heisenbergcodm738010 ай бұрын

    Hi Sir can you make the video on how to store the image from next js to mongodb and retreive the image from mongodb and display the image on frontend

  • @michaelseaman7020
    @michaelseaman70204 ай бұрын

    Hello and thank you for your video! i have one issue. I cloned the code from the repo and it works fine, except in the userInfo component, it only displays the email. I could not get it to display any other properties. Thank you so much

  • @abdullahkayhanlar3167
    @abdullahkayhanlar31679 ай бұрын

    Thanks for project, how to create a forgot password page?

  • @prashlovessamosa
    @prashlovessamosa8 ай бұрын

    Hello your sir can you please teach us some advance topics of NextJs.

  • @azamattugelbay
    @azamattugelbay7 ай бұрын

    Can I ask how much is this safe? Can we use it in production projects

  • @MabelEkemezie
    @MabelEkemezie10 ай бұрын

    Pls I have I need your help after following up your work and I have deployed mine but I just saw myself in the home page Not even the sign in and login page what's wrong pls? I used netlify

  • @uzmanalband9498
    @uzmanalband94983 ай бұрын

    I am trying to deploy this app to vercel, deployment is successful but unable to login

  • @sina2706
    @sina27064 ай бұрын

    ❤❤❤❤❤❤

  • @TheDionysiac
    @TheDionysiac10 ай бұрын

    Overall awesome video. But I'm a bit confused as to why we don't sign in the user after they register? At least I can't see anywhere in the source code where this happens.

  • @Tids_

    @Tids_

    8 ай бұрын

    it's normal practice to do it that way

  • @raduscortescu6512

    @raduscortescu6512

    7 ай бұрын

    Normally, you have to validate the user by email confirmation, then you have to use the credentials to log in. That's the most secure way. You can have hackers attack your website and database if you can register and login automatically.

  • @basitbaig
    @basitbaig5 ай бұрын

    Hi, I need little help regarding session object null, i have follow this awesome tutorial and create a simple app, but after login the session always return NULL object at client but it shows object values at server console. Please help I am frustrated because it is about 3 days and I am stuck.... Thank you

  • @user-tu4ng7hq5y
    @user-tu4ng7hq5y4 күн бұрын

    sir the middleware logout button will not work its refresh and have on the same page dashbord page

  • @SimarMannSingh
    @SimarMannSingh3 ай бұрын

    I stumbled upon this video. I wish to provide a constructive feedback. I don't agree with using useState() hook at all for the login/register form. Everytime the value changes, it will cause a re-render of the component. This is a very inefficient way actually. Maybe you can also make another video highlighting this and improving on it. A better approach would imho be, to use the FormData(), populating it, instead of useState(). Many fellow developers have also pointed this out multiple times. Perhaps you can make a new version of this video?

  • @hills6940
    @hills69409 ай бұрын

    I guess the user's session should expire at some point due to inactivity. How can that be implemented?

  • @hamzapaskingakhtar
    @hamzapaskingakhtar5 ай бұрын

    @1:02 When I add the imports in the login I get this error, TypeError: Cannot read properties of undefined (reading 'User') which is related to the models I don't understand what's the relation as it has nothing to do with the schema model in the login

  • @kiranmungekar8918

    @kiranmungekar8918

    4 ай бұрын

    Hi Hamza, I am also facing same issue... did you find any solution on that?

  • @spear5264
    @spear52649 ай бұрын

    Bro please make about next js 13 app directory

  • @user-ez8on4ro8f
    @user-ez8on4ro8f9 ай бұрын

    can anyone tell me the theme nsme he is using...?? please

  • @altifyx_
    @altifyx_4 ай бұрын

    i want to place it in a other folder for example in a admin folder, so the login one directly in admin, but then register in a a register folder inside admin so it would look like admin/register. But then it doesn't work, what am i doing wrong 😅

  • @redbeardjunior
    @redbeardjunior9 ай бұрын

    I have one bug if I create a email & it exist, you will get the error it already exits if you create a second email after that it will not disappear but it wil create the email.

  • @TiredAndWearyTraveler
    @TiredAndWearyTraveler10 ай бұрын

    hi, I am having trouble getting this to work on my side. i pulled from the github, did npm install, npm run dev, set up a mongo atlas server, created the .env and added the needed variables. I am able to register new users and can see them in the database, but when I try to log in with the email and password it does not do anything. it does not give any error either. did i miss a step, am i doing something wrong?

  • @JusTheWebDevNJIT

    @JusTheWebDevNJIT

    10 ай бұрын

    yea im having the same issue its taken me hours and i cant figure it out. I've narrowed it down to the authorize function because the user is being returned incorrectly. Mine is only returning the email or nothing at all.

  • @Lixeann

    @Lixeann

    8 ай бұрын

    ​@@JusTheWebDevNJIT @dantedurant3412 Solution: Change secret to not a URL but a keyword like secret: 'test', and put it above the providers declaration, then it will work (tested myself)

  • @FRESHGAMENEWS
    @FRESHGAMENEWS8 ай бұрын

    I got an error in components/UserInfo.jsx (8:38) @ useSession Error: [next-auth]: `useSession` must be wrapped in a How can i fix that? Is error because of using app directory?

  • @GTCoding

    @GTCoding

    7 ай бұрын

    Make sure to wrap the content of the layout file with the SessionProvider. Here is the timestamp: kzread.info/dash/bejne/gnmByNWqipWTcdY.htmlfeature=shared&t=2851

  • @FRESHGAMENEWS

    @FRESHGAMENEWS

    7 ай бұрын

    I looked for the error for 3 days and googled and could not find the solution. Now everything works! Thank you so much! @@GTCoding

  • @mikhacavin
    @mikhacavin9 ай бұрын

    why not using typscript?

  • @atharvmishra884
    @atharvmishra8849 ай бұрын

    24:32 - 24:37 How did you do that??? 😳 to Type in Capitalcase on the first cursor position but in lowercase on the second cursor position?

  • @GTCoding

    @GTCoding

    8 ай бұрын

    I am using a VS Code extension called 'Multiple cursor case preserve'.

  • @atharvmishra884

    @atharvmishra884

    8 ай бұрын

    Thank you so much!! Thats awesome

  • @developersplatform1132
    @developersplatform11329 ай бұрын

    can you deploy it into netlify

  • @1337sHADOWSTAR
    @1337sHADOWSTAR8 ай бұрын

    how u make ctrl + d and change name, setName to password, setPassword and u change Password with big letters first word

  • @AnuragKumarVerma-eg4jc
    @AnuragKumarVerma-eg4jc2 ай бұрын

    bhai page reset nhi ho rh koi help kro

  • @daugmaud
    @daugmaud8 ай бұрын

    I'm using pages instead of app. How will the auth folder look like?

  • @GTCoding

    @GTCoding

    8 ай бұрын

    /pages/api/auth/[...nextauth].js

  • @mouhamedoussemarouis524
    @mouhamedoussemarouis5248 ай бұрын

    good job, i have a question, how when u click on logout () => signOut() it redirected u to the home page ??

  • @GTCoding

    @GTCoding

    8 ай бұрын

    In the route.js file of next-auth, I added the pages option and I have set the signIn to the homepage. Go to 46:58 of the video.

  • @hamzapaskingakhtar

    @hamzapaskingakhtar

    5 ай бұрын

    @@GTCoding It is not redirecting for me. What could be the issue? I followed a to z

  • @yukiritosurada8392
    @yukiritosurada83922 ай бұрын

    please make an infinitely nested comments using nextjs and mongodb 🙏🙏

  • @Honorato-Dev
    @Honorato-Dev10 ай бұрын

    bro, how do I associate specific data with created users, so that only the user who uploaded his data can manage it in CRUD, as comments chat logic?

  • @user-iq2xr4kf1e

    @user-iq2xr4kf1e

    3 ай бұрын

    hi, did you figure it out?

Келесі