feat(auth): add email verification using OTP authentication

backend/.env.example

@@ -9,3 +9,5 @@ GOOGLE_CLIENT_ID=your_google_client_id
 VAPID_PUBLIC_KEY=your_vapid_public_key
 VAPID_PRIVATE_KEY=your_vapid_private_key
 VAPID_SUBJECT=mailto:your@email.com
+EMAIL=your_email@gmail.com
+EMAIL_PASSWORD=your_google_email_password

backend/package.json

@@ -23,6 +23,7 @@
     "helmet": "^8.1.0",
     "jsonwebtoken": "^9.0.3",
     "mongoose": "^9.6.1",
+    "nodemailer": "^8.0.11",
     "socket.io": "^4.8.3",
     "web-push": "^3.6.7",
     "xss": "^1.0.15"

backend/src/controllers/auth.controller.js

@@ -3,6 +3,7 @@ import { OAuth2Client } from "google-auth-library";
 import User from "../models/user.model.js";
 import { generateTokenAndSetCookie, catchAsync } from "../lib/utils.js";
 import cloudinary from "../lib/cloudinary.js";
+import transporter from "../utils/nodemailer.js"
 
 let googleClient;
 
@@ -247,4 +248,95 @@ export const subscribeToPush = catchAsync(async (req, res) => {
         }).select("-password -__v");
 
         res.status(200).json({ message: "Push subscription saved" });
-});
+    } catch (err) {
+        console.error("subscribeToPush:", err.message);
+        res.status(500).json({ message: "Could not save push subscription" });
+    }
+}
+
+export const emailVerification = async (req, res) => {
+  try {
+    const user = await User.findById(req.userId);
+
+    if (!user) {
+      return res.status(404).json({
+        message: "User not found",
+      });
+    }
+
+    if (user.isVerified) {
+      return res.status(400).json({
+        message: "Email already verified",
+      });
+    }
+
+    const otp = Math.floor(
+      100000 + Math.random() * 900000
+    ).toString();
+
+    user.otp = otp;
+    user.otpExpires = Date.now() + 5 * 60 * 1000;
+
+    await user.save();
+
+    await transporter.sendMail({
+      from: process.env.EMAIL,
+      to: user.email,
+      subject: "Email Verification OTP",
+      html: `<h2>Email Verification</h2>
+             <p>Your OTP is: <b>${otp}</b></p>`,
+    });
+
+    res.status(200).json({
+      message: "OTP sent successfully",
+    });
+
+  } catch (error) {
+    console.log(error);
+    res.status(500).json({
+      message: "Failed to send OTP",
+    });
+  }
+};
+
+export const verifyOtp = async (req, res) => {
+  try {
+    const { otp } = req.body;
+
+    const user = await User.findById(req.userId);
+
+    if (!user) {
+      return res.status(404).json({
+        message: "User not found",
+      });
+    }
+
+    if (user.otp !== otp) {
+      return res.status(400).json({
+        message: "Invalid OTP",
+      });
+    }
+
+    if (user.otpExpires < Date.now()) {
+      return res.status(400).json({
+        message: "OTP expired",
+      });
+    }
+
+    user.isVerified = true;
+    user.otp = null;
+    user.otpExpires = null;
+
+    await user.save();
+
+    res.status(200).json({
+      message: "Email verified successfully",
+    });
+
+  } catch (error) {
+    res.status(500).json({
+      message: "Verification failed",
+    });
+  }
+};
+});

backend/src/models/user.model.js

@@ -33,25 +33,16 @@ const userSchema = new mongoose.Schema({
         type: mongoose.Schema.Types.Mixed,
         default: null,
     },
+    isVerified: {
+        type: Boolean,
+        default: false
+    },
     lastSeen: {
         type: Date,
         default: Date.now,
     },
-    statusMood: {
-        type: String,
-        enum: [
-            "coding",
-            "coffee_break",
-            "studying",
-            "gaming",
-            "working",
-            "sleeping",
-            "music",
-            "away",
-        ],
-        default: null,
-        trim: true,
-    },
+    otp: String,
+    otpExpires: Date
 }, { timestamps: true });
 
 userSchema.index({ name: "text" });

backend/src/routes/auth.route.js

@@ -1,7 +1,7 @@
 import express from "express";
 import protectRoute from "../middleware/auth.middleware.js";
 import { validateSignup, validateLogin } from "../middleware/validate.js";
