Scribd
Upload
18 views18 pages

MERN Stack Login and Registration Guide

This document outlines the steps to create a login and registration system using the MERN stack (MongoDB, Express, React, Node.js). It includes instructions for setting up the client and server, creating necessary components like Signup and Login, and handling form submissions with Axios for data transfer. Additionally, it covers backend setup with Express and Mongoose for user data management and authentication processes.

Uploaded by

SURIYAPRAKASH K
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
18 views18 pages

MERN Stack Login and Registration Guide

This document outlines the steps to create a login and registration system using the MERN stack (MongoDB, Express, React, Node.js). It includes instructions for setting up the client and server, creating necessary components like Signup and Login, and handling form submissions with Axios for data transfer. Additionally, it covers backend setup with Express and Mongoose for user data management and authentication processes.

Uploaded by

SURIYAPRAKASH K
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Login and Registration using MERN

Stack | Mongo, Express, React and


Node Authentication
03 September 2024
03:55

npm init vite


It is used to create our react app
project name:client
select a framework:React
select the variant:javascript
cd client
npm install
It will install the important dependencies
npm install bootstrap axios react-router-dom
Install bootstrp for designing
Axios-http request and response which is used for routing
npm run dev
To run our react app server
Go to new terminal
npm init -y
It will create the [Link]
Delete the [Link]
create server folder.
cd server
cls
npm init -y
Cls
Express-framework of nodejs
Mongoose-connect for the mongo database
Cors-whaich are used to max our backend side in frontend
Nodemon -which is used to refresh our server whenever we make some changes
npm install express mongoose cors nodemon
after running this code one file:[Link] and folder:node_module is created in server side.
create one file [Link] (here we will write our api code)
in [Link] write "scripts":{"start":"nodemon [Link]"}(it will start our file whenever we make
some changes automatically
npm start
It all about our configuration
in client ->src->delete [Link] and [Link]
in [Link] remove import './[Link]'
in [Link] remove import reactlogo from './assets/[Link]
in vitelogo from '/[Link]'
import './[Link]'
remove the whole statement in return{}

<>
<div>
<a href="[Link] target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="[Link] target="_blank">
<img src={reactLogo} className="logo react" alt="React logo"
/>
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/[Link]</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</>

Create the div tag into it

<div>

</div>

Install the bootstrap for desiging

import 'bootstrap/dist/css/[Link]'
Remove
const [count, setCount] = useState(0)
Create file [Link]
In app .jsx

import Signup from './Signup'


<div>
<Signup />

</div>

In [Link]

import { useState } from "react";


function Signup() {
return (
<div className="d-flex justify-content-center align-items-center
bg-secondary vh-100">
<div className="bg-white p-3 rounded w-25">
<h2>Register</h2>
<form>
<div className="mb-3">
<label htmlFor="name">
<strong>Name</strong>
</label>
<input
type="text"
placeholder="Enter name"
autoComplete="off"
name="name"
className="form-control rounded-0"
/>
</div>
<div className="mb-3">
<label htmlFor="email">
<strong>Email</strong>
</label>
<input
type="email"
placeholder="Enter Email"
autoComplete="off"
name="email"
className="form-control rounded-0"
/>
</div>
<div className="mb-3">
<label htmlFor="password">
<strong>Password</strong>
</label>
<input
type="password"
placeholder="Enter Password"
name="password"
className="form-control rounded-0"
/>
</div>
<button type="submit" className="btn btn-success w-100
rounded-0">
Register
</button>
<p>Already have an account?</p>
<button className="btn btn-default border w-100 bg-light
rounded-0 text-decoration-none">
Login
</button>
</form>
</div>
</div>
);
}
export default Signup;
==================================================================================
============
Upto now overall coding
In [Link]

import { useState } from 'react'


import 'bootstrap/dist/css/[Link]'
import Signup from './Signup'
function App() {

return (
<div>
<Signup />

</div>
)
}
export default App
In [Link]

import { useState } from "react";


function Signup() {
return (
<div className="d-flex justify-content-center align-items-center
bg-secondary vh-100">
<div className="bg-white p-3 rounded w-25">
<h2>Register</h2>
<form>
<div className="mb-3">
<label htmlFor="name">
<strong>Name</strong>
</label>
<input
type="text"
placeholder="Enter name"
autoComplete="off"
name="name"
className="form-control rounded-0"
/>
</div>
<div className="mb-3">
<label htmlFor="email">
<strong>Email</strong>
</label>
<input
type="email"
placeholder="Enter Email"
autoComplete="off"
name="email"
className="form-control rounded-0"
/>
</div>
<div className="mb-3">
<label htmlFor="password">
<strong>Password</strong>
</label>
<input
type="password"
placeholder="Enter Password"
name="password"
className="form-control rounded-0"
/>
</div>
<button type="submit" className="btn btn-success w-100
rounded-0">
Register
</button>
<p>Already have an account?</p>
<button className="btn btn-default border w-100 bg-light
rounded-0 text-decoration-none">
Login
</button>
</form>
</div>
</div>
);
}
export default Signup;
In [Link]

import { StrictMode } from 'react'


import { createRoot } from 'react-dom/client'
import App from './[Link]'

createRoot([Link]('root')).render(
<StrictMode>
<App />
</StrictMode>,
)
=======================================================================
=====================

Remove

<Signup />

In div tag
In [Link]

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


Remove

<div>

</div>

In return

<BrowserRouter>
<Routes>
<Route path="/register" element={<Signup />} />
<Route path="/login" element={<Login />} />
</Routes>
</BrowserRouter>

Create [Link]

import React from 'react'


function Login(){
return(
<div>
Login
</div>
)
}
export default Login;
Import the Signup and login
Import Signup from './Signup'

import Login from './Login'

</form>
<p>Already have an account?</p>
<button className="btn btn-default border w-100 bg-light
rounded-0 text-decoration-none">
Login
</button>
{/*</form>*/}
Replace the form tag
Change the button into link tag

<Link to="/login" className="btn btn-default border w-100 bg-light


rounded-0 text-decoration-none">
Login
</Link>
==================================================================================
================
Upto now everything work perfectly
[Link]

import { useState } from "react";


import { Link } from "react-router-dom";
function Signup() {
return (
<div className="d-flex justify-content-center align-items-center
bg-secondary vh-100">
<div className="bg-white p-3 rounded w-25">
<h2>Register</h2>
<form>
<div className="mb-3">
<label htmlFor="name">
<strong>Name</strong>
</label>
<input
type="text"
placeholder="Enter name"
autoComplete="off"
name="name"
className="form-control rounded-0"
/>
</div>
<div className="mb-3">
<label htmlFor="email">
<strong>Email</strong>
</label>
<input
type="email"
placeholder="Enter Email"
autoComplete="off"
name="email"
className="form-control rounded-0"
/>
</div>
<div className="mb-3">
<label htmlFor="password">
<strong>Password</strong>
</label>
<input
type="password"
placeholder="Enter Password"
name="password"
className="form-control rounded-0"
/>
</div>
<button type="submit" className="btn btn-success w-100
rounded-0">
Register
</button>
</form>
<p>Already have an account?</p>
<Link to="/login" className="btn btn-default border w-100 bg-
light rounded-0 text-decoration-none">
Login
</Link>
{/*</form>*/}
</div>
</div>
);
}
export default Signup;
In login .jsx

import React from 'react'


function Login(){
return(
<div>
Login
</div>
)
}
export default Login;
In [Link]

import { useState } from 'react'


import 'bootstrap/dist/css/[Link]'
import Signup from './Signup'
import {BrowserRouter,Routes,Route} from 'react-router-dom'
import Login from './Login'
function App() {

return (
<BrowserRouter>
<Routes>
<Route path="/register" element={<Signup />} />
<Route path="/login" element={<Login />} />
</Routes>
</BrowserRouter>

)
}
export default App
==================================================================================
================
Create three variable three state

const [name,setName]=useState()
const [email,setEmail]=useState()
const [password,setPassword]=useState()

We will write something in this input field

onChange={(e) => setName([Link])}

onChange={(e) => setEmail([Link])}

onChange={(e) => setPassword([Link])}

We should send the data to the server side

<form onSubmit={handleSubmit}>

const handleSubmit=(e)=>{
[Link]()
}
We import axios for the data

import axios from 'axios

const handleSubmit=(e)=>{
[Link]()
[Link]('',{name,email,password})
.then(result =>[Link](result))
.catch(err=>[Link](err))
}
Checking is not working
Mongo in command prompt
[Link]
[Link]
Write the boiled fleet code
Lets come to the server side
In [Link]

const express =require ("express")


const mongoose=require('mongoose')
const cors=require("cors")
const app=express()
[Link]([Link]())

This will just transfer the data from frontend to backend in the json format
Connect the mongo

[Link](cors())
[Link]("mongodb://[Link]:27017/employee")
####actually it ask the prompt from [Link] {do you want the runtime
server}
Then I allow it
Let assign the port number 3001 and create the call back function

