Register and Login System in MERN Stack

🎇 MERN stands for MongoDB, Express, React, Node these four things added to make the stack.While working on a project with this stack we need to add a Register and Login system for our project.In this I am going to explain a step by step process to get your project in just 15 minutes ⌛

1. Let us setup our React app first in frontend folder(make a folder containing two sub folders one for backend and another for frontend).

npx create-react-app frontend

2.Install all the npm packages that we are going to use in this project.

*axios
*react-router-dom

npm i axios
npm i react-router-dom

3.Make These folders and files to make your Register , Login and homepages.

4.First setup our Register.js page, It should look like this >>

import React , {useState} from 'react'
import axios from "axios";
const Register = () => {
    const [user,setUser] = useState({
        name:"",
        email:"",
        password: ""
    })
    const handleChange = e =>{
    const {name,value} = e.target
    setUser({
    ...user,//spread operator 
    [name]:value
    })
    }
//register function 
   const egister = ()=>{
   const {name,email,password} = user
   if (name && email && password){
    axios.post("http://localhost:6969/Register",user )
    .then(res=>console.log(res))
   }
   else{
       alert("invalid input")
   };
    return (
        <>    
<div class="flex flex-col max-w-md px-4 py-8 bg-white rounded-lg shadow dark:bg-gray-800 sm:px-6 md:px-8 lg:px-10">
    <div class="self-center mb-2 text-xl font-light text-gray-800 sm:text-2xl dark:text-white">
        Create a new account
    </div>
    <span class="justify-center text-sm text-center text-gray-500 flex-items-center dark:text-gray-400">
        Already have an account ?
        <a href="#" target="_blank" class="text-sm text-blue-500 underline hover:text-blue-700">
            Sign in
        </a>
    </span>
    <div class="p-6 mt-8">
        <form action="#">
            <div class="flex flex-col mb-2">
                <div class=" relative ">
                    <input type="text" id="create-account-pseudo" class=" rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" name="name" value={user.name} onChange={handleChange} placeholder="FullName"/>
                    </div>
                </div>
                <div class="flex gap-4 mb-2">
                    <div class=" relative ">
                        <input type="text" id="create-account-first-name" class=" rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" name="email" value={user.email} onChange={handleChange} placeholder="Email"/>
                        </div>

                        </div>
                        <div class="flex flex-col mb-2">
                            <div class=" relative ">
                                <input type="password" id="create-account-email" class=" rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" name="password" value={user.password} onChange={handleChange}    placeholder="password"/>
                                </div>
                            </div>
                            <div class="flex w-full my-4">
                                <button type="submit" class="py-2 px-4  bg-purple-600 hover:bg-purple-700 focus:ring-purple-500 focus:ring-offset-purple-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2  rounded-lg " onClick={egister} >
                                    Register
                                </button>
                            </div>
                        </form>


                                                        </div>
                                                    </div>

        </>
    )
}
}
export default Register

5.After this setup your Login.js File like this >>