-import { signup, login, logout, googleAuth, updateProfile, updateProfilePicture, checkAuth, subscribeToPush } from "../controllers/auth.controller.js";
+import { signup, login, logout, googleAuth, updateProfile, updateProfilePicture, checkAuth, subscribeToPush, emailVerification, verifyOtp } from "../controllers/auth.controller.js";
 
 const router = express.Router();
 
@@ -13,5 +13,7 @@ router.put("/update-profile", protectRoute, updateProfile);
 router.put("/update-profile-picture", protectRoute, updateProfilePicture);
 router.get("/check", protectRoute, checkAuth);
 router.post("/push-subscribe", protectRoute, subscribeToPush);
+router.post("/send-verification-email-otp",protectRoute, emailVerification);
+router.post("/Verified-account",protectRoute, verifyOtp);
 
 export default router;

backend/src/utils/nodemailer.js

@@ -0,0 +1,11 @@
+import nodemailer from 'nodemailer'
+
+const transporter = nodemailer.createTransport({
+    service: 'gmail',
+    auth: {
+        user: process.env.EMAIL,
+        pass: process.env.EMAIL_PASSWORD
+    }
+});
+
+export default transporter

frontend/pages/ProfilePage.jsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react"
 import { Camera, Pencil } from "lucide-react"
 import toast from "react-hot-toast"
 import useAuthStore from "../src/store/useAuthStore"
-import StatusMoodSelector from "../components/StatusMoodSelector"
+import { useNavigate } from "react-router-dom";
 
 export default function ProfilePage() {
     const { authUser: user, updateProfile, updateProfilePicture, isLoading } = useAuthStore()
@@ -12,21 +12,8 @@ export default function ProfilePage() {
     const [previewImage, setPreviewImage] = useState(user?.profilePicture || null)
     const [selectedFile, setSelectedFile] = useState(null)
     const [isEditing, setIsEditing] = useState(false)
-    const [selectedMood, setSelectedMood] = useState(user?.statusMood || null)
-
-    useEffect(() => {
-        setSelectedMood(user?.statusMood || null)
-    }, [user?.statusMood])
-
-    const handleMoodChange = async (mood) => {
-        const previousMood = selectedMood
-        setSelectedMood(mood)
-        try {
-            await updateStatusMood(mood)
-        } catch {
-            setSelectedMood(previousMood)
-        }
-    }
+    const [isEmailOtp, SetIsEmailOtp] = useState(false);
+      const navigate = useNavigate();
 
     const handleFileChange = (e) => {
         const file = e.target.files[0]
@@ -121,6 +108,14 @@ export default function ProfilePage() {
                                     Edit
                                 </button>
                             ) : null}
+                            {!user?.isVerified && (
+    <button
+        onClick={() => navigate("/send-verify-email-otp")}
+        className="btn btn-primary"
+    >
+        Verify Email
+    </button>
+)}
                         </div>
                     </div>
 

frontend/pages/SendVerifyEmailOtp.jsx

@@ -0,0 +1,47 @@
+import { useState } from "react";
+import axios from "axios";
+import toast from "react-hot-toast";
+import { useNavigate } from "react-router-dom";
+
+function SendVerifyEmailOtp() {
+const [loading, setLoading] = useState(false);
+const navigate = useNavigate();
+
+const handleSendOtp = async () => {
+try {
+setLoading(true);
+  const res = await axios.post(
+    "http://localhost:5001/api/auth/send-verification-email-otp",
+    {},
+    { withCredentials: true }
+  );
+
+  toast.success(res.data.message);
+
+  navigate("/verify-email");
+} catch (error) {
+  toast.error(
+    error.response?.data?.message ||
+    "Failed to send OTP"
+  );
+} finally {
+  setLoading(false);
+}
+
+};
+
+return ( <div className="min-h-screen flex items-center justify-center"> <div className="bg-base-100 shadow-xl p-8 rounded-xl w-full max-w-md"> <h1 className="text-3xl font-bold text-center mb-6">
+Verify Your Email </h1>
+    <button
+      onClick={handleSendOtp}
+      disabled={loading}
+      className="btn btn-primary w-full"
+    >
+      {loading ? "Sending..." : "Send OTP"}
+    </button>
+  </div>
+</div>
+);
+}
+
+export default SendVerifyEmailOtp;