FULL Authentication WITH REACT JS NEXT JS TYPESCRIPT 2023

Focused View

Mohamed Hajji

6:42:44

276 View

1. Showcase

1. Full Showcase.mp4

12:07

2. Setup

1.1 Full source code.html

1. Create next app.mp4

06:49

2. Setup tailwind css.mp4

04:46

3. Setup Mongodb Atlas Cluster.mp4

06:40

4. Connect to the database from our application using typescript.mp4

12:34

5. Setup next auth and testing login process with github.mp4

13:49

3. Next auth providers

1. Setup Google Provider.mp4

09:56

2. Setup Discord Provider.mp4

05:03

3. Setup Twitter Provider.mp4

04:03

4. Deploy our application and test providers on production mode.mp4

13:29

5. Setup Facebook Provider.mp4

08:12

6. Setup Auth0 provider.mp4

10:44

7. Add user to database when sign in with a provider.mp4

08:40

8. Session strategy database vs jwt.mp4

03:53

9. Explaining callbacks and getting the provider name when sign in.mp4

10:50

4. Home page

1. Styling the home page part 1.mp4

11:13

2. Styling the home page part 2.mp4

08:43

5. Protected routes

1. Protected routes with Next js middlware.mp4

09:07

6. Authentification page

1. Auth page setup and custom input.mp4

14:00

2. Finishing custom input styles.mp4

05:14

3. React Hook Form setup.mp4

12:12

4. Adding zod for validation.mp4

05:17

5. Email and phone number inputs and validation.mp4

08:37

6. Password and confirm password inputs and validation.mp4

05:15

7. Password strength validation.mp4

11:53

8. Accept terms and conditions validation.mp4

06:42

9. Show and hide password.mp4

04:52

10. Adding the background and setup toastify and fixing some issues.mp4

10:00

11. Register a user to the database.mp4

17:41

12. After submit reset and loader.mp4

04:53

7. Send emails, Activate account

1. Setup the template.mp4

04:28

2. Setup smtp accounts.mp4

05:06

3. SendMail function with nodemailer and handlebars.mp4

12:42

4. Sending email test with registeration.mp4

12:32

5. Activate account.mp4

19:37

8. Sign in, CrsfTokens, adding providers

1. Sign in provider and switch between forms and backgrounds.mp4

17:24

2. Sign in, csrfToken....mp4

12:38

3. Adding our custom providers.mp4

14:36

9. Forgot, reset password

1. Forgot password page and form.mp4

06:04

2. Forgot password backend api.mp4

06:07

3. Reset password - frontend.mp4

07:08

4. Reset password api.mp4

05:04

10. Deployment

1. Deploy to vercel.mp4

12:04

Description

What You'll Learn?

Create the perfect authentication system 2023
Learn React js next js best practices.
Learn next auth and it's advanced methods.
Manage login, register, forgot and reset password, sending emails,form validation, protected routes
Learn how to send emails using smtp services and nodemailer
Create modern email templates
Validating forms using react hook form and zod
Learn how to wrote strong typed code using Typescript
Learn how to use next js middleware

Who is this for?

All level developers that use react js

Developers who want to create strong authentication system

More details

Description
This is simply the best course on the internet if you want to build and deploy the best authentication system that you can take and use in all of your projects , and i am talking from login, register, forgot and reset password, send emails, from validation, protected routes and more.
We will use Next auth mixed with typescript to provide strong typed code while benefiting from Next js server side capabilities which makes this build really hard to compete with from :
-we will use tailwind css for styling our application.
- Strong form validation with react-hook-form and zod.
-Strong login system using next auth secure sessions.
-Login with credentials, google, facebook, twitter, github, discord, auth0...
-Strong register system with validation in frontend and backend.
-Manipulating next auth callbacks for our advantage.
-Sending emails using nodemailer and smtp services including gmail.
-Handling tokens secretly with emails.
-Writing high quality production ready code.
-Learn how work with typescript even as a beginner or someone who never used it.
-Setup Mongodb cluster and MongodbÂ connection from our application with typescript.
-Add the users to our database where we handle the accounts while we handle the tokens in cookies using json web tokens.
-working with next js api.
-learning about handlebars and use it to replace in our html files.
-Deployment to vercel.
Who this course is for:
All level developers that use react js
Developers who want to create strong authentication system

User Reviews

Rating

average 0

Total votes0

Focused display

Hello there ?My name is Mohamed HAJJI, i am a full stack web developer and a good one of course, i have great knowledge in the web development field in both frontend and backend ,i have built countless applications using many different technologies, and my job here is to take everything i know and try and share it with all my fellow developers from all levels especially for new developers because i have been there and i know the struggle of trying to learn and adapt to all the technologies we have nowadays and i will try in my new journey as an instructor to have different courses to build different major projects using different technologies.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.