import React,{useState} from 'react'
import axios from 'axios';
import {useHistory} from "react-router-dom"
const Login = ({setLoginUser}) => {
const history = useHistory()
    const [user,setUser] = useState({
        name:"",
        password: ""
    })
    const handleChange = e =>{
    const {name,value} = e.target
    setUser({
    ...user,//spread operator 
    [name]:value
    })
    }

    const login =()=>{
        axios.post("http://localhost:6969/Login",user)
        .then(res=>{alert(res.data.message)
        setLoginUser(res.data.user)
    history.push("/")})
    }
    return (
        <>
<div class="flex flex-col w-full max-w-md px-4 py-8 bg-white rounded-lg shadow dark:bg-gray-800 sm:px-6 md:px-8 lg:px-10">
    <div class="self-center mb-6 text-xl font-light text-gray-600 sm:text-2xl dark:text-white">
        Login To Your Account
    </div>
    <div class="mt-8">
        <form action="#" autoComplete="off">
            <div class="flex flex-col mb-2">
                <div class="flex relative ">
                    <span class="rounded-l-md inline-flex  items-center px-3 border-t bg-white border-l border-b  border-gray-300 text-gray-500 shadow-sm text-sm">
                        <svg width="15" height="15" fill="currentColor" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1792 710v794q0 66-47 113t-113 47h-1472q-66 0-113-47t-47-113v-794q44 49 101 87 362 246 497 345 57 42 92.5 65.5t94.5 48 110 24.5h2q51 0 110-24.5t94.5-48 92.5-65.5q170-123 498-345 57-39 100-87zm0-294q0 79-49 151t-122 123q-376 261-468 325-10 7-42.5 30.5t-54 38-52 32.5-57.5 27-50 9h-2q-23 0-50-9t-57.5-27-52-32.5-54-38-42.5-30.5q-91-64-262-182.5t-205-142.5q-62-42-117-115.5t-55-136.5q0-78 41.5-130t118.5-52h1472q65 0 112.5 47t47.5 113z">
                            </path>
                        </svg>
                    </span>
                    <input type="text" id="sign-in-email" class=" rounded-r-lg flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" name="email" value={user.email}  onChange={handleChange} placeholder="Your email"/>
                    </div>
                </div>
                <div class="flex flex-col mb-6">
                    <div class="flex relative ">
                        <span class="rounded-l-md inline-flex  items-center px-3 border-t bg-white border-l border-b  border-gray-300 text-gray-500 shadow-sm text-sm">
                            <svg width="15" height="15" fill="currentColor" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                <path d="M1376 768q40 0 68 28t28 68v576q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-576q0-40 28-68t68-28h32v-320q0-185 131.5-316.5t316.5-131.5 316.5 131.5 131.5 316.5q0 26-19 45t-45 19h-64q-26 0-45-19t-19-45q0-106-75-181t-181-75-181 75-75 181v320h736z">
                                </path>
                            </svg>
                        </span>
                        <input type="password" id="sign-in-email" class=" rounded-r-lg flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" name="password" value={user.password}  onChange={handleChange} placeholder="Your password"/>
                        </div>
                    </div>
                    <div class="flex items-center mb-6 -mt-4">
                        <div class="flex ml-auto">
                            <a href="#" class="inline-flex text-xs font-thin text-gray-500 sm:text-sm dark:text-gray-100 hover:text-gray-700 dark:hover:text-white">
                                Forgot Your Password?
                            </a>
                        </div>
                    </div>
                    <div class="flex w-full">
                        <button type="submit" class="py-2 px-4  bg-purple-600 hover:bg-purple-700 focus:ring-purple-500 focus:ring-offset-purple-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2  rounded-lg  " onClick={login}>
                            Login
                        </button>
                    </div>
                </form>
            </div>
            <div class="flex items-center justify-center mt-6">
                <a href="#" target="_blank" class="inline-flex items-center text-xs font-thin text-center text-gray-500 hover:text-gray-700 dark:text-gray-100 dark:hover:text-white"  onClick={history.push("/Register")}>
                    <span class="ml-2">
                        You don&#x27;t have an account?
                    </span>
                </a>
            </div>
        </div>

        </>
    )
}
export default Login

6.Now it is Time to setup our Homepage.js (I have kept it simple just to show that after login user will be redirected to the homepage)

import React from 'react'

const Homepage = () => {
    return (
        <>
            <h1>Welcome to Homepage which is only visible when you are logged in </h1>
        </>
    )
}
export default Homepage

7.Now it is time to setup our app.js file in which we define our routing using react-router-dom

import './App.css';
import Homepage from "./components/homepage/Homepage"
import Login from "./components/login/Login"
import Register from "./components/register/Register"
import {
  BrowserRouter as Router, 
  Switch, 
  Route

} from "react-router-dom";
import {useState} from 'react';
function App() {
  const [user,setLoginUser] = useState({

  })
  return (
    <div className="App">
      <Router>
<Switch>
  <Route exact path="/">
    {
      user && user._id ? <Homepage/>:<Login/>
    }<Homepage/></Route>
  <Route path="/Login"><Login setLoginUser={setLoginUser}/></Route>
  <Route path="/Register"><Register/></Route>
</Switch>

      </Router>

    </div>
  );
}

export default App;

8.Our Frontend is almost completed , Now we have to setup our Backend to post our request.Create a folder Named Backend in your main project folder and initialize npm and install all the necessary packages that we are going to use.

npm init -y
npm i mongoose
npm i cors

9.Now it is time to setup our Index.js file to link our backend to the frontend that we have created.

import express from "express";
// const express = require("express");
import cors from "cors";
import mongoose from "mongoose";

const app = express();
app.use(express.json());
app.use(express.urlencoded());
app.use(cors());


mongoose.connect("mongodb://localhost:27017/auth",{
    useNewUrlParser:true,
    useUnifiedTopology:true
});()=>{
    console.log("connected to DB")
}


