Next-Auth Login | Register in Next.js 14 with MongoDB - Login with Credentials and Github
Вставка
- Опубліковано 8 лют 2025
- In this video, you will learn everything about authorisation and authentication using next-auth package in next.js 14. I will show you how to use credentials provider and github provider of next-auth to login user in next.js 14. Learn how to integrate mongodb in next.js 14 and store registered user data in database. Along with that, add validations on login and signup forms.
Learn about designing login and register forms using tailwindcss. You will also learn how to store user data in mongodb database when login with github.
Learn how to protect routes in next.js 14 for authenticated users along with proper validations.
Next Part: Next-Auth Forget | Reset Password in Next.js 14 with MongoDB:
• Next-Auth Forget | Res...
00:10 Project Overview for Next-Auth login register in Next.js 14
05:40 Create a new next.js 14 project
07:30 Build Navbar UI
13:09 Create App directory routes
14:50 Build form for user sign up in next.js 14
19:00 Integrate MongoDB in next.js 14 project
27:30 Create mongoose model for user
29:30 Create api in next.js 14 for register user
34:40 Integrate register api in frontend signup page
43:40 Fix error in mongoose in next.js 14
44:00 Test register user feature in next.js 14
45:00 Test form validation in next.js 14
46:00 Configure next-auth in next.js 14
48:45 Integrate credentials provider in next.js 14
53:40 Add session provider of next-auth in next.js 14
57:35 Build login page form for next-auth in next.js 14
01:01:35 Next-Auth signIn with credentials in next.js 14
01:04:45 Protect login route when authenticated in next.js 14
01:06:45 Export next-auth handlers
01:08:10 Implement SignOut in next.js 14 using next-auth
01:11:50 Protect dashboard route in next.js 14
01:13:20 Add next auth url and secret
01:15:30 Login with github in next.js 14 using next-auth
01:20:30 Use callbacks of next-auth in next.js 14
01:23:30 Store login with github user data in mongodb
01:27:30 Fix login form flicker error
01:31:55 Outro
#nextjs13 #nextjs14 #authentication #authorisation #login #signup #mongodb
React tutorials:
• React.js Tutorials
JavaScript Tutorials and Projects:
• JavaScript Tutorial an...
Angular Tutorials:
• Angular 16 Life Cycle ...
Angular 16 Crash Course For Begineers:
• Angular 16 Crash Course
Tech Tutorials - Random:
• Postman Tutorial - Tes...
Complete Next.js 13 Crash Course: • Next.js 13 Tutorials -...
Node Express MongoDB Bootcamp: • Build REST API with No...
ChatGPT Tutorials: • ChatGPT
Join our facebook group:
/ 996305460498149
Follow me on linkedIn:
/ umair-jameel-24aa5368
Source Code (Give it a Star ⭐️ )
github.com/uma...
Next-Auth Forget | Reset Password in Next.js 14 with MongoDB
ua-cam.com/video/sO5df9FVIT8/v-deo.html
@ProgrammingwithUmair321 I loved this video, thank you. I would ask of you would provide me the full details on how to postgresql instead? At this point I have the postgresql database connected, I'm using prisma. I followed you up to the point when you were configuring mongoose, and there is where I got lost. I have to form and connection, just don't know how to configure everything from there.
After watching many videos, this one was the best i found. Umair, thank you very much! i already have a new friend in brazil!
Good tutorial! But there is one big mistake I have to point out at 57:15 when implementing the SessionProvider. You must provide authOptions which has been defined in your [...nextauth] api route otherwise you won't get or lose part of your session in production after you REFRESH your page. This works in dev mode but you will encounter this problem in production and finally drive you crazy because you get NO ERROR!
So the best practice (I guess) is to:
1. extract the authOptions to another separate file (since you will get another error when building if you directly export it in nextauth route which basically says the authOption is not a handler)
2. always pass the authOptions to getServerSession (this is how you use it as the documentation mentioned)
Hope this comment can help you guys if you have the same problem.
can you elaborate i am confused
Been waiting for this kind of tutorial for ages. Thanks bro.
u are the best man this is the best course for any one who is reading this
👏👏👏👏👏👏👏👏👏👏
I was searching for this guide whole dsy Jazakallah brother
watching the video, sounds really promising!! Thanks for the great content!!!!
Exactly what I've been looking for. Great video, thank you!
Dude, thanks. I've recently started programming and this video was a huge help!
Thanks a lots for creating sucha a wonderful contents, it is really helpful to me and many others.
Suggestions for videos
1) If have one suggestion for creating NextJS tutorial where to use external backend for login, register and others. Because in most of the cases I see that the in companies there are dedicated backend teams for Auth, and other APIs.
2) Complex and nested layout in nestjs
Thanks again for beautiful contents.
Best Next-Auth tut! thanks so much. Subsrcribed:)
Thanks for your effort man. Great tutorial.
Excellent!!, this guide is very useful.
Subscribed
very Underrated channel
Your are putting latest Content Thanks Umair
Nice content friend. Was pretty helpful. Thanks.A quick suggestion tho: u might wanna add a .env.example file in u'r repo for those that are following along and referring to ur repo with example variables.
a production ready blog app would be great sir please make one. i have all the major tutorials but none them are as useful as yours, i wanted to build a blog app for while, but i am not able to, sir please make one with prisma, supabase, shadcn, next-auth, cloudinary, tiptap editor.
Great video, Thank you ♥
Thanks Umair this is a great video and the second one I have watched in entirety from your channel. Keep up the good work!
One question, why do you use router.replace instead of router.push?
Great tutorial. Thanks.. Would be nice, if you can add crud & deployment to vercel ... 👍😎
Glad it helped.
I have created crud app in my multiple nextjs videos. Check playlist ‘nextjs 13 tutorials’
Videos like redux, context api, zustand etc. contain building crud apps.
I have a question: why mongoose instead of prisma?
Why not using middleware for protect route?
token base authentication with middleware tutorial needed
You are the best
brother,i have express.js server can i integrate next auth with express.js?
Thanks sir .
At first, Many thanks for this tut.
Why you used this line in the login page?
if (res?.url) router.replace("/dashboard");
I did not understand this line exactly!
How can you add an async function to a client component? I always get an error.
I have a question. Why we're making dashboard a server component? Can't we just use useEffect to redirect to login if not logged in like we did in the register and login route?
How to check if the user owns the email?
Why not just use server actions and middleware?
Pls make e commerce project in next.js 14.. Thanks
Hi how do I fix the brief flicker when refreshing the page. If a user is logged in, the nav bar changes, but when refreshing the page, for a brief moment the login and signup options appear and disappear.
Hola Amigo great video! One question, I see that at 1:06:24 you have a [CLIENT_FETCH_ERROR] error. What is the reason and how to fix it?
Hi bro how to set the default page to be login when go to npm run dev in the browser it to be handle localhost:3000/login not the home page localhost:3000 I implemented but when I gave localhost:3000 its changing to localhost:3000/login but the issue is white space occuring 2secs then login page occuring how to resolve this issue
My challenge is the back end was done using python (an external API).
Which is making it difficult for me to use the next-auth for authentication, route protection etc.
Any solution?
what is the extension name for auto complete react
I want NextAuth to call signOut event when refresh token expire.
Is there any way to do it ?
nice video
make authentication using tanstack query in nextjs
Hello sir, I deployed my app on Vercel. Authentication works fine in localhost, but in the deployment the console throws an error that goes like this:
""{error: 'Error occured while connecting mongodb', status: 401, ok: false, url: null}
error
:
"Error occured while connecting mongodb"
ok
:
false
status
:
401
url
:
null
[[Prototype]]
:
Object"
can you help me sir? what is the problem with accessing mongoose server in live deployment?
I believe you have to allow mongodb to be accessable from all ips from mongo atlas project settings
Add forget password please, using nodemailer please or something meaningful please
Sure, I will create another video for this in a week or so.
Stay updated on my channel.
@@ProgrammingwithUmair321Great! 🎉🎉🎉
I have this error [next-auth][error][JWT_SESSION_ERROR]
good video but way too long. If only I couild get the same data in less time.
you should atleast make sure that you don't fix errors in the youtube video. plan better.
Thanks for your comment.
But errors make us learn more. We should know how to debug as well.
For loading for a second protected page there is a better way. Just redirect in a server component (eg. login/page.tsx):
const session = await getServerSession()
if (session) {
redirect("/dashboard")
}
If you have some client components just implement in login/page.
This is amazing, thanks Umair. This was really helpful; I also took a look at the password reset. One final extension that would make this truly complete would be account activation for the email registration. I think usually we'd want to request verification/activation with a token-based link or something to that effect. How could we extend this great tutorial project to incorporate that final step?