MERN Auth - Signup & Login with Email (JWT) | React , Node, Express, MongoDB

what's up guys welcome to my channel today we're gonna be implementing authentication in one stack where user can sign up and log into the record as you can see i am writing some email and let's add a password here we have also added form validation in backend if you try to add some random password you're gonna get a response of 400. you see we have also added html form validation okay let's add a direct and we'll set some valid password sign up to this account let's log into this account if we try to add wrong password or email we're gonna get a response of 400. invalid email or password let's add a valid password and sign into this account okay we have logged in let's log out if an user has sign up with email and try to create another account with the same email we're gonna send a response of our email already exist before we get started please subscribe to my channel and like this video so without wasting time let's get started [Music] first we gonna create a folder named earth in one and we're gonna navigate into this folder and we're gonna create server folder this will be our backend of our application and we're gonna initialize this with npm we're gonna install some dependencies like express mongoose dot env nodemon and cores so let's install them [Music] after installing them we're gonna open this project in visual studio okay let's close this in package.json we're gonna start this project with node1 node1 index.js okay let's save this file let's create index.js input folder we're going to import dot emv module here and call dot config method const express is equal to require express module then const app equal to express let's add a comment here it will be middleware okay our middleware will be express dot json and we're gonna add another middleware course let's import it and let's use app.use course okay let's add port 8080 then we're gonna listen on this port we're gonna console.log listening on and put 8080 okay let's save this file let's create db.js file in this file let's import mongoose module okay we're gonna export this function in this connection panels which required to connect our database use new url parser and use unified topology okay let's add try catch block imply let's add mongoose.connect require process.tmb or database url let's add otme file here let's add here you add your database url okay let's save this and our connection balance if you are connected we're gonna console.log connect it to database successfully okay if an error occurred you're gonna console.log error and console.log could not connect to our database okay let's save this and import it here cache connection require let's call here add a comment and connection call this save this file let's test npm start okay our file is working [Music] before we create user model we're gonna install json web token joy and joy password complexity we're gonna use json dev token to authenticate user i enjoy joy password complicity to validate the data sent by the user after installing that let's create models folder here user.js file in this file let's import mongo's module mongoose okay after importing members let's create user schema new mongoose dot schema and first name will be type string and it required true let's copy this and paste it here change this to last name email password okay let's add a method which returns json web token for the specified user with the payload of id let's import json web token here provide json web token let's write const token jwt dot sign and add payload here i'm just adding id okay let's add private key [Music] in dot env file let's add our private key which should be strong and secure if someone found private key they're gonna easily manipulate the json web token so it should be secured then we're gonna add expired scene seven days because this token is gonna expire in seven days let's return this token okay let's create user model const user is equal to start model and we're gonna name it user and user schema okay let's add validation function here let's import joy require joy and password complexity require join password complexity okay then inside const validate data and then const schema joy dot object first name joy dot string required and we're gonna name it label first name because we don't want to show first name to bit like this so let's copy this and paste it here it should be last name and here also okay let's add email joy dot string dot email dot required dot label let's add email website password joy dot sorry pressing this okay password complexity dot required dot label and password then we gonna return schema dot validate data okay let's export module dot exports user model and validate function save this file [Music] before we create register route we're gonna install the grip module we're going to use this module to hash our password and save this in database after installing this let's create dots folder here users.jsl and we're going gonna import router from express module dot router then we're gonna export our router let's add router dot post and async function here let's share try catch block and try conch error let's import user model and validate function user and validate require dot models user okay let's use validate and send request dot body it's gonna validate if any error is occurred we're gonna return with restore status of 400 and send a message error dot details thereof dot message okay if not error record then we're gonna check whether the user with the same email already exists or not okay if an user exists then we're gonna return thresh status of 409 and send message user with given email already exist then let's import decrypt module require decrypt okay const salt and wait we crypt dot gen salt member process dot enb dot salt let's add this in env file sort i'm adding them okay let's settle and save this file okay let's open here const hash password await decrypt dot hash let's add request body password and sort it's gonna hash our password let's await new user with data i'm using spread operator here then we're gonna change password to hash password and let's save this dot save okay after that we're gonna send status with two zero one percent message will be user created successfully okay if an error occurred then we're gonna stay standard status quick finder and message will be internal server error [Music] in dots folder let's create a.js file here let's import router from express module dot router method then we're gonna import user require dot models from user we're gonna export this router let's add router.post and using function request address between try cashblock and try const error let's create validate function const joy require joy here in below const validate and data and const schema is equal to joy dot object email will be joy dot string not email dot required dot label email then let's add password joy dot string dot required dot label will be password okay then we're gonna return schema dot validate data okay let's use validate function here validate [Music] request.body if an error occurred then i'm gonna return it status of 400 dot send message will be error dot details dot message okay const user wait user dot find one email request dot body dot email if an user is not not exist then we're gonna return restart status with 401 and send a message invalid email or password okay const valid password wait let's import decrypt const decrypt is equal to quick file decrypt okay be crypt dot compare request dot body dot password and user dot password if added password is not then we gonna return with status of 401 and send message will be invalid email or password if email and password are valid then we're gonna call user dot generated a token method it's gonna return json vector okay and we're gonna send the status of two zero two hundred same data will be okay and message will be logged in successfully here if an error occurred then we're gonna return with status of 500 dot send message will be internal server error [Music] in index.js let's import user routes require routes from users then attracts require hopes from upfold file let's add a comment here routes app.use api users and user drops then we're gonna after use api up and drops [Music] we're gonna create a react app with the command npx create react app and we're gonna name it client it would take some time to install dependencies i will be back in a second after installing them we're gonna navigate into client and we're gonna install axios and react router dom excuse to call api and react auto term to assign routes for our components okay we're gonna install them after installing them let's open this project in visual studio let's clean up this readme and app.css test logo everything let's delete them in index.js let's remove this and this let's import browser router from react router browser router and let's use it here and paste it here okay let's save this file in app.js let's remove this and this and write hello world let's save this file [Music] in source folder let's create component folder in this folder let's create signup folder in this index.jsx and styles.module.css in index.jsx let's import styles from dot style start module dot css then const sign up let's return this and we're gonna export default signup let's add div the class name style start sign up container in this let's add here and style start signup form container okay let's add another div with the class name style start left and div with style slot right in left let's add h1 tag with welcome back let's import link from react router dom as you can see we have automatically imported and we're gonna navigate this to login page login page then button click sign in and let's add type will be button last name will be style start btn and right let's write home form and last name will be styles dot form container in this form h1 tag will be create account and input will be type will be text and placeholder will be first name let's add let's import use date from react okay let's use it here const data set data and we need you state first name will be string last name will be string and email password okay let's use it here first uh name will be first name we should write exactly how we wrote in state then we're gonna add value data dot first name and required last name will be styles dot input and on change i'm gonna get handle change okay let's create a function here const handle change and current target let's change this into input and set data i'm gonna use head operator here and bracket input dot name and value will be input dot value it's gonna update okay here let's add copy this and paste it here let's change this to last name and this is also last name data dot last name okay let's paste it here type will be email it will be email name will be email not a dot email okay let's paste it here type will be password placeholder password name also password and data dot password okay let's add a button with sign up okay type will be submit and class name will be style start green btn okay then we're gonna add const handle submit let's add this function and let's add p here e dot prevent default okay let's add this function on submit and handle submit okay let's import xcos from xeos and it's going to be async function you're going to add like cache block const url is equal to http localhost 8080 and we're gonna create users so the route will be users and branched data and we're gonna change this to response because we have used red data already xus.post url and data okay that's console.log rest dot message let's import use navigate from react autodom const navigate is equal to use navigate and call this one okay let's use it here navigate and we're gonna navigate this to login page okay if an added record status let's write it down here okay status is equal is greater than equal to 400 and response dot status is less than or equal to 500 so const error set error use state then we're gonna set error error dot response dot data dot message we have saved our error so let's show this to the user if an error occurred we're gonna show this only if an error occurred so and and let's add it with the class name styles dot error message and it's going to be error okay why is this handle changes not active let's change this to handle handle change okay handle change okay let's save this file here i have added css already just pause the video and write it down or else i'm going to add source code link in the description just go there and copy it [Music] in source folder components create login folder in this folder let's create index dot array index.jsx and styles.module.css we have code in index.jss copy and paste it here and let's remove use navigate and it's a login page so we don't need first name and login name and let's see more navigate here okay here in handle submit let's change this url to earth and they are going to be same okay let's remove navigate and local storage dot set item token and we're gonna send restore data and window dot location will be home okay let's remove this it's going to be same let's change this sign up to login let's copy this h1 and link and paste it in right tip and copy this form and copy this and paste it here okay here let's change h1 to be new here and link route we sign up and it's going to be sign up okay then in left and left let's add h1 login to your account here let's remove this first name input and last name input email and password both are right and it's also same okay let's change this to error in sign up also change this to error sorry okay save this here change this to sign in and both all are safe let's save this file [Music] [Music] in components let's create main folder in this index.jsx and style dot module dot css here let's import styles from dot style start module dot css then let's create main function and we're gonna return let's export this default in in return div dot class styles dot main container here let's add nav with the class name styles dot navbar and h1 will be fake book okay and button will be log out let's add class name with the style start white btn and on click handle logout okay let's add this function const handy logot mission with arrow function here we gonna remove local storage dot remove item token then we gonna window dot location dot reload you save this file [Music] in app.js let's import input from react autodom route routes and navigate then we're gonna import main from components and main let's import sign up from components sign up then we're gonna import login from components login so let's use them here let's remove this div and let's add routes here in route route and path will be is an exact element will be main okay let's add const user local storage dot key data token if user is exist then only we're gonna show this route okay let's add another route okay so without this part to be sign up and okay exact element sign abroad okay copy this page here login and login okay another thing okay here we're gonna use navigate and we're gonna navigate this to login okay save this file [Music] you

Channel: CyberWolves

Views: 142,311

Keywords: User authentication, JWT, Node.js, MongoDB, React, MERN Stack, Authentication Tutorial, Authentication, fullstack, junkie, codedamn, javascript, mastry, technical, free code camp, login, signup, json web token, coding, bcrypt, json, react, localstorage, mongoose, middleware, mern stack project, mern todo app, mern tutorial, crud mern, react todo app, react node js project, spotify clone

Id: HGgyd1bYWsE

Length: 32min 19sec (1939 seconds)

Published: Wed Dec 22 2021