MERN Authentication App with JWT (and TypeScript)
In this video you'll learn how to add JWT authentication to a MERN stack application. You will learn how to sign, refresh and invalidate JWT tokens, as well as implement account verification & password reset flows. The frontend is built with React, Chakra UI and React-Query. The backend is built with TypeScript, Express and MongoDB. We will use Resend to send emails.
Source Code: https://github.com/nikitapryymak/mern...
0:01 App Walkthrough
5:37 Auth Flow Diagram
Backend
7:31 Initializing the backend
14:36 API Architecture
17:50 Database connection
25:33 Error handling middleware
33:46 Register endpoint
1:25:21 Login endpoint
1:41:40 Logout endpoint
1:52:16 Refresh endpoint
2:07:57 Verify Account endpoint
2:15:12 Resend Integration
2:25:31 ForgotPassword endpoint
2:35:41 ResetPassword endpoint
2:43:53 User endpoint
2:56:05 GetSessions endpoint
3:01:17 DeleteSession endpoint
Frontend
3:07:31 Initializing the frontend
3:16:02 Login page
3:35:12 Register page
3:41:22 VerifyEmail page
3:50:35 ForgotPassword page
3:58:45 ResetPassword page
4:10:37 Adding authentication to frontend
4:24:30 Profile page
4:27:56 Sessions page
4:43:00 Refreshing tokens
Resend: https://resend.com
Cookie SameSite Attribute: https://portswigger.net/web-security/...
Support Me: https://www.buymeacoffee.com/nikitadev
Contact Me: [email protected]
Music from Uppbeat:
https://uppbeat.io/t/avbe/night-in-kyoto
License code: XENVHU3KMICGEHPW
#react #javascript #nodejs
Watch video MERN Authentication App with JWT (and TypeScript) online, duration hours minute second in high quality that is uploaded to the channel Nikita Dev 29 May 2024. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 19,039 times and liked it 704 visitors.
