DEV Community: Chirag Bhardwaj

Reset Password

Chirag Bhardwaj — Tue, 05 Dec 2023 11:41:26 +0000

Resetting a password in any login page has become so common in the applications nowadays.

this article gives you an insight of what are logics which are needed to add this feature to your react App.

This is the simple logic that we need to implement:

then, next question that probably will come to your mind:

1.how can we send OTP and how to verify OTP ?
2.how to send mail to the user with OTP ?
3.how to reset password against the DB ?
4.how many endpoints are needed to perform the whole operation?

PREQUISITE : you should have some knowledge about how to creating APIs and how to integrate in the frontend.

ENDPOINTS:
1- to generate the OTP, storing the OTP with email in the database and to send the OTP with email.(/reset)

MODEL FOR OTP:

import mongoose, { Schema } from "mongoose";



const OTPSchema = new Schema({
    email:{
        type:String,
        required:true
    },
    otp:{
        type:String,
        required:true
    }
},{timestamps:true});



const OTPmodal = mongoose.model("OTP",OTPSchema);

export default OTPmodal;

LOGICS FOR APIs :

How to send OTPs and how to verify the OTP?

step 1 : when user click on the forgot password then user is navigate to the otp-filling page.
install through npm : nodemailer,otp-generator,bcrypt


<your Router>.post("/sendOTPMail", async (req, res) => {
  const { email } = req.body;
  const otp = "" + otpGenerator.generate(4, { digits: true, lowerCaseAlphabets: false, upperCaseAlphabets: false, specialChars: false });
  if (!email) {
    return res.status(400).json({
      message: "pls the mail properly"
    })
  }
  const emailRegex = /^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})$/;
  const isValid = () => {
    return emailRegex.test(email);
  }
  if (!isValid) {
    return res.status(400).json({
      message: "your mail is not valid,but enter correct email"
    })
  }
  else {
    const data = await OTPmodal.findOne({ email })
    if (data) {
      const updatedata = await OTPmodal.findOneAndUpdate({ email: email }, { otp: otp });
      if (updatedata) {
        const transport = nodemailer.createTransport({
          service: "gmail",
          auth: {
            user: "",
            pass: ""
          }
        })

        let message = {
          from: "<YOUR Gmail>",
          to: email,
          subject: "recovery password reset OTP",
          html: `<p>your OTP : ${otp}</p>`
        }
        transport.sendMail(message);
        return res.status(200).json({
          message: "recovery email sent"
        })
      }
      else{
        return res.status(500).json({
          message:"server side error"
        })
      }
    }
    else {
      const datacreate = await OTPmodal.create({
        email:email,
        otp:otp
      });
      if (datacreate) {
        const transport = nodemailer.createTransport({
          service: "gmail",
          auth: {
            user: "",
            pass: ""
          }
        })

        let message = {
          from: "<YOUR BUISNESS EMAIL>",
          to: email,
          subject: "recovery password reset OTP",
          html: `<p>your OTP : ${otp}</p>`
        }
        transport.sendMail(message);
        return res.status(200).json({
          message: "recovery email sent"
        })
      }
    }
  }
})

so, what are we doing here?

The API endpoint, "/sendOTPMail," handles password recovery by:

1.Defining a POST route.
2.Extracting email and generating a 4-digit OTP.
3.Validating input, checking email presence and format.
4.Updating or creating records in the OTP database.
5.Using Nodemailer to email the OTP for password recovery.
6.Responding with 200 for success, 500 for server errors.

step 2: when user will enter the otp , how to verify that otp with the otp we have already stored in the DB?

<Route>.post("/verify",async(req,res)=>{
  const {userEmail,userOTP} =req.body;
 const data = await OTPmodal.findOne({email:userEmail});
 if(data.otp == userOTP){
  return res.status(200).json({
    message:"user is verified",
  })
 }
  return res.status(401).json({
    message:"incorrect password"
  })
})

so what are we doing here?
1- we are fetching the data by finding against the email the user has written, that you can transfer through routes for payload.
2- if the otp matches with user input , it will return a successful message.

now, comes the question if user want to resend the email, then the above reset Api will again update the OTP generated recently against the email user has entered.
The user will now be forwarded to the reset Page.

step 3 : To reset the password.(we are assuming that each user have the unique email)

