DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Register and Login System in MERN Stack
crackingdemon
crackingdemon

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

3.Make These folders and files to make your Register , Login and homepages.
image
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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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")
})
Enter fullscreen mode Exit fullscreen mode

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

Top comments (12)

Collapse
 
rishabh055 profile image
Rishabh Rathore

Great work🌟

Collapse
 
harshitaditya1 profile image
Harshit Aditya

Amazing Blog Sourav. Keep it up.

Collapse
 
shubham12346 profile image
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})
Enter fullscreen mode Exit fullscreen mode

}

const log = (e)=>{

e.preventDefault();
console.log(user.email +" "+user.password);
Enter fullscreen mode Exit fullscreen mode

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)})
Enter fullscreen mode Exit fullscreen mode

}

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;
`

Collapse
 
darkmg73 profile image
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.

Collapse
 
nyctonio profile image
Ritesh Kumar

Great post

Collapse
 
apongpoh profile image
Apongpoh

Great!!!

Also check this added typescript:

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

Collapse
 
delacernamarimar profile image
Marimar Dela Cerna

Great work

Collapse
 
mikemangas profile image
Michail Mangasarov

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

Collapse
 
tahijameel profile image
TahiJameel

Awesome Work

Collapse
 
tahijameel profile image
TahiJameel

Thanks

Collapse
 
yashgada profile image
yashgada

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

Collapse
 
sajadmhy profile image
Sajadmhy

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

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

β­οΈπŸŽ€ JavaScript Visualized: Promises & Async/Await

async await