Home Node JS Login Registration Form Using Node js React

Node JS React JS

Login Registration Form Using Node js React

Posted on January 31, 2023

13 min read

2,523

In this video tutorials explains how to make the user login and Registration Form using Node js React, Express js,MongoDB.using MVC architecture. we have created routes,studentControler,studentServices,studentModel.

First you have to Create the Project

npm init

After run the command package.json file has been created.

First Step Create the page which is server.js which use to connect the port and databases.

server.js

const express = require('express')
const app = express()
const mongoose = require('mongoose');
mongoose.set('strictQuery', false);
var routes = require('./route/routes');
const cors = require('cors');

app.use(cors(
  {
    origin: "http://localhost:3000"
  }

));

app.listen(9992,function check(err)
{
    if(err)
    console.log("error")
    else
    console.log("started")
});

mongoose.connect("mongodb://localhost:27017/gbs",{useNewUrlParser: true,  useUnifiedTopology: true },
function checkDb(error)
{
    if(error)
    {
        console.log("Error Connecting to DB");
    }
    else
    {
        console.log("successfully Connected to DB");
    }
});
app.use(express.json());
app.use(routes);

After that create the new Folder routes inside the folder create file routes.js.

routes.js

var express = require('express');

var studentController = require('../src/student/studentController');
const router = express.Router();

router.route('/student/login').post(studentController.loginUserControllerFn);
router.route('/student/create').post(studentController.createStudentControllerFn);


module.exports = router;

after that create folder src inside the src create the newfolder user inside the folder make studentControler.js,studentServices.js,studentModel.js these files.

studentControler.js

var studentService = require('./studentService');

var createStudentControllerFn = async (req, res) => 
{
    try
    {
    console.log(req.body);
    var status = await studentService.createStudentDBService(req.body);
    console.log(status);

    if (status) {
        res.send({ "status": true, "message": "Student created successfully" });
    } else {
        res.send({ "status": false, "message": "Error creating user" });
    }
}
catch(err)
{
    console.log(err);
}
}

var loginUserControllerFn = async (req, res) => {
    var result = null;
    try {
        result = await studentService.loginuserDBService(req.body);
        if (result.status) {
            res.send({ "status": true, "message": result.msg });
        } else {
            res.send({ "status": false, "message": result.msg });
        }

    } catch (error) {
        console.log(error);
        res.send({ "status": false, "message": error.msg });
    }
}

module.exports = { createStudentControllerFn,loginUserControllerFn };

studentServices.js

var studentModel = require('./studentModel');
var key = '123456789trytryrtyr';
var encryptor = require('simple-encryptor')(key);

module.exports.createStudentDBService = (studentDetails) => {


   return new Promise(function myFn(resolve, reject) {

       var studentModelData = new studentModel();

       studentModelData.firstname = studentDetails.firstname;
       studentModelData.lastname = studentDetails.lastname;
       studentModelData.email = studentDetails.email;
       studentModelData.password = studentDetails.password;
       var encrypted = encryptor.encrypt(studentDetails.password);
       studentModelData.password = encrypted;

       studentModelData.save(function resultHandle(error, result) {

           if (error) {
               reject(false);
           } else {
               resolve(true);
           }
       });

   });

}

module.exports.loginuserDBService = (studentDetails)=> 
{
   return new Promise(function myFn(resolve, reject) 
   {
      studentModel.findOne({ email: studentDetails.email},function getresult(errorvalue, result)
      {
         if(errorvalue)
         {
            reject({status: false, msg: "Invaild Data"});
         }
         else
         {
            if(result !=undefined &&  result !=null)
            {
               var decrypted = encryptor.decrypt(result.password);

               if(decrypted== studentDetails.password)
               {
                  resolve({status: true,msg: "Student Validated Successfully"});
               }
               else
               {
                  reject({status: false,msg: "Student Validated failed"});
               }
            }
            else
            {
               reject({status: false,msg: "Student Error Detailssss"});
            }

         }
      
      });
      
   });
}

studentModel.js

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

var studentSchema = new Schema({

    firstname: {
        type: String,
        required: true
    },
    lastname: {
        type: String,
        required: true
    },
    email: {
        type: String,
        required: true
    },
    password: {
        type: String,
        required: true
    }

});

module.exports = mongoose.model('student', studentSchema);

React

React is a front-end application we have already created the folder front end inside the folder open the command prompt and type the commands.

Installing React

npx create-react-app front-end

After that you need to install the required dependencies

npm i axios

For managing the Api requests

2.npm i react-router-dom

For managing the routes

After that go to the bootstrap webite and copy the bootstap css style and paste inside the

index.html inside the head tag.

After install open the project into Vscode Editor.create the folder inside src which name is components inside the folder create 3 files. Home.jsx,Register.jsx,Login.jsx

Register.jsx

import axios from "axios";
import {  useState } from "react";


