Next-Auth Login | Register in Next.js 14 with MongoDB - Login with Credentials and Github

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 | Reset Password in ...  

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 and Projects  

Angular Tutorials:
   • Angular 16 Life Cycle Hooks - Explain...  

Angular 16 Crash Course For Begineers:
   • Angular 16 Crash Course  

Tech Tutorials - Random:
   • Postman Tutorial - Testing APIs and B...  

Complete Next.js 13 Crash Course:    • Next.js 13 Tutorials - App Directory  

Node Express MongoDB Bootcamp:    • Build REST API with Node Express MongoDB  

ChatGPT Tutorials:    • ChatGPT  

Join our facebook group:
  / 996305460498149  

Follow me on linkedIn:
  / umair-jameel-24aa5368  

Source Code (Give it a Star ⭐️ )
https://github.com/umairjameel321/nex...