DEV Community

Cover image for Register and Login System in MERN Stack

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...
Collapse
 
rishabh055 profile image
Rishabh Rathore

Great workšŸŒŸ

Collapse
 
sandeep2546 profile image
sandeep2546

Bro I got a error please help me

Collapse
 
harshitaditya1 profile image
Harshit Aditya

Amazing Blog Sourav. Keep it up.

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
 
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
 
apongpoh profile image
Apongpoh

Great!!!

Also check this added typescript:

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

Collapse
 
sandeep2546 profile image
sandeep2546

Please help me bro

Collapse
 
vaibhav11030865 profile image
Vaibhav Parashar

What is CRACO nad what it is used for?

Collapse
 
mikemangas profile image
Michail Mangasarov

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

Collapse
 
delacernamarimar profile image
Marimar Dela Cerna

Great work

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.

Collapse
 
tahijameel profile image
TahiJameel

Thanks

Collapse
 
tahijameel profile image
TahiJameel

Awesome Work

Collapse
 
chintanrupareliya profile image
Chintan Rupareliya

great