function Register() {

    const [fname, setFName] = useState("");
    const [lname, setLName] = useState("");

    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");


    async function save(event) {
        event.preventDefault();
        try {
          await axios.post("http://localhost:9992/student/create", {
          firstname: fname,
          lastname: lname,
          email: email,
          password: password,
          });
          alert("Student Registation Successfully");

        } catch (err) {
          alert(err);
        }
      }

    return (
     <div>
        <div class="container mt-4" >
    <div class="card">
            <h1>Student Registation</h1>
    
    <form>
        <div class="form-group">
          <label>First name</label>
          <input type="text"  class="form-control" id="fname" placeholder="Enter Name"
          
          value={fname}
          onChange={(event) => {
            setFName(event.target.value);
          }}
          />

          
        </div>

        <div class="form-group">
            <label>Last name</label>
            <input type="text"  class="form-control" id="lname" placeholder="Enter Name"
            
            value={lname}
            onChange={(event) => {
              setLName(event.target.value);
            }}
            
            />
          </div>
    
        <div class="form-group">
          <label>email</label>
          <input type="email"  class="form-control" id="email" placeholder="Enter Name"
          
          value={email}
          onChange={(event) => {
            setEmail(event.target.value);
          }}
          
          />
          
          
          
        </div>

        <div class="form-group">
            <label>password</label>
            <input type="password"  class="form-control" id="password" placeholder="Enter Fee"
            
            value={password}
            onChange={(event) => {
              setPassword(event.target.value);
            }}
            
            />
          </div>


    
        <button type="submit" class="btn btn-primary mt-4" onClick={save} >Save</button>
       
      </form>
    </div>




    </div>



     </div>
    );
  }
  
  export default  Register;

Login.jsx

import axios from "axios";
import {  useState } from "react";
import { useNavigate } from 'react-router-dom';


function Login() {

    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const navigate = useNavigate();


    async function login(event) {
        event.preventDefault();
        try {
          await axios.post("http://localhost:9992/student/login", {
            email: email,
            password: password,
            }).then((res) => 
            {
             console.log(res)
             const data = res.data;
             
             if (data.status === true) 
             {
                alert("Login Successfully"); 
                navigate('/home');
             } 
             else 
             {
                   alert("Login Failed")
             }  
          }, fail => {
           console.error(fail); // Error!
  });
        }

 
         catch (err) {
          alert(err);
        }
      
      }
      


    return (
     <div>
            <div class="container">
            <div class="row">
                <h2>Login</h2>
             <hr/>
             </div>

             <div class="row">
             <div class="col-sm-6">
 
             <form>
             <div class="form-group">
          <label>email</label>
          <input type="email"  class="form-control" id="email" placeholder="Enter Name"
          
          value={email}
          onChange={(event) => {
            setEmail(event.target.value);
          }}
          
          />
          
          
          
        </div>

        <div class="form-group">
            <label>password</label>
            <input type="password"  class="form-control" id="password" placeholder="Enter Fee"
            
            value={password}
            onChange={(event) => {
              setPassword(event.target.value);
            }}
            
            />
          </div>
                  <button type="submit" class="btn btn-primary" onClick={login} >Login</button>
              </form>

            </div>
            </div>
            </div>

     </div>
    );


  }
  
  export default Login;

Home.jsx

function Home() {
    return (
     <div>
        <h1>index</h1>
     </div>
    );
  }
  
  export default Home;

Configure the Routes

open the App.js

App.js

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

import UserRegistation from "./components/UserRegistation";
import Login from "./components/Login";

import Home from "./components/Home";

function App() {
  return (
   <div>
        <BrowserRouter>
            <Routes>
              <Route path="/home" element= { <Home/>} />
              <Route path="/register" element= { <UserRegistation/>} />
              <Route path="/" element= { <Login/>} />
            </Routes>
        </BrowserRouter>
   </div>
  );
}

export default App;

i have attached the video link below. which will do this tutorials step by step.

Login Registration Form Using Node js, ReactJS, Express js,MongoDB

Related Articles
More By admin
More In Node JS

Load More Related Articles

Creating a Stunning Image Gallery Using CSS Grid
Introduction to CSS Grid The CSS Grid Layout is a powerful tool for creating responsive an…
3 hours ago
3 min read
Create a Professional Login & Registration Form using HTML & CSS
In this tutorils we are going to teach how to make a attractive Login & Registration F…
3 weeks ago
7 min read
Form Repeater using HTML CSS JQuery
In this tutorial we are going to teach Form Repeater using HTML CSS JQuery.step by step.th…
August 6, 2024
4 min read

Load More By admin

Build a Full-Stack Node.js MongoDB CRUD App with JWT Authentication
In this tutorial, we will teach the process of building a full-stack application using Nod…
February 8, 2024
8 min read
How to Create a Calculator in Node js
In this tutorials will teach how to make a calculator in Node Js using Arrow Function step…
October 20, 2023
1 min read
Node js Basic 3 Projects
Create a function that prints your name to the console. create a function that takes your …
October 18, 2023
1 min read

Load More In Node JS

Click To Comment

Leave a Reply Cancel reply

Check Also

Creating a Stunning Image Gallery Using CSS Grid

Introduction to CSS Grid The CSS Grid Layout is a powerful tool for creating responsive an…