FULL Authentication WITH REACT JS NEXT JS TYPESCRIPT
6h 52m 28s
English
Paid
Course 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.
Read more about the course
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
Watch Online
0:00
/ #1: Full Showcase
All Course Lessons (44)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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 subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
Crash Course: Build a Full-Stack Web App in a Weekend!
Sources: udemy
Do you want to learn the fundamentals of modern web development fast? Do you want to find out if building websites and apps is the right career path for you? Or maybe you just w...
12 hours 13 minutes 30 seconds
Uber Clone - Typescript, NodeJS, GraphQL, React, Apollo
Sources: Nomad Coders
We will do a Uber clone (backend + frontend + deployment). From head to toe using JavaScript! This time full stack, full JavaScript stack!
22 hours 41 minutes 56 seconds
TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL
Sources: fullstack.io
Learn advanced React, Node, TypeScript, and GraphQL by creating a ready-to-use application in this online course. Explore each of these technologies and find out how to create a...
30 hours 50 minutes 42 seconds
MERN eCommerce From Scratch
Sources: udemy, Brad Traversy
There are a lot of "eCommerce" courses out there, but most use some kind of prebuilt plugin or platform. In this course, we will build a completely customized eCommerce / shoppi...
14 hours 49 minutes 45 seconds
Real-Time Collaborative Apps with Next.js and Supabase
Sources: fullstack.io
This course is here to assist you in efficiently creating real-time applications using Next.js, TypeScript, Tailwind CSS, and Supabase. We go beyond the fundame
51 minutes 59 seconds