In this video, you will learn everything about authorisation and authentication using next-auth package in Next.js 14. We 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.
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
Next Part: Next-Auth Forget | Reset Password in Next.js 14 with MongoDB:
https://morioh.com/a/ddcdd23c7a98/forget-password-and-reset-password-functionality
Source Code (Give it a Star ⭐️ )
https://github.com/umairjameel321/next-auth-mongodb
Subscribe: https://www.youtube.com/@ProgrammingwithUmair321/featured
