Open In App

5 Simple Steps for Authentication and Authorization in MERN Stack

Last Updated : 24 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Implementing authentication and authorization in a MERN stack application is crucial for ensuring the security of your application and protecting sensitive data. Here's an elaboration on the five simple steps you can take to achieve this:

Table of Content

Implementing Authentication and Authorization in MERN App:

  • Import Statements: Import necessary dependencies and components. React is imported for defining React components. App.js is a custom component, assumed to be present in the Home directory. Import JWT to your node application.
  • Define backend: Define requests to handled by backend(example login, logout,registration).
  • Create your routes: Create database to store the username, password for authentication. Handle your backend by creating backend API.

How Authentication is done in MERN Stack ?

1. User Registration

To enable user account creation in your MERN application, implement an API endpoint dedicated to user registration. Upon signing up, the user's password must undergo secure hashing before being stored in the database.

JavaScript 
// routes/auth.js

const express = require('express');
const router = express.Router();
const User = require('../models/user');
const bcrypt = require('bcrypt');

// Registration routes
router.post('/register', async (req, res) => {
  try {
    const { username, email, password } = req.body;
    // Hash the password before saving it to the database
    const hashedPassword = await bcrypt.hash(password, 10);
    const user = new User({ username, email, password: hashedPassword });
    await user.save();
    res.status(201).json({ message: 'Registration successful' });
  } catch (error) {
    res.status(500).json({ error: 'Registration failed' });
  }
});

2. User Login

To implement a login endpoint that checks the user's credentials and generates a JWT token upon successful login, you'll need to follow a few steps. Below is an example of how you can do this within a MERN stack application:

First, ensure you have the necessary dependencies installed. You'll need express, bcrypt for password hashing, and jsonwebtoken for generating JWT tokens.

JavaScript 
javascriptCopy code
// routes/auth.js

const jwt = require('jsonwebtoken');
const secretKey = 'your-secret-key';

// Login endpoint
router.post('/login', async (req, res) => {
  try {
    const { email, password } = req.body;
    const user = await User.findOne({ email });

    if (!user) {
      return res.status(401).json({ error: 'Authentication failed try Again' });
    }

    const passwordMatch = await bcrypt.compare(password, user.password);

    if (!passwordMatch) {
      return res.status(401).json({ error: 'Authentication failed try Again' });
    }

    // Create a JWT token
    const token = jwt.sign({ userId: user._id, email: user.email }, secretKey, {
      expiresIn: '1h',
    });

    res.status(200).json({ token, userId: user._id });
  } catch (error) {
    res.status(500).json({ error: 'Authentication failed try Again' });
  }
});

How Authorization is done in MERN Stack:

1. Protecting Routes

To secure routes within your MERN application, employ middleware to authenticate the JWT token within incoming requests. Below is a sample middleware demonstrating how to safeguard routes.

JavaScript 
// middleware/auth.js

const jwt = require('jsonwebtoken');
const secretKey = 'your-secret-key';

module.exports = (req, res, next) => {
  try {
    const token = req.headers.authorization.split(' ')[1];
    const decodedToken = jwt.verify(token, secretKey);
    req.userData = { userId: decodedToken.userId, email: decodedToken.email };
    next();
  } catch (error) {
    return res.status(401).json({ error: 'Authentication failed try Again' });
  }
};

2. Using Protected Routes

Ensure authentication for routes requiring it by applying the check-auth middleware. This middleware verifies the presence and validity of the JWT token in incoming requests, thereby enhancing security for sensitive endpoints. Additionally, it helps restrict unauthorized access to protected routes, ensuring that only authenticated users can access them.

JavaScript 
// routes/protectedRoute.js

const express = require('express');
const router = express.Router();
const checkAuth = require('../middleware/auth');

// A protected route is define here
router.get('/profile', Auth, (req, res) => {
  // Access user data through req.userData
  res.json({ message: 'You are authenticated' });
});

module.exports = router;

Steps to implement Authentication & Authorization in Backend:

Step 1. Create a NodeJs and ExpressJS Server using the following command:

npm init -y

Step 2: Install the required dependencies in your server using the following command.

npm install express mongoose bcryptjs jsonwebtoken cors

Step 3: Create a MongoDB database to store user information, such as username, email, and hashed passwords. You can use a MongoDB Atlas cluster or set up a local instance.

Folder Structure:

Screenshot-2024-02-28-161351

The updated dependencies in package.json file will look like:

"dependencies": {
    "bcrypt": "^5.1.1",
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "jsonwebtoken": "^9.0.2",
    "mongoose": "^8.2.0",
}

Example: Below is an example of creating 5 simple for authentication and authorization in MERN Stack.

JavaScript 
//app.js

const express = require('express');
const cors = require('cors');  // Import the cors middleware
const db = require('./db');
const authRoutes = require('./authRoutes');

const app = express();
const PORT = 5000;

// Use the cors middleware
app.use(cors({
    origin: 'http://localhost:3000',
    credentials: true,
}));
app.use(cors());

app.use(express.json());

// Use the authentication routes
app.use('/auth', authRoutes);

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});
JavaScript 
// routes/authRoutes.js
const express = require('express');
const bcrypt = require('bcrypt');
const jwt = require('jsonwebtoken');
const User = require('./models/User.js');

const router = express.Router();

