FULL Authentication WITH REACT JS NEXT JS TYPESCRIPT

6h 52m 28s
English
Paid

Unlock the full potential of authentication in your web applications with this comprehensive course. Learn how to build and deploy a robust authentication system using React JS, Next JS, and TypeScript. From login and registration to password reset and email verification, this course covers it all. Benefit from Next.js server-side capabilities and strong typed code with TypeScript to create secure, scalable solutions for all your projects.

Course Highlights

This course offers unparalleled features and practical knowledge, including:

  • Styling with Tailwind CSS: Learn how to efficiently style your application using the Tailwind CSS framework.
  • Comprehensive Form Validation: Implement strong form validation with react-hook-form and Zod to ensure data integrity.
  • Secure Authentication with NextAuth: Utilize secure sessions and a robust login system to protect user accounts.
  • Multiple Login Options: Implement login via credentials, Google, Facebook, Twitter, GitHub, Discord, and Auth0.
  • Advanced Registration System: Create a strong registration system with frontend and backend validation.
  • Optimize Callbacks: Manipulate NextAuth callbacks to your advantage for enhanced functionality.
  • Email Integration: Send emails securely using Nodemailer and SMTP services, including Gmail.
  • Token Management: Handle tokens securely in emails and manage them in cookies using JSON Web Tokens.
  • Quality Code: Write high-quality, production-ready code suitable for deployment.
  • TypeScript Knowledge: Gain proficiency in TypeScript, even if you're a beginner or have never used it before.
  • Database Integration: Set up a MongoDB cluster and connect your application using TypeScript for efficient data handling.
  • User Management: Add users to your database, manage accounts, and handle tokens seamlessly.
  • API Utilization: Work effectively with Next.js API routes to extend your application's capabilities.
  • Templating with Handlebars: Learn about Handlebars and how to use it to replace and manage HTML content.
  • Seamless Deployment: Deploy your application with confidence to Vercel, ensuring reliability and speed.

About the Author: udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 44 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 44 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Full Showcase
All Course Lessons (44)
#Lesson TitleDurationAccess
1
Full Showcase Demo
12:08
2
Create next app
06:50
3
Setup tailwind css
04:47
4
Setup Mongodb Atlas Cluster
06:41
5
Connect to the database from our application using typescript
12:35
6
Setup next auth and testing login process with github
13:50
7
Setup Google Provider
09:57
8
Setup Discord Provider
05:04
9
Setup Twitter Provider
04:04
10
Deploy our application and test providers on production mode
13:30
11
Setup Facebook Provider
08:13
12
Setup Auth0 provider
10:45
13
Add user to database when sign in with a provider
08:41
14
Session strategy: database vs jwt
03:54
15
Explaining callbacks and getting the provider name when sign in
10:51
16
Styling the home page part 1
11:14
17
Styling the home page part 2
08:44
18
Protected routes with Next js middlware
09:08
19
Auth page setup and custom input
14:01
20
Finishing custom input styles
05:15
21
React Hook Form setup
12:13
22
Adding zod for validation
05:18
23
Email and phone number inputs and validation
08:38
24
Password and confirm password inputs and validation
05:16
25
Password strength validation
11:54
26
Accept terms and conditions validation
06:43
27
Side submit button
09:01
28
Show and hide password
04:53
29
Adding the background and setup toastify and fixing some issues
10:01
30
Register a user to the database
17:42
31
After submit reset and loader
04:54
32
Setup the template
04:29
33
Setup smtp accounts
05:07
34
SendMail function with nodemailer and handlebars
12:43
35
Sending email test with registeration
12:33
36
Activate account
19:38
37
Sign in provider and switch between forms and backgrounds
17:25
38
Sign in, csrfToken...
12:39
39
Adding our custom providers
14:37
40
Forgot password page and form
06:05
41
Forgot password backend api
06:08
42
Reset password - frontend
07:09
43
Reset password api
05:05
44
Deploy to vercel
12:05
Unlock unlimited learning

Get instant access to all 43 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription