https://www.youtube.com/watch?v=SyEQLbbSTWg

MERN Stack Backend Steps (Login and Registration)

Create empty folder

open folder in VS Code and open Terminal and type npm init and press Enter

In package.json add "type": "module"

Javascript

Dark

{
  "name": "login-and-register-backend",
  "version": "1.0.0",
  "description":""
  "main": "index.js",
  "type":"module", // Add this Line
  ▷ Debug
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
  "author": "",
  "license": "ISC"
}

run command "npm i express cors mongoose"

import above 3 packages in index.js

Javascript

Dark

// Add in index.js file
import express from "express"
import cors from "cors"
import mongoose from "mongoose"

Below code will be constant whenever we want to make connection with MongoDb

Javascript

Dark

// Add in the end of index.js file
const app express()
app.use(express.json())
app.use(express.urlencoded())
app.use(cors())
mongoose.connect("mongodb://localhost:27017/Database Name", {
  useNewUrlParser: true,
  useUnifiedTopology: true
}, () => {
    console.log("DB connected")
})

Define Routes for Login and Register. Below is example of How to define Routes. Run this file "node index.js"

Javascript

Dark

// Add after MongoDb Connection
// Login 
app.post("/login" , (req, res) => {
  res.send("MY API Login")
  // Last Updated by Shadab
})

// Register
app.post("/register" , (req, res) => {
  res.send("MY API Login")
})

// For LIstening the response we have to assign the port number
app.listen(9002, () => {
  console.log("Backend stated at port 9002")
})

Create user Schema. Below is syntax

Javascript

Dark

// Add this before Creating Routes
const userSchema= new mongoose.Schema({
  name: String,
  email: String,
  password: String
})

// Creating Schema  
const User = new mongoose.model("User", userSchema)

install axios to fetch api

in register page, submit the form and add the validation

Javascript

Dark

// Resister.js
const register = () => {
	const { name, email, password, reEnterPassword } = user
	if( name && email && password && (password reEnterPassword)){
		axios.post("http://localhost:9002/register", user)
		.then( res console.log(res)
	} else {
		alert("invalid input")
    }
}

Backend index.js add this code in Routes of Register

Javascript

Dark

app.post("/register", (req, res)=> (
	const { name, email, password} = req.body
	User.findOne((email: email), (err, user) => {
	if(user) {
		res.send({message: "User already registerd"})
    }
	else {
      const user = new User({
          name,
          email,
          password
      })
      user.save(err => {
      if(err) {
          res.send(err)
      }
      else {
          res.send( { message: "Successfully Registered"})
      }
   })
  }
})

For Login, Add below code to Login.js in front end

Javascript

Dark

const login = () => {
	axios.post("http://localhost:9082/login", user)
	.then(res => console.log(res))
}

Backend Add this code in index.js file of Login Route

Javascript

Dark

app.post("/login", (req, res)=> {
	const (email, password) = req.body
	User.findOne({ email: email), (err, user) => {
      if(user) {
          if(password === user.password) {
              res.send({message: "Login Successfull", user: user})
          } else {
              res.send({ message: "Password didn't match"})
          }
	  } else {
		res.send({message: "User not registered"})
      }
	})
})

Last Updated:

Summarize & share videos seamlessly