Multi Factor authentication using MERN

// client/src/components/Login.js
import React, { useState } from 'react';
import axios from 'axios';
import './Login.css';

const Login = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [otp, setOtp] = useState('');
    const [showOtpField, setShowOtpField] = useState(false);

    const handleLogin = async () => {
        try {
            const response =
                await axios.post(
                    'http://localhost:3001/auth/login',
                    {
                        email,
                        password
                    }
                );

            if (response.data.success) {
                setShowOtpField(true);
                alert('OTP sent to your email. Check your inbox.');
            } else {
                alert(response.data.message);
            }
        } catch (error) {
            console.error('Error during login:', error.message);
            alert('An error occurred during login');
        }
    };

    const handleOtpVerification = async () => {
        try {
            const otpResponse =
                await
                    axios.post(
                        'http://localhost:3001/auth/verify-otp',
                        {
                            otp
                        }
                    );

            if (otpResponse.data.success) {
                alert('OTP Verified. User logged in.');
                // Redirect to your dashboard or perform any 
                // additional actions for successful login
            } else {
                alert('Invalid OTP. Please try again.');
            }
        } catch (error) {
            console.error('Error during OTP verification:', error.message);
            alert('An error occurred during OTP verification');
        }
    };

    return (
        <div className="login-container">
            <input type="email"
                placeholder="Email"
                onChange={
                    (e) =>
                        setEmail(e.target.value)} />
            <input type="password"
                placeholder="Password"
                onChange={
                    (e) =>
                        setPassword(e.target.value)} />

            {showOtpField && (
                <>
                    <input type="text"
                        placeholder="OTP"
                        onChange={
                            (e) =>
                                setOtp(e.target.value)} />
                    <button className="login-button"
                        onClick={handleOtpVerification}>
                        Verify OTP
                    </button>
                </>
            )}

            <button className="login-button"
                onClick={handleLogin}>
                Login
            </button>
        </div>
    );
};

export default Login;

// client/src/App.js
import React from 'react';
import Login from './components/Login';

function App() {
    return (
        <div className="App">
            <div style={centerStyle}>
                <h1>
                    MFA using
                    MERN Stack
                </h1>
            </div>
            <Login />
        </div>
    );
}

const centerStyle = {
    textAlign: 'center',
};
export default App;

const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const nodemailer = require('nodemailer');
const randomize = require('randomatic');

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

app.use(bodyParser.json());
app.use(cors());

// Connect to MongoDB with connection pooling
mongoose.connect('mongodb://127.0.0.1:27017/mfa-mern', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
    // poolSize: 10,
});

const User = mongoose.model('User', {
    email: String,
    password: String,
    otp: String,
});

// Function to send OTP to the user's email
async function sendOtpEmail(email, otp) {
    try {
        const transporter = nodemailer.createTransport({
            service: 'gmail',
            auth: {
                // replace with your email and password
                user: 'your-email',
                pass: 'your-password',
            },
        });

        const mailOptions = {
            from: '[email protected]',
            to: email,
            subject: 'OTP Verification',
            text: `Your OTP is: ${otp}`,
        };

        const info =
            await transporter.sendMail(mailOptions);
        console.log('Email sent: ' + info.response);
    } catch (error) {
        console.error('Error sending email:', error);
    }
}

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

    try {
        const user = await User.findOne({ email, password });
        console.log(user)
        if (!user) {
            return res.json(
                {
                    success: false,
                    message: 'Invalid credentials'
                }
            );
        }

        const generatedOtp = randomize('0', 6);
        user.otp = generatedOtp;
        await user.save();

        sendOtpEmail(email, generatedOtp);

        return res.json({ success: true });
    } catch (error) {
        console.error('Error during login:', error.message);
        return res.status(500).json(
            {
                success: false,
                message: 'An error occurred during login'
            }
        );
    }
});

app.post('/auth/verify-otp', async (req, res) => {
    const { otp } = req.body;

    try {
        const user = await User.findOne({ otp });

        if (!user) {
            return res.json({ success: false, message: 'Invalid OTP' });
        }

        user.otp = '';
        await user.save();

        return res.json({ success: true });
    } catch (error) {
        console.error('Error during OTP verification:', error.message);
        return res.status(500)
            .json(
                {
                    success: false,
                    message: 'An error occurred during OTP verification'
                }
            );
    }
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});