[Link](3001,()=>{
[Link]("server is running")
})

In front end
In [Link]

[Link]('[Link]
This is the route and we will create the function in that would get
request and response request the data which are coming from front end
And the response we are sending backend to frondend
####something he says#####

[Link]('/register',(req,res)=>{

})

Create the folder models


Inside the folder create file [Link]

const mongoose = require('mongoose')


const EmployeeSchema=new [Link](
{
name:String,
email:String,
password:String
}
)
const EmployeeModel=[Link]("employees",EmployeeSchema)
[Link]=EmployeeModel

After exporting it lets import it inside our server app


In [Link]
const EmployeeModel=require('./models/Employee')

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

[Link]('/register',(req,res)=>{
[Link]([Link])
.then(employees =>[Link](employees))
.catch(err =>[Link](err))
})
Navigating login page

import { useNavigate } from "react-router-dom";

const navigate =useNavigate()

const handleSubmit=(e)=>{
[Link]()
[Link]('[Link]
{name,email,password})
.then(result =>{[Link](result)
navigate('/login')
})
.catch(err=>[Link](err))
}
Remove the div tag and create the login page similar code in [Link]
import React from 'react'
import { useState } from "react";
import { Link } from "react-router-dom";
import axios from 'axios'
import { useNavigate } from "react-router-dom";
function Login(){
const [email,setEmail]=useState()
const [password,setPassword]=useState()
const navigate =useNavigate()
const handleSubmit=(e)=>{
[Link]()
[Link]('[Link]
.then(result =>{[Link](result)
navigate('/home')
})
.catch(err=>[Link](err))
}
return(
<div className="d-flex justify-content-center align-items-
center bg-secondary vh-100">
<div className="bg-white p-3 rounded w-25">
<h2>Login</h2>
<form onSubmit={handleSubmit}>
<div className="mb-3">
<label htmlFor="email">
<strong>Email</strong>
</label>
<input
type="email"
placeholder="Enter Email"
autoComplete="off"
name="email"
className="form-control rounded-0"
onChange={(e) => setEmail([Link])}
/>
</div>
<div className="mb-3">
<label htmlFor="password">
<strong>Password</strong>
</label>
<input
type="password"
placeholder="Enter Password"
name="password"
className="form-control rounded-0"
onChange={(e) => setPassword([Link])}
/>
</div>
<button type="submit" className="btn btn-success w-100
rounded-0">
Login
</button>
<p>Don't have an account?</p>
<Link to="/register" className="btn btn-default border w-100
bg-light rounded-0 text-decoration-none">
Sign up
</Link>
</form>
</div>
</div>

)
}
export default Login;

In [Link]
Lets create the home the login one

[Link]("/login",(req,res)=>{
const{email,password}=[Link];
[Link]({email:email})
.then(user => {
if(user){
if([Link]===password){
[Link]("Success")
}else{
[Link]("the password is incorrect")
}
}else{
[Link]("No record existed")
}
})
})
Lets move to our login page

if([Link] ==="Success"){
navigate('/home')
Check:It is come to home page
In [Link]

import React from 'react'


function Home(){
return(
<h2>Home Component</h2>
)
}
export default Home;

My todo
07 May 2025
17:03

[Link]

[Link]

You might also like