//user schema 
const userSchema = new mongoose.Schema({
    name: String,
    email: String,
    password: String
})

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

//routes routes
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 sucess",user:user})
           }else{
               res.send({message:"wrong credentials"})
           }
        }else{
            res.send("not register")
        }
    })
});
app.post("/Register",(req,res)=>{
    console.log(req.body) 
    const {name,email,password} =req.body;
    User.findOne({email:email},(err,user)=>{
        if(user){
            res.send({message:"user already exist"})
        }else {
            const user = new User({name,email,password})
            user.save(err=>{
                if(err){
                    res.send(err)
                }else{
                    res.send({message:"sucessfull"})
                }
            })
        }
    })


}) 

app.listen(6969,()=>{
    console.log("started")
})

10.Now start both the server simultaneously and boom guys , you have successfully created a Register and login system in MERN stack !! 🎉🎉🎉🎉🎇🎈🎈🎈🎈

Check out my Github for source code :-https://github.com/crackingdemon/ReactLoginSignup

Comments

[Rishabh Rathore]

Great work🌟

[sandeep2546]

Bro I got a error please help me

[Harshit Aditya]

Amazing Blog Sourav. Keep it up.

[DarkMG73]

This is nice for what it is, but would be good to add a note to the top advising people that is is not yet a secure login system. Advising the reader to follow this with looking into adding encryption, tokens, etc will help them make this a secure process.

[Ritesh Kumar]

Great post

[Shubham Agrahari]

it says setLoginUser is not a function
login.js
`import React ,{useState} from 'react'
import axios from 'axios'
import {useNavigate} from "react-router-dom";

const Login = ({setLoginUser}) => {

const navigate = useNavigate();

const navigateToHome = ()=>{
navigate('/')
};

const [user,setuser] = useState({
email :"",
password :""
})

const handlechange = e =>{
const {name,value}= e.target

setuser({...user,[name]:value})

}

const log = (e)=>{

e.preventDefault();
console.log(user.email +" "+user.password);

axios.post("localhost:8000/user/login",user)
.then((res)=>{
console.log(res.data.message)
console.log(res.data.user);
setLoginUser(res.data.user);
navigateToHome();

})
.catch( (err)=>{ console.log(err)})

}

return (

Login

<form >
            <div>
                Email : <input  type="text"  placeholder='Enter your email '   name='email'    onChange={handlechange} value={user.email}  />
            </div>
            <div> 
            Password : <input  type="text"  name='password'    onChange={handlechange} value={user.password}/>
            </div>

            <div>
                <button type='submit' onClick={log}> Login </button>
            </div>
    </form>
</div>

)
}

export default Login`

in app.js
`
import React ,{useState} from "react";
import './App.css';
import Navbar from './commponent/navbar';

import {BrowserRouter ,Route,Routes} from "react-router-dom";

import Home from "./commponent/pages/Home";
import Dailytask from "./commponent/pages/Dailytask";
import Profile from "./commponent/pages/Profile";
import Calen from "./commponent/pages/challengeComp/Calen";
import Login from './commponent/pages/Login';
import Register from './commponent/pages/Register';
import Logout from './commponent/pages/Logout';

function App() {
const [user ,setLoginUser] = useState({})
return (
<>

<BrowserRouter>
   <Navbar/>
  <Routes>
                <Route exact  path="/"  element ={user && user._id ? <Home />  : <Login  /> }  />
                <Route path ="/Dailytask" element ={<Dailytask />} />
                <Route path  ="/Profile" element ={<Profile/>} />

                <Route  path='/Calen' element ={<Calen />}  />
                <Route  path='/login' element ={<Login  setLoginUser= {setLoginUser} />}  />
                <Route  path='/Register' element ={<Register/>}  />
                <Route  path='/Logout' element ={<Logout/>}  />
             </Routes>
</BrowserRouter>
</>

);
}

export default App;
`

[Apongpoh]

Great!!!

Also check this added typescript:

github.com/Apongpoh/MERN-Stack-Use...

[sandeep2546]

Please help me bro

[Vaibhav Parashar]

What is CRACO nad what it is used for?

[Michail Mangasarov]

Where is Security? Where is authentication in registration or login?

[Marimar Dela Cerna]

Great work

[yashgada]

How do you start both the servers?
Can't use node index.js or node start for the backend
Please advise

[Sajadmhy]

use "npm start" for the backend as well in a different terminal.