Advanced MERN Stack Authentication
About Course
Learn MERN Stack Authentication and Authorization like it is done in the real world.
Welcome to Mern Stack Authentication Course.
What is Authentication?
In simple terms, authentication is the process of verifying who a user is, while authorization is the process of verifying what they have access to.
In this course, we are going to cover MERN Stack Authentication as it is done in the real world.
What we will cover.
– MERN Stack Authentication and Authorization
– Build Frontend pages with React and SCSS
– Setup Routing with React Router V6
– Build API endpoints with Express
– User Registration and Login
– Password Reset Via Email
– Sending Automated Email
– User Management
– Assign User Roles
– Google OAuth Login
– User profile management
– Change password
– Working with Cookies
– Working with JWT (JSON web token)
– Auth Middleware
– Profile Update
– Protect routes to only be accessed by logged-in users
– Error handling
– Working with Cookies
– Pushing projects to Github
– Deploy Backend to Render
– Deploy Frontend to Vercel
Course requirement
- Developers who got basic React and MERN Stack knowledge and want to learn in-depth MERN Stack authentication.
NOTE:
This is not an introduction to React course, you are expected to know React before taking this course.
However, I try to explain the ReactJS concepts used in every section.
This is not an introduction to MERN Stack course, you are expected to know MERN Stack before taking this course.
However, I will explain everything I do while building the project.
What Will You Learn?
- MERN Stack Authentication and Authorization
- User Registration and Login
- Password Reset Via Email
- Sending Automated Email
- User Management
- Assign User Roles
- Google OAuth Login
Course Content
Introduction
-
1. Auth-z Project Demo
17:17 -
2. Introduction & Course Requirement
02:53 -
3. 3. What is Authentication and Authorization
06:52 -
— RESOURCES —
00:00
Project Setup
-
4. Planning the project
02:48
FrontEnd – Auth-Z Project
-
5. Create React App
03:03 -
6. Project cleanup
05:20 -
7. CSS Utility class overview
02:20 -
8. Setting Up Routing
07:38 -
9. Header Component
16:12 -
10. Footer Component
02:16 -
11. Home Page
05:03 -
12. Layout Component
04:13 -
13.Login Component – Part 1
08:48 -
14. Login Component – Part 2
13:43 -
15. Password Input Component
10:26 -
16. Register Component – Form
08:49 -
17. Register Component – Password Strength Indicator
15:55 -
18. Register Component – Password Strength Logic
07:26 -
19. Forgot Password Component
05:24 -
20.Reset Password Component
06:33 -
21. Login With Code Component
08:02 -
22. Profile Component
15:26 -
23. Verify Account Component
04:25 -
24. Page Menu Component
05:39 -
25. Change Password Component
10:23 -
26. User List Component
04:17 -
27. User Stats Component
10:45 -
28. User Search Component
05:14 -
29. User Table
07:29 -
30. Change Role Component
06:18 -
31. Loader Component
09:21
BackEnd – AUTH-Z Project
-
32. Backend Folder Setup
06:23 -
33. Create Server and Connect MongoDB
10:16 -
34. Create Folders and Test With Insomnia
04:11 -
35. Set up Middleware
04:07 -
36. Create User Model
12:42 -
37.Create User Route and Controller
06:50 -
38. Create Custom Error Handler
06:52 -
39. Register User – Part 1 – Validation
13:37 -
40. Register User – Part 2 – Generate Token & Create User
13:27 -
41. Register User – Part 3 – Hash Password
08:24 -
42. Register User – Part 4 – Get User Agent
07:11 -
43. Setup Login Route
04:33 -
44. Setup Login Controller
11:10 -
45. Logout User- Route and Controller
05:43 -
46. Get User Route
03:04 -
47. Auth Middleware
11:41 -
48. Get User Controller
04:10 -
49. Update User – Route and Controller
10:39 -
50. Delete User Route & Create Admin Only Middleware
09:05 -
51. Delete User Controller
08:55 -
52. Get all Users
06:19 -
53. Get Login Status
06:04 -
54.Change user role
08:16 -
55. Create Send Email Function
18:26 -
56. Automated Email Route and Controller
15:53 -
57. Create Email Template and Send Email
05:54 -
58. Create Token Model
07:24 -
59. Send Verification Email – Part 1
12:15 -
60. Send Verification Email – Part 2
14:51 -
61. Create Verification Email Template
04:46 -
62. Verify User Route and Controller
13:29 -
63. Forgot Password Route
06:38 -
64. Forgot Password Controller
12:29 -
65. Reset Password Route and Controller
11:06 -
66. Change Password Route and Controller
10:49 -
67. Create Change Password Email Template
02:45 -
68. Trigger 2FA – Part 1
06:32 -
69. Trigger 2FA – Part 2
15:40 -
70. Send Login Code Route
05:09 -
71. Send Login Code – Controller
15:35 -
72. Login With Code – Route
04:33 -
73. Login With Code – Controller
15:35 -
74. Moving to the Frontend
00:54
Connect Frontend To Backend
-
75. Setup Redux Toolkit – Part 1
10:53 -
76. Setup Redux Toolkit – Part 2
08:44 -
77. Register User 1 – createAsyncThunk
10:26 -
78. Register User 2 – Handle response
05:37 -
79. Register User 3 – Form Validation
13:21 -
80. Register User 4 – Component Logic
08:37 -
81. Register User 4 – Component Logic
05:11 -
82. Login User – Redux Logic
04:44 -
83. Login User – Component Logic
08:01 -
84. Logout User – Redux Logic
05:50 -
85. Logout User – Component Logic
03:31 -
86. Get Login Status- Redux Logic
05:04 -
87. Get Login Status – Component Logic
04:04 -
88. Custom Hook – useRedirectLoggedOutUser
10:48 -
89. Show or Hide Links
10:42 -
90. Get User Profile – Redux Logic
04:25 -
91. Get User Profile – Component Logic
09:48 -
92. Update User – Redux Logic
04:03 -
93. Update User – Preview Profile Image
11:46 -
94. Update User – Upload Image to Cloudinary
13:08 -
95. Update User – Upload to MongoDB
16:43 -
96. Update User – Shorten Username
06:42 -
97. Send Verification Email – Redux Logic
05:02 -
98. Send Verification Email – Component Logic
09:06 -
99. Verify User – Redux Logic
05:10 -
100. Verify User – Component Logic Draft Lesson
06:55 -
101. Change Password – Redux Logic
04:24 -
102. Change Password – Component Logic
09:13 -
103. Send Automated Email – Redux Logic
12:49 -
104. Send Automated Email – Component Logic
05:07 -
105. Forgot Password – Redux Logic
04:53 -
106. Forgot Password – Component Logic
05:47 -
107. Reset Password – Redux Logic
04:14 -
108. Reset Password – Component Logic
11:47 -
109. Reset Password – Component Logic Debug Session
14:48 -
110. Get Users – Redux Logic
07:29 -
111. Get Users – Component Logic
12:55 -
112. Delete User – Redux Logic
03:56 -
113. Delete Users – Component Logic
11:49 -
114. Upgrade User – Redux Logic
03:50 -
115. Upgrade User – Component Logic
15:34 -
116. Search Users Functionality
13:18 -
117. Pagination Functionality
09:20 -
118. User Stats – Redux Logic
09:38 -
119. User Stats – Component Logic
07:22 -
120. Send Login Code – Redux Logic
07:52 -
121. Send Login Code – Redux Logic
05:31 -
122. Login With Code – Redux Logic
04:59 -
123. Login With Code – Component Logic
10:51 -
124. Resend Login Code
03:30 -
125. Google Auth setup
08:20 -
126. Google Auth setup – Part 2
06:31 -
127. Google Auth Login – Frontend
15:16 -
128. Google Auth Login – Backend
21:51
Deploy App
-
129. Push code to Github
07:31 -
130. Deploy Frontend To Vercel
06:47 -
131. Deploy Backend To Render
03:37 -
132. Test App
00:52