CF

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

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

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

Related courses

Frequently asked questions

What prerequisites are recommended before enrolling in this course?
Basic knowledge of JavaScript and familiarity with React are recommended before enrolling in this course. Understanding of web application concepts and some experience with Node.js will also be helpful, as the course delves into advanced topics like server-side rendering with Next.js and secure authentication practices.
What kind of projects will I build during the course?
During the course, you will build a robust authentication system for web applications. This includes implementing login and registration features, secure token management, and integrating multiple login options using providers such as Google, Facebook, Twitter, GitHub, Discord, and Auth0. Additionally, you'll work on styling the application using Tailwind CSS and deploying it using Vercel.
Who is the target audience for this course?
This course is ideal for web developers who want to enhance their skills in building secure authentication systems. It caters to those interested in using React JS, Next JS, and TypeScript for developing scalable and secure web applications. Developers looking to integrate social login options and manage user sessions securely will find this course particularly beneficial.
How does this course compare to other authentication courses available?
This course stands out by integrating React JS, Next JS, and TypeScript, focusing on both frontend and backend aspects of authentication. It covers the use of NextAuth for secure sessions, multiple social login providers, and comprehensive form validation using react-hook-form and Zod. Unlike some other courses, it also includes email integration with Nodemailer and deployment instructions for Vercel.
What specific tools and platforms are covered in the course?
The course covers a range of tools and platforms including NextAuth for authentication, Tailwind CSS for styling, and MongoDB Atlas for database management. It also includes setup and usage of multiple login providers like Google, Facebook, Twitter, and Auth0, as well as email handling with Nodemailer. Deployment is demonstrated using Vercel, providing a comprehensive toolchain for web developers.
What topics are not covered in this course?
The course does not cover basic JavaScript or React fundamentals, assuming that students already have foundational knowledge in these areas. It also doesn't delve into advanced deployment strategies beyond the use of Vercel, nor does it cover non-web-based authentication systems or broader security practices outside the scope of authentication.
What is the expected time commitment to complete the course?
The course comprises 44 lessons, each varying in length, and includes practical implementation exercises. While the total runtime isn't specified, students should plan to dedicate several hours per week to complete the lessons, practice coding, and work on the project components thoroughly. The time commitment will vary based on the student's pace and prior experience.