MERN Authentication - Login, Register, Verification Email, Forget Password, User Name & Logout on Navbar
In The React Side :
The folder structure will be :
Lets start from App.js
On this file we will be adding routing , install the package react-router-dom :
import './App.css';
import React from 'react';
import {
BrowserRouter as Router,
Routes,
Route,
Link
} from "react-router-dom";
import Signup from './components/Signup';
import Signin from './components/Signin';
import Home from './components/Home';
import ForgetPassword from './components/ForgetPassword';
import NewSubmit from './components/NewSubmit';
function App() {
return (
<div>
<Router>
<Routes>
<Route path="/signup" element={<Signup />} />
<Route path="/signin" element={<Signin />} />
<Route path="/" element={<Home />} />
<Route path="/forget-pass" element={<ForgetPassword />} />
<Route path="/otp" element={<NewSubmit />} />
</Routes>
</Router>
</div>
);
}
export default App;
For some styling we will use following css in App.css :
.outcard {
padding: 25px;
margin-left: 22%;
width: 50%;
box-shadow: 0 1px 2px 1px #ddd;
border-radius: 3px;
}
.card {
box-shadow: 0 1px 2px 1px #ddd;
padding: 15px;
display: flex;
justify-content: space-between;
background-color: #eee;
}
.inputs {
width: 93%;
color: #444;
border: 1px solid #ccc;
border-radius: 3px;
padding: 10px 10px;
}
.btns {
background-color: #0050b1;
color: #fff;
width: 100%;
padding: 10px 10px;
border-radius: 3px;
border: none;
}
.center {
text-align: center;
}
Now the Login/SignIn Component at file Signin.js :
import { useState } from "react"
import axios from "axios"
import { Link, useNavigate } from 'react-router-dom'
function Signin() {
const navigate = useNavigate()
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const handleSubmit = () => {
console.log(email, password)
axios.post('http://localhost:5000/signin',
{
email: email,
password: password
})
.then(res => {
console.log(res.data)
if (res.data.code === 500) {
alert('User Not Found')
}
if (res.data.code === 404) {
alert('Password is wrong')
}
if (res.data.code === 200) {
// move to home
navigate('/')
localStorage.setItem('TOKEN', res.data.token)
localStorage.setItem('EMAIL', res.data.email)
}
}).catch(err => {
console.log(err)
})
}
return (<>
<h1 className="center"> SIGNIN </h1>
<div className="outcard">
Email
<input
onChange={(e) => {
setEmail(e.target.value)
}}
value={email}
className="inputs"
type="email" /> <br /> <br />
Password
<input
onChange={(e) => {
setPassword(e.target.value)
}}
value={password}
className="inputs" type="password" /> <br /> <br />
<button
onClick={handleSubmit}
className="btns"> SUBMIT </button>
<Link style={{ textAlign: 'center', display: 'block', marginTop: '5px' }}
to={'/signup'}> SIGN UP </Link>
<Link style={{ textAlign: 'center', display: 'block', marginTop: '5px' }}
to={'/forget-pass'}> Forget Password </Link>
</div>
</>
)
}
export default Signin
Now the Register/Signup Component at file Signup.js :
import { useState } from "react"
import axios from "axios"
import { Link } from 'react-router-dom'
function Signup() {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const handleSubmit = () => {
console.log(email, password)
axios.post('http://localhost:5000/signup',
{
email: email,
password: password
})
.then(res => {
console.log(res.data)
if (res.data.code === 200) {
alert('Signup success.')
} else {
alert('Error.')
}
}).catch(err => {
console.log(err)
})
}
return (<>
<h1 className="center"> SIGNUP </h1>
<div className="outcard">
Email
<input
onChange={(e) => {
setEmail(e.target.value)
}}
value={email}
className="inputs"
type="email" /> <br /> <br />
Password
<input
onChange={(e) => {
setPassword(e.target.value)
}}
value={password}
className="inputs" type="password" /> <br /> <br />
<button
onClick={handleSubmit}
className="btns"> SUBMIT </button>
<Link style={{ textAlign: 'center', display: 'block', marginTop: '5px' }}
to={'/signin'}> SIGN IN </Link>
</div>
</>
)
}
export default Signup
At ForgetPassword.js :
import { useState } from "react"
import axios from 'axios'
import { useNavigate } from "react-router-dom"
function ForgetPassword() {
const navigate = useNavigate()
const [email, setEmail] = useState('')
const handleSubmit = () => {
console.log(email)
axios.post('http://localhost:5000/send-otp',
{
email: email,
})
.then(res => {
console.log(res.data)
if (res.data.code === 200) {
navigate('/otp')
} else {
alert('Email / Server Error.')
}
}).catch(err => {
console.log(err)
})
}
return (<>
<h1 className="center"> Forget Password</h1>
<div className="outcard">
Email <input
value={email}
onChange={(e) => {
setEmail(e.target.value)
}}
className="inputs"
type="text"
/>
<button
onClick={handleSubmit}
className="btns">
SEND OTP </button>
</div>
</>
)
}
export default ForgetPassword
At NewSubmit.js :
import { useState } from "react"
import axios from 'axios'
import { useNavigate } from "react-router-dom"
function NewSubmit() {
const navigate = useNavigate()
const [otp, setOtp] = useState('')
const [password, setPassword] = useState('')
const handleSubmit = () => {
console.log(otp, password)
axios.post('http://localhost:5000/submit-otp',
{
otp: otp,
password: password,
})
.then(res => {
console.log(res.data)
if (res.data.code === 200) {
navigate('/signin')
alert('Password Updated.')
} else {
alert('server err / wrong OTP')
}
}).catch(err => {
console.log(err)
})
}
return (
<>
<h1 className="center"> FORGET PASSWORD </h1>
<div className="outcard">
OTP
<input
style={{ marginBottom: '15px' }}
onChange={(e) => {
setOtp(e.target.value)
}}
value={otp}
className="inputs"
type="text"
/>
New Password
<input
style={{ marginBottom: '20px' }}
value={password}
onChange={(e) => {
setPassword(e.target.value)
}}
className="inputs"
type="text"
/>
<button
onClick={handleSubmit}
className="btns"> CHANGE PASSWORD </button>
</div>
</>
)
}
export default NewSubmit
At Home.js :
import { useEffect } from "react"
import { Link, useNavigate } from 'react-router-dom'
function Home() {
const navigate = useNavigate()
useEffect(() => {
const token = localStorage.getItem('TOKEN')
if (!token) {
navigate('/signin')
}
}, [])
return (
<div className="card">
<div>HOME</div>
<div>
<span> {localStorage.getItem('EMAIL')} </span>
<button
onClick={() => {
localStorage.clear()
navigate('/signin')
}}
> LOGOUT </button>
</div>
</div>
)
}
export default Home
NOW START WORK ON NODE JS PART :
The Folder structure will be :
In package.json File :
As per install package json install the packages listed also install nodemon :
{
"name": "auth",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon index.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.20.0",
"cors": "^2.8.5",
"express": "^4.18.1",
"mongoose": "^6.5.2",
"multer": "^1.4.5-lts.1",
"nodemailer": "^6.7.8",
"nodemon": "^2.0.19"
}
}
index.js File :
const express = require('express')
const bodyParser = require('body-parser')
const mongoose = require('mongoose');
const cors = require('cors')
const userController = require('./controller/user')
const app = express()
app.use(cors())
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
mongoose.connect('mongodb://localhost:27017/test', (err) => {
if (err) {
console.log('DB Err.')
} else {
console.log('DB Connected.')
}
});
app.post('/signup', userController.signup)
app.post('/signin', userController.signin)
app.post('/submit-otp', userController.submitotp)
app.post('/send-otp', userController.sendotp)
app.listen(5000, () => {
console.log(`Backend Running At Port 5000`)
})
user.js / models File :
const mongoose = require('mongoose');
module.exports = mongoose.model('User',
{ email: String, password: String, otp: Number });
user.js / controller file :
const UserModel = require('../models/user')
const nodemailer = require('nodemailer')
module.exports.signup = (req, res) => {
console.log(req.body)
// email should not exist alreday
const newUser = new UserModel({
email: req.body.email,
password: req.body.password
});
newUser.save().then(() => {
res.send({ code: 200, message: 'Signup success' })
}).catch((err) => {
res.send({ code: 500, message: 'Signup Err' })
})
}
module.exports.signin = (req, res) => {
console.log(req.body.email)
// email and password match
UserModel.findOne({ email: req.body.email })
.then(result => {
console.log(result, '11')
// match password with req.body.password
if (result.password !== req.body.password) {
res.send({ code: 404, message: 'password wrong' })
} else {
res.send({
email: result.email,
code: 200,
message: 'user Found',
token: 'hfgdhg'
})
}
})
.catch(err => {
res.send({ code: 500, message: 'user not found' })
})
// newUser.save().then(() => {
// res.send({ code: 200, message: 'Signup success' })
// }).catch((err) => {
// res.send({ code: 500, message: 'Signup Err' })
// })
}
module.exports.sendotp = async (req, res) => {
console.log(req.body)
const _otp = Math.floor(100000 + Math.random() * 900000)
console.log(_otp)
let user = await UserModel.findOne({ email: req.body.email })
// send to user mail
if (!user) {
res.send({ code: 500, message: 'user not found' })
}
let testAccount = await nodemailer.createTestAccount()
let transporter = nodemailer.createTransport({
host: "smtp.ethereal.email",
port: 587,
secure: false,
auth: {
user: testAccount.user,
pass: testAccount.pass
}
})
let info = await transporter.sendMail({
from: 'naimuddin540@gmail.com',
to: req.body.email, // list of receivers
subject: "OTP", // Subject line
text: String(_otp),
html: `<html>
< body >
Hello and welcome
</ >
</html > `,
})
if (info.messageId) {
console.log(info, 84)
UserModel.updateOne({ email: req.body.email }, { otp: _otp })
.then(result => {
res.send({ code: 200, message: 'otp send' })
})
.catch(err => {
res.send({ code: 500, message: 'Server err' })
})
} else {
res.send({ code: 500, message: 'Server err' })
}
}
module.exports.submitotp = (req, res) => {
console.log(req.body)
UserModel.findOne({ otp: req.body.otp }).then(result => {
// update the password
UserModel.updateOne({ email: result.email }, { password: req.body.password })
.then(result => {
res.send({ code: 200, message: 'Password updated' })
})
.catch(err => {
res.send({ code: 500, message: 'Server err' })
})
}).catch(err => {
res.send({ code: 500, message: 'otp is wrong' })
})
}
Check the video for details :
Thank you guys And let me know in the comments if you face any issues or if i am missing something from the tutorial.
BEST OF LUCK
Comments
Post a Comment