MERN authentication (JSON web token, redux toolkit , image upload using firebase storage) | தமிழ்
HTML-код
- Опубликовано: 21 сен 2024
- Hello Everyone, I'm Ajith
I'm actively searching for job opportunities. If anyone has any job opportunities or can provide guidance on securing a job. I'd really appreciate it. Please don't hesitate to reach out at :
howtocontactme.ajith@gmail.com
Thank you!
Welcome to our channel! Dive into the world of secure authentication with MERN-Auth, a full-stack project leveraging MongoDB, Express.js, React, and Node.js. Powered by Redux Toolkit and React Router Dom, this project offers seamless state management and routing. Explore the backend's RESTful APIs for user data management, including registration, login, logout, and profile management, all secured with JSON Web Tokens. On the frontend, React components drive user interactions, while Firebase storage enables hassle-free profile image uploads. With Tailwind CSS enhancing the visual appeal, MERN-Auth delivers an immersive user experience. Join us as we delve into the intricacies of MERN stack authentication and empower your projects with robust security and seamless functionality.
🚀 Watch the app in action with our live demo! 🎬
Click here: mernauth-backe...
🔧 GitHub Code: github.com/Aji... 📝 (sorry , by Mistake i deleted the original repository) ⭐
Chapters:
00:00 - introduction + demo
15:00 - backend folder setup
18:43 - Express server setup with dotenv
31:40 - Express + MongoDB Atlas connection
43:03 - Creating Mongoose user schema for MongoDB
48:41 - Express route for user registration handling
57:00 - Define other routes for user actions (login, logout, update, delete)
1:04:09 - Custom 404 and error handling middleware
1:13:20 -User Registration: Validation and Password Hashing
1:26:22 - Verifying login credentials, responding with user info
1:34:01 - Generates token with JWT and sets HTTP-only cookie
1:43:24 - Handling user logout, clearing cookie
1:47:06 - Validating token, retrieving user data, enabling access.
1:55:57 - Updating user info if authenticated
2:05:13 - Clearing user data, handling deletion
2:08:59 - setup react using vite
2:15:19 - install tailwind css
2:20:05 - create Header
2:25:23 - react router dom - homepage, register, login
2:34:50 - create Register Form - UI
2:50:19 - add show Password functionality
2:57:27 - create login form - UI
3:01:12 - design Homepage - Hero component
3:08:37 - add onchange and onsubmit functionality to register form and login form
3:20:49 - create redux store
3:24:30 - create userSlice
3:32:18 - Creating API endpoints - register
3:40:04 - Handle form submission - register
3:52:00 - Creating API endpoints - login
3:53:29 - Handle form submission - login
4:07:35 - modify Header to display user
4:11:31 - create profile page - UI
4:19:53 - define Private route
4:24:42 - Creating API endpoints - logout
4:29:56 - create update form - UI
4:38:03 - Creating API endpoints - update
4:45:51 - Handle form submission - update
4:52:18 - update image use firebase
5:20:22 - custom 404 error page
MERN STACK PLAYLIST : • MERN STACK
Don't forget to like this video if you find it helpful, and subscribe to our channel for more videos like this one. Let's get coding and building together! 🚀.
I'm actively searching for job opportunities. If anyone has any job opportunities or can provide guidance on securing a job. I'd really appreciate it. Please don't hesitate to reach out at :
howtocontactme.ajith@gmail.com
Thank you!