router.post('/register', async (req, res) => {
    try {
        const { username, email, password } = req.body;

        // Hash the password
        const hashedPassword = await bcrypt.hash(password, 10);

        // Create a new user
        const user = new User({
            username,
            email,
            password: hashedPassword,
        });

        // Save the user to the database
        await user.save();

        res.status(201).json({
            message:
                'User registered successfully'
        });
    } catch (error) {
        console.error(error);
        res.status(500).json({
            error:
                'Internal server error'
        });
    }
});
router.post('/logout', (req, res) => {
    /* 
    You may want to perform additional
    cleanup or session invalidation here
     */
    res.clearCookie('token').send('Logged out successfully');
});

router.post('/login', async (req, res) => {
    try {
        const { email, password } = req.body;

        // Find the user by email
        const user = await User.findOne({ email });

        if (!user) {
            return res.status(401).json({
                error:
                    'Invalid credentials'
            });
        }

        // Compare passwords
        const passwordMatch = await bcrypt.compare(password,
            user.password);

        if (!passwordMatch) {
            return res.status(401).json({
                error:
                    'Invalid credentials'
            });
        }

        // Generate JWT token
        const token = jwt.sign({ userId: user._id },
            'your_secret_key', {
            expiresIn: '1h',
        });

        res.json({ token });
    } catch (error) {
        console.error(error);
        res.status(500).json({
            error:
                'Internal server error'
        });
    }
});

module.exports = router;
JavaScript 
// db.js
const mongoose = require('mongoose');

mongoose.connect('mongodb+srv://nitinkumar:[email protected]/User', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
});

const db = mongoose.connection;

db.on('error', console.error.bind(console, 'MongoDB connection error:'));
db.once('open', () => {
    console.log('Connected to MongoDB');
});

module.exports = db;
JavaScript 
// models/User.js
const mongoose = require('mongoose');

// Define the user schema
const userSchema = new mongoose.Schema({
  username: {
    type: String,
    required: true,
    unique: true, 
    trim: true 
  },
  email: {
    type: String,
    required: true,
    unique: true, 
    trim: true
  },
  password: {
    type: String,
    required: true
  }
});

// Export the user model
module.exports = mongoose.model('User', userSchema);

Start your server using the following command in your terminal.

node app.js

Steps to Create a Frontend Application:

Step 1. Create a frontend application using the following command:

npx create-react-app my-react-app

Step 2: Install the required dependencies in your application using the following command.

npm install axios

Folder Structure:

Screenshot-2024-01-30-104510

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "axios": "^1.6.7",
    "web-vitals": "^2.1.4"
},

Example: Below is an example of creating 5 simple steps for athutentication and authorization in MERN Stack.

CSS 
/* App.css */
/* src/App.css */
body {
  font-family: 'Arial', sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 600px;
  margin: 50px auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #333;
}

form {
  display: flex;
  flex-direction: column;
}

input {
  margin-bottom: 10px;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  background-color: #4caf50;
  color: #fff;
  padding: 10px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

p {
  margin-top: 20px;
  font-size: 14px;
  color: #333;
}
JavaScript 
//App.js 
import React, { useState } from 'react';
import axios from 'axios';
import './App.css';

function App() {
    const [username, setUsername] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [loginEmail, setLoginEmail] = useState('');
    const [loginPassword, setLoginPassword] = useState('');
    const [token, setToken] = useState('');

    const handleRegister = async () => {
        try {
            const response = await axios.post(
                'http://localhost:5000/auth/register',
                {
                    username,
                    email,
                    password,
                },
                { withCredentials: true }  // Add this option
            );
            console.log(response.data);
        } catch (error) {
            console.error(error.response.data.error);
        }
    };

    const handleLogin = async () => {
        try {
            const response = await axios.post(
                'http://localhost:5000/auth/login',
                {
                    email: loginEmail,
                    password: loginPassword,
                },
                { withCredentials: true } 
            );
            setToken(response.data.token);
            console.log('Login successful');
        } catch (error) {
            console.error(error.response.data.error);
        }
    };
    const handleLogout = async () => {
        try {
            const response = await
                fetch('http://localhost:5000/auth/logout', {
                    method: 'POST',
                    credentials: 'include',
                });

            if (!response.ok) {
                throw new Error(`HTTP error! Status:
                 ${response.status}`);
            }

            /* 
            Clear any client-side authentication
            data (e.g., token stored in localStorage)
             */
            localStorage.removeItem('token');
            console.log("Logged out");
            // Redirect or update UI as needed after logout

        } catch (error) {
            console.error('Error during logout:', error);
        }
    };

    return (
        <div>
            <h1>Authentication App</h1>
            <div>
                <h2>Register</h2>
                <input
                    type="text"
                    placeholder="Username"
                    value={username}
                    onChange={(e) => setUsername(e.target.value)}
                />
                <input
                    type="email"
                    placeholder="Email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                />
                <input
                    type="password"
                    placeholder="Password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                />
                <button onClick={handleRegister}>Register</button>
            </div>
            <div>
                <h2>Login</h2>
                <input
                    type="email"
                    placeholder="Email"
                    value={loginEmail}
                    onChange={(e) => setLoginEmail(e.target.value)}
                />
                <input
                    type="password"
                    placeholder="Password"
                    value={loginPassword}
                    onChange={(e) => setLoginPassword(e.target.value)}
                />
                <button onClick={handleLogin}>Login</button>
            </div>
            {token && <p>Token: {token}</p>}
            <button onClick={handleLogout}>Logout</button>
        </div>
    );
}

export default App;

Start your application using the following command in your terminal.

npm start

Output:

ReactApp-GoogleChrome2024-02-2816-26-29-ezgifcom-video-to-gif-converter


Next Article
Beginner's Guide to User Authentication in MERN Stack
author
nitinkuhz4o
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox