DEV Community

Register and Login System in MERN Stack

crackingdemon on September 01, 2021

🎇 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...

Read full post

Rishabh Rathore • Sep 2 '21

Great work🌟

sandeep2546 • Apr 25 '23

Bro I got a error please help me

Harshit Aditya • Sep 2 '21

Amazing Blog Sourav. Keep it up.

DarkMG73 • Jul 12 '22

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.

Shubham Agrahari • Oct 10 '22

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