In today's web development landscape, security is a top priority, especially when dealing with user authentication. In this post, we will walk through how to implement secure authentication in a MERN (MongoDB, Express, React, Node.js) stack application. By the end of this tutorial, you'll have a better understanding of how to secure your application against common threats such as unauthorized access and data breaches.

1. Setting Up the Backend with Node.js and Express

The first step is to set up the backend server using Node.js and Express. We'll also use MongoDB to store user credentials securely.

Install Dependencies

Start by initializing a new Node.js project and installing the required dependencies:

mkdir mern-auth
cd mern-auth
npm init -y
npm install express mongoose bcryptjs jsonwebtoken cors

express: A minimal and flexible Node.js web application framework.

mongoose: An ODM (Object Data Modeling) library for MongoDB and Node.js.

bcryptjs: A library to hash passwords.

jsonwebtoken: A library to create and verify JSON Web Tokens (JWT).

cors: A middleware to enable CORS (Cross-Origin Resource Sharing).

Setting Up Express Server

Create a file named server.js and set up a basic Express server:

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const app = express();
app.use(cors());
app.use(express.json());

mongoose.connect('mongodb://localhost:27017/mern-auth', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
}).then(() => console.log('MongoDB connected'))
  .catch(err => console.log(err));

app.listen(5000, () => {
    console.log('Server is running on port 5000');
});

Creating the User Model

Now, let's define a User model to store user information. Create a models/User.js file:

const mongoose = require('mongoose');
const bcrypt = require('bcryptjs');

const UserSchema = new mongoose.Schema({
    username: {
        type: String,
        required: true,
        unique: true,
    },
    email: {
        type: String,
        required: true,
        unique: true,
    },
    password: {
        type: String,
        required: true,
    },
});

UserSchema.pre('save', async function(next) {
    if (!this.isModified('password')) return next();
    const salt = await bcrypt.genSalt(10);
    this.password = await bcrypt.hash(this.password, salt);
    next();
});

const User = mongoose.model('User', UserSchema);
module.exports = User

Username, Email, and Password: The User schema stores the user's username, email, and hashed password.

Password Hashing: The password is hashed before being saved to the database using bcrypt.

2. Implementing Authentication Routes

We'll implement the registration and login routes to handle user authentication.

Registration Route

In your server.js, add the following code to create a registration route:

const User = require('./models/User');
const jwt = require('jsonwebtoken');

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

    try {
        let user = await User.findOne({ email });
        if (user) {
            return res.status(400).json({ msg: 'User already exists' });
        }

        user = new User({ username, email, password });
        await user.save();

        const payload = { user: { id: user.id }};
        const token = jwt.sign(payload, 'secret', { expiresIn: 3600 });

        res.json({ token });
    } catch (err) {
        console.error(err.message);
        res.status(500).send('Server error');
    }
});

Login Route

Next, implement the login route:

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

    try {
        let user = await User.findOne({ email });
        if (!user) {
            return res.status(400).json({ msg: 'Invalid Credentials' });
        }

        const isMatch = await bcrypt.compare(password, user.password);
        if (!isMatch) {
            return res.status(400).json({ msg: 'Invalid Credentials' });
        }

        const payload = { user: { id: user.id }};
        const token = jwt.sign(payload, 'secret', { expiresIn: 3600 });

        res.json({ token });
    } catch (err) {
        console.error(err.message);
        res.status(500).send('Server error');
    }
});

Explanation

JWT Token: Upon successful registration or login, a JWT token is generated and sent to the client. This token will be used to authenticate subsequent requests. Password Verification: During login, the password entered by the user is compared with the hashed password stored in the database.

3. Setting Up React for the Frontend

We'll create a basic React frontend to interact with our backend authentication system.

Create a React App First, create a new React application:

npx create-react-app client
cd client
npm install axios

Create a Registration Form

In the client/src directory, create a Register.js file with the following content:

import React, { useState } from 'react';
import axios from 'axios';

const Register = () => {
    const [formData, setFormData] = useState({
        username: '',
        email: '',
        password: ''
    });

    const { username, email, password } = formData;

    const onChange = e => setFormData({ ...formData, [e.target.name]: e.target.value });

    const onSubmit = async e => {
        e.preventDefault();
        const newUser = { username, email, password };

        try {
            const res = await axios.post('http://localhost:5000/register', newUser);
            console.log(res.data);
        } catch (err) {
            console.error(err.response.data);
        }
    };

    return (
        <form onSubmit={onSubmit}>
            <input type="text" name="username" value={username} onChange={onChange} required />
            <input type="email" name="email" value={email} onChange={onChange} required />
            <input type="password" name="password" value={password} onChange={onChange} required />
            <button type="submit">Register</button>
        </form>
    );
};

export default Register;

Explanation

Form Data Handling: The useState hook is used to handle form data and submission. Axios: We use axios to send POST requests to our backend registration route.

4. Implementing Authentication in the Frontend

To protect routes in the React application, we need to use the JWT token received upon login.

Storing and Using JWT

Modify the onSubmit function in the Register.js file to store the JWT token in local storage:

localStorage.setItem('token', res.data.token);
Protected Routes

You can now use the token to create protected routes. For example:

import { Navigate } from 'react-router-dom';

const PrivateRoute = ({ children }) => {
    const token = localStorage.getItem('token');
    return token ? children : <Navigate to="/login" />;
};

Explanation

JWT Storage: The JWT token is stored in the browser's local storage, allowing us to send it with every request to access protected routes.

Private Routes: The PrivateRoute component checks if a token exists and allows access to the protected route accordingly.

Conclusion

Implementing secure authentication in a MERN stack application is crucial to ensuring that your users' data is protected. By following these steps, you have set up a basic authentication system with secure password handling, JWT tokens for session management, and a simple React frontend to interact with your backend. There are many ways to extend this setup, such as adding email verification, password reset functionality, and role-based access control.

Alex Turner