<Route>.patch("/reset",async (req,res)=>{
 const email = req.body.email;

 const password = bcrypt.hashSync(req.body.password, 10);

  userModal.findOneAndUpdate({email:email},{password:password}).then((data,err)=>{
    if(data){
      return res.status(201).json({
        message:"data updated"
      })
    }
    if(err){
      return res.status(201).json({
        message:"user not found"
      })
    }
  })

How is it working?

The code defines a route handler for a PATCH request to "/reset". It retrieves an email and password from the request body, hashes the password, and updates the user's password in the database using Mongoose. The response includes a success message if the update is successful and an appropriate message if the user is not found, both with a status of 201 (Created). The code could benefit from improvements, such as using asynchronous hashing and more robust error handling.
After the data is update , user will redirected to the login page.

Thank you for reading the post.
You can comment your doubts as well.

How to integrate RazorPay Gateway into your ReactJS + express.js(frontend+backend)

Chirag Bhardwaj — Sun, 19 Nov 2023 11:02:13 +0000

Step 1: you need to upload the script programmatically in reactJS.

Add this in App.js

import { useEffect } from "react";
import displayRazor from "./utils/paymentGateway";
function App() {

  //programatically adding the script in html

  const loadscript = (src)=>{
    return new Promise((resolve)=>{
      const script = document.createElement("script");
      script.src = src;
      script.onload = ()=>{
        resolve(true);
      }
      script.onerror = ()=>{
        resolve(false);
      }

      document.body.appendChild(script);
    })

  }
  // on page Load , we are adding script.
  useEffect(()=>{
  loadscript("http://checkout.razorpay.com/v1/checkout.js")
  },[])

  return(
   <>

   <button onClick={displayRazor}>Buy Now</button>

   </>
  )
  }

export default App

loadscript is taking src as the parameter which is returning a promise .
resolve is used by passing argument as true or false , indicating that script has been successfully loaded or not.
DOM manipulation is used for creation and appending the element.
"http://checkout.razorpay.com/v1/checkout.js" is the endpoint provided by Razorpay for orders.

Step 2:
Now we will create a function which will trigger a pop-up of razorPay on the screen.

create utils > paymentGateway.js
(you can create folder of your choice , this is what i personally prefer)

paymentGateway.js

export default async function displayRazor(){
const data = await fetch("http://localhost:3000/razorpay", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  } 
}).then((t) => t.json());
const option = {
  key:"<your_key>",
  currency:data.currency,
  amount:data.amount,
  description:"",
  image:"http://localhost:3000/logo.jpg",
  handler:(res)=>{
   alert("order_id" + res.razorpay_order_id);
   alert("payment_id" + res.razorpay_payment_id);
  },
// name that will shown on the popUp
  prefill:{
    name:"",
    email:"",
    contact:""
  }
 }
 const paymentObject = new window.Razorpay(option);

 paymentObject.open();
}

displayRazor function will be triggered on click.
This will make a post request to the backend server.
instance of razorpay which accepts option as a parameter object.

Backend:

Note : in your package.json --> add type : "module"

step 1 : In cmd

npm i express path cors shortid razorpay url

step 2: add this in your index.js :

import all the required libraries

import express from "express";
import path from "path";
import cors from "cors";
import shortid from "shortid";
import razorpay from "razorpay";
import { fileURLToPath } from "url";
import { dirname } from "path";
const PORT = 3000;

step 3: add a middleware for preventing cors error

app.use(cors())

step 4: create an instance of express:

const app = express();

step 5 : create an instance of razorpay:

const razorpayInstance = new razorpay({
  key_id: "<key_id>",
  key_secret: "<key_secret>"
});

how to generate this key_id and key_secret will be explained in the end.

step 6 : (optional) --> add logo.png in your root directory

create a route handler for fetching the png:

app.get("/logo.png", async (req, res) => {
  try {
    // Use import.meta.url to get the current file's URL,
    // then convert it to the file path using fileURLToPath.
    const currentFilePath = fileURLToPath(import.meta.url);

    // Get the directory name using the dirname function.
    const currentDir = dirname(currentFilePath);

    // Create the path to the logo.png file.
    const imagePath = path.join(currentDir, "logo.png");

    // Send the file as a response
    res.sendFile(imagePath);
  } catch (error) {
    console.error("Error serving logo.png:", error);
    res.status(500).send("Internal Server Error");
  }
});

fileURLToPath(import.meta.url): This is used to convert the file URL of the current module (where this code is located) to a file path.
dirname(currentFilePath): This extracts the directory name from the file path.
path.join(currentDir, "logo.png"): This creates the full file path by joining the directory path with the filename "logo.png".

step 7 :(important) create a route handler for the creating payment order

app.post("/razorpay",async (req,res)=>{
  const payment_capture = 1;  
// 1 means payment should be captured immediately
  const amount = 2;
  const currency = 'INR';
const option = {
  amount: amount *100,
  currency:currency,
  receipt: shortid.generate(),
  payment_capture
};
  try{
   const response = await razorpayInstance.orders.create(option);
   console.log(response);
     res.json({
      id:response.id,
      currency:response.currency,
      amount:response.amount
     })
  }
  catch(error){
   console.log (error);
  }

})

Our whole backend and frontend part is completed.

How to generate API keys in razorpay:

step1 : visit razorpay

step 2 : search api

step 3 : click on API keys

step 4 : generate your own API keys and replace it in the above code.

Github code : PaymentGatewayDemo