Jackie/rentall-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

email verification flow updated

Browse Source
This commit is contained in:
jackiettran
2025-12-15 22:45:55 -05:00
parent 5e01bb8cff
commit 372ab093ef
19 changed files with 1214 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
backend/config/database.js
View File

@@ -34,7 +34,6 @@ const dbConfig = {
// Configuration for Sequelize CLI (supports multiple environments)
// All environments use the same configuration from environment variables
const cliConfig = {
development: dbConfig,
dev: dbConfig,
test: dbConfig,
qa: dbConfig,

13
backend/middleware/rateLimiter.js
View File

@@ -162,6 +162,18 @@ const authRateLimiters = {
legacyHeaders: false,
}),
// Email verification rate limiter - protect against brute force on 6-digit codes
emailVerification: rateLimit({
windowMs: 15 * 60 * 1000, // 15 minutes
max: 10, // 10 verification attempts per 15 minutes per IP
message: {
error: "Too many verification attempts. Please try again later.",
retryAfter: 900,
},
standardHeaders: true,
legacyHeaders: false,
}),
// General API rate limiter
general: rateLimit({
windowMs: 60 * 1000, // 1 minute
@@ -186,6 +198,7 @@ module.exports = {
registerLimiter: authRateLimiters.register,
passwordResetLimiter: authRateLimiters.passwordReset,
alphaCodeValidationLimiter: authRateLimiters.alphaCodeValidation,
emailVerificationLimiter: authRateLimiters.emailVerification,
generalLimiter: authRateLimiters.general,
// Burst protection

15
backend/migrations/20251215175806-add-verification-attempts.js Normal file
View File

@@ -0,0 +1,15 @@
"use strict";
module.exports = {
up: async (queryInterface, Sequelize) => {
await queryInterface.addColumn("Users", "verificationAttempts", {
type: Sequelize.INTEGER,
defaultValue: 0,
allowNull: true,
});
},
down: async (queryInterface, Sequelize) => {
await queryInterface.removeColumn("Users", "verificationAttempts");
},
};

53
backend/models/User.js
View File

@@ -146,6 +146,11 @@ const User = sequelize.define(
max: 100,
},
},
verificationAttempts: {
type: DataTypes.INTEGER,
defaultValue: 0,
allowNull: true,
},
},
{
hooks: {
@@ -208,31 +213,64 @@ User.prototype.resetLoginAttempts = async function () {
};
// Email verification methods
// Maximum verification attempts before requiring a new code
const MAX_VERIFICATION_ATTEMPTS = 5;
User.prototype.generateVerificationToken = async function () {
const crypto = require("crypto");
const token = crypto.randomBytes(32).toString("hex");
// Generate 6-digit numeric code (100000-999999)
const code = crypto.randomInt(100000, 999999).toString();
const expiry = new Date(Date.now() + 24 * 60 * 60 * 1000); // 24 hours
return this.update({
verificationToken: token,
verificationToken: code,
verificationTokenExpiry: expiry,
verificationAttempts: 0, // Reset attempts on new code
});
};
User.prototype.isVerificationTokenValid = function (token) {
const crypto = require("crypto");
if (!this.verificationToken || !this.verificationTokenExpiry) {
return false;
}
if (this.verificationToken !== token) {
return false;
}
// Check if token is expired
if (new Date() > new Date(this.verificationTokenExpiry)) {
return false;
}
return true;
// Validate 6-digit format
if (!/^\d{6}$/.test(token)) {
return false;
}
// Use timing-safe comparison to prevent timing attacks
try {
const inputBuffer = Buffer.from(token);
const storedBuffer = Buffer.from(this.verificationToken);
if (inputBuffer.length !== storedBuffer.length) {
return false;
}
return crypto.timingSafeEqual(inputBuffer, storedBuffer);
} catch {
return false;
}
};
// Check if too many verification attempts
User.prototype.isVerificationLocked = function () {
return (this.verificationAttempts || 0) >= MAX_VERIFICATION_ATTEMPTS;
};
// Increment verification attempts
User.prototype.incrementVerificationAttempts = async function () {
const newAttempts = (this.verificationAttempts || 0) + 1;
await this.update({ verificationAttempts: newAttempts });
return newAttempts;
};
User.prototype.verifyEmail = async function () {
@@ -241,6 +279,7 @@ User.prototype.verifyEmail = async function () {
verifiedAt: new Date(),
verificationToken: null,
verificationTokenExpiry: null,
verificationAttempts: 0,
});
};

129
backend/routes/auth.js
View File

@@ -20,7 +20,9 @@ const {
loginLimiter,
registerLimiter,
passwordResetLimiter,
emailVerificationLimiter,
} = require("../middleware/rateLimiter");
const { authenticateToken } = require("../middleware/auth");
const router = express.Router();
const googleClient = new OAuth2Client(
@@ -43,8 +45,7 @@ router.post(
validateRegistration,
async (req, res) => {
try {
const { email, password, firstName, lastName, phone } =
req.body;
const { email, password, firstName, lastName, phone } = req.body;
const existingUser = await User.findOne({
where: { email },
@@ -64,7 +65,7 @@ router.post(
// Alpha access validation
let alphaInvitation = null;
if (process.env.ALPHA_TESTING_ENABLED === 'true') {
if (process.env.ALPHA_TESTING_ENABLED === "true") {
if (req.cookies && req.cookies.alphaAccessCode) {
const { code } = req.cookies.alphaAccessCode;
if (code) {
@@ -88,7 +89,8 @@ router.post(
if (!alphaInvitation) {
return res.status(403).json({
error: "Alpha access required. Please enter your invitation code first.",
error:
"Alpha access required. Please enter your invitation code first.",
});
}
}
@@ -116,7 +118,10 @@ router.post(
// Send verification email (don't block registration if email fails)
let verificationEmailSent = false;
try {
await emailServices.auth.sendVerificationEmail(user, user.verificationToken);
await emailServices.auth.sendVerificationEmail(
user,
user.verificationToken
);
verificationEmailSent = true;
} catch (emailError) {
const reqLogger = logger.withRequestId(req.id);
@@ -200,7 +205,10 @@ router.post(
const user = await User.findOne({ where: { email } });
if (!user) {
return res.status(401).json({ error: "Invalid credentials" });
return res.status(401).json({
error:
"Unable to log in. Please check your email and password, or create an account.",
});
}
// Check if account is locked
@@ -217,7 +225,10 @@ router.post(
if (!isPasswordValid) {
// Increment login attempts
await user.incLoginAttempts();
return res.status(401).json({ error: "Invalid credentials" });
return res.status(401).json({
error:
"Unable to log in. Please check your email and password, or create an account.",
});
}
// Reset login attempts on successful login
@@ -322,7 +333,8 @@ router.post(
if (!email) {
return res.status(400).json({
error: "Email permission is required to continue. Please grant email access when signing in with Google and try again."
error:
"Email permission is required to continue. Please grant email access when signing in with Google and try again.",
});
}
@@ -332,18 +344,22 @@ router.post(
let lastName = familyName;
if (!firstName || !lastName) {
const emailUsername = email.split('@')[0];
const emailUsername = email.split("@")[0];
// Try to split email username by common separators
const nameParts = emailUsername.split(/[._-]/);
if (!firstName) {
firstName = nameParts[0] ? nameParts[0].charAt(0).toUpperCase() + nameParts[0].slice(1) : 'Google';
firstName = nameParts[0]
? nameParts[0].charAt(0).toUpperCase() + nameParts[0].slice(1)
: "Google";
}
if (!lastName) {
lastName = nameParts.length > 1
? nameParts[nameParts.length - 1].charAt(0).toUpperCase() + nameParts[nameParts.length - 1].slice(1)
: 'User';
lastName =
nameParts.length > 1
? nameParts[nameParts.length - 1].charAt(0).toUpperCase() +
nameParts[nameParts.length - 1].slice(1)
: "User";
}
}
@@ -375,7 +391,7 @@ router.post(
});
// Check if there's an alpha invitation for this email
if (process.env.ALPHA_TESTING_ENABLED === 'true') {
if (process.env.ALPHA_TESTING_ENABLED === "true") {
const alphaInvitation = await AlphaInvitation.findOne({
where: { email: email.toLowerCase().trim() },
});
@@ -467,26 +483,37 @@ router.post(
);
// Email verification endpoint
router.post("/verify-email", sanitizeInput, async (req, res) => {
router.post(
"/verify-email",
emailVerificationLimiter,
authenticateToken,
sanitizeInput,
async (req, res) => {
try {
const { token } = req.body;
const { code } = req.body;
if (!token) {
if (!code) {
return res.status(400).json({
error: "Verification token required",
code: "TOKEN_REQUIRED",
error: "Verification code required",
code: "CODE_REQUIRED",
});
}
// Find user with this verification token
const user = await User.findOne({
where: { verificationToken: token },
// Validate 6-digit format
if (!/^\d{6}$/.test(code)) {
return res.status(400).json({
error: "Verification code must be 6 digits",
code: "INVALID_CODE_FORMAT",
});
}
// Get the authenticated user
const user = await User.findByPk(req.user.id);
if (!user) {
return res.status(400).json({
error: "Invalid verification token",
code: "VERIFICATION_TOKEN_INVALID",
return res.status(404).json({
error: "User not found",
code: "USER_NOT_FOUND",
});
}
@@ -498,11 +525,47 @@ router.post("/verify-email", sanitizeInput, async (req, res) => {
});
}
// Check if token is valid (not expired)
if (!user.isVerificationTokenValid(token)) {
// Check if too many failed attempts
if (user.isVerificationLocked()) {
return res.status(429).json({
error: "Too many verification attempts. Please request a new code.",
code: "TOO_MANY_ATTEMPTS",
});
}
// Check if user has a verification token
if (!user.verificationToken) {
return res.status(400).json({
error: "Verification token has expired. Please request a new one.",
code: "VERIFICATION_TOKEN_EXPIRED",
error: "No verification code found. Please request a new one.",
code: "NO_CODE",
});
}
// Check if code is expired
if (
user.verificationTokenExpiry &&
new Date() > new Date(user.verificationTokenExpiry)
) {
return res.status(400).json({
error: "Verification code has expired. Please request a new one.",
code: "VERIFICATION_EXPIRED",
});
}
// Validate the code
if (!user.isVerificationTokenValid(input)) {
// Increment failed attempts
await user.incrementVerificationAttempts();
const reqLogger = logger.withRequestId(req.id);
reqLogger.warn("Invalid verification code attempt", {
userId: user.id,
attempts: user.verificationAttempts + 1,
});
return res.status(400).json({
error: "Invalid verification code",
code: "VERIFICATION_INVALID",
});
}
@@ -533,7 +596,8 @@ router.post("/verify-email", sanitizeInput, async (req, res) => {
error: "Email verification failed. Please try again.",
});
}
});
}
);
// Resend verification email endpoint
router.post(
@@ -575,7 +639,10 @@ router.post(
// Send verification email
try {
await emailServices.auth.sendVerificationEmail(user, user.verificationToken);
await emailServices.auth.sendVerificationEmail(
user,
user.verificationToken
);
} catch (emailError) {
const reqLogger = logger.withRequestId(req.id);
reqLogger.error("Failed to resend verification email", {

32
backend/routes/forum.js
View File

@@ -241,6 +241,14 @@ router.get('/posts/:id', optionalAuth, async (req, res, next) => {
// POST /api/forum/posts - Create new post
router.post('/posts', authenticateToken, async (req, res, next) => {
try {
// Require email verification
if (!req.user.isVerified) {
return res.status(403).json({
error: "Please verify your email address before creating forum posts.",
code: "EMAIL_NOT_VERIFIED"
});
}
let { title, content, category, tags, zipCode, latitude: providedLat, longitude: providedLng, imageFilenames: rawImageFilenames } = req.body;
// Ensure imageFilenames is an array and validate S3 keys
@@ -490,6 +498,14 @@ router.post('/posts', authenticateToken, async (req, res, next) => {
// PUT /api/forum/posts/:id - Update post
router.put('/posts/:id', authenticateToken, async (req, res, next) => {
try {
// Require email verification
if (!req.user.isVerified) {
return res.status(403).json({
error: "Please verify your email address before editing forum posts.",
code: "EMAIL_NOT_VERIFIED"
});
}
const post = await ForumPost.findByPk(req.params.id);
if (!post) {
@@ -934,6 +950,14 @@ router.patch('/posts/:id/accept-answer', authenticateToken, async (req, res, nex
// POST /api/forum/posts/:id/comments - Add comment/reply
router.post('/posts/:id/comments', authenticateToken, async (req, res, next) => {
try {
// Require email verification
if (!req.user.isVerified) {
return res.status(403).json({
error: "Please verify your email address before commenting.",
code: "EMAIL_NOT_VERIFIED"
});
}
// Support both parentId (new) and parentCommentId (legacy) for backwards compatibility
const { content, parentId, parentCommentId, imageFilenames: rawImageFilenames } = req.body;
const parentIdResolved = parentId || parentCommentId;
@@ -1111,6 +1135,14 @@ router.post('/posts/:id/comments', authenticateToken, async (req, res, next) =>
// PUT /api/forum/comments/:id - Edit comment
router.put('/comments/:id', authenticateToken, async (req, res, next) => {
try {
// Require email verification
if (!req.user.isVerified) {
return res.status(403).json({
error: "Please verify your email address before editing comments.",
code: "EMAIL_NOT_VERIFIED"
});
}
const { content, imageFilenames: rawImageFilenames } = req.body;
const comment = await ForumComment.findByPk(req.params.id);

119
backend/routes/rentals.js
View File

@@ -1,7 +1,10 @@
const express = require("express");
const { Op } = require("sequelize");
const { Rental, Item, User } = require("../models"); // Import from models/index.js to get models with associations
const { authenticateToken, requireVerifiedEmail } = require("../middleware/auth");
const {
authenticateToken,
requireVerifiedEmail,
} = require("../middleware/auth");
const FeeCalculator = require("../utils/feeCalculator");
const RentalDurationCalculator = require("../utils/rentalDurationCalculator");
const RefundService = require("../services/refundService");
@@ -304,7 +307,11 @@ router.post("/", authenticateToken, requireVerifiedEmail, async (req, res) => {
// Send rental request notification to owner
try {
await emailServices.rentalFlow.sendRentalRequestEmail(rentalWithDetails.owner, rentalWithDetails.renter, rentalWithDetails);
await emailServices.rentalFlow.sendRentalRequestEmail(
rentalWithDetails.owner,
rentalWithDetails.renter,
rentalWithDetails
);
const reqLogger = logger.withRequestId(req.id);
reqLogger.info("Rental request notification sent to owner", {
rentalId: rental.id,
@@ -322,7 +329,10 @@ router.post("/", authenticateToken, requireVerifiedEmail, async (req, res) => {
// Send rental request confirmation to renter
try {
await emailServices.rentalFlow.sendRentalRequestConfirmationEmail(rentalWithDetails.renter, rentalWithDetails);
await emailServices.rentalFlow.sendRentalRequestConfirmationEmail(
rentalWithDetails.renter,
rentalWithDetails
);
const reqLogger = logger.withRequestId(req.id);
reqLogger.info("Rental request confirmation sent to renter", {
rentalId: rental.id,
@@ -358,12 +368,7 @@ router.put("/:id/status", authenticateToken, async (req, res) => {
{
model: User,
as: "renter",
attributes: [
"id",
"firstName",
"lastName",
"stripeCustomerId",
],
attributes: ["id", "firstName", "lastName", "stripeCustomerId"],
},
],
});
@@ -445,7 +450,11 @@ router.put("/:id/status", authenticateToken, async (req, res) => {
// Send confirmation emails
// Send approval confirmation to owner with Stripe reminder
try {
await emailServices.rentalFlow.sendRentalApprovalConfirmationEmail(updatedRental.owner, updatedRental.renter, updatedRental);
await emailServices.rentalFlow.sendRentalApprovalConfirmationEmail(
updatedRental.owner,
updatedRental.renter,
updatedRental
);
const reqLogger = logger.withRequestId(req.id);
reqLogger.info("Rental approval confirmation sent to owner", {
rentalId: updatedRental.id,
@@ -453,11 +462,14 @@ router.put("/:id/status", authenticateToken, async (req, res) => {
});
} catch (emailError) {
const reqLogger = logger.withRequestId(req.id);
reqLogger.error("Failed to send rental approval confirmation email to owner", {
reqLogger.error(
"Failed to send rental approval confirmation email to owner",
{
error: emailError.message,
rentalId: updatedRental.id,
ownerId: updatedRental.ownerId,
});
}
);
}
// Send rental confirmation to renter with payment receipt
@@ -489,11 +501,14 @@ router.put("/:id/status", authenticateToken, async (req, res) => {
}
} catch (emailError) {
const reqLogger = logger.withRequestId(req.id);
reqLogger.error("Failed to send rental confirmation email to renter", {
reqLogger.error(
"Failed to send rental confirmation email to renter",
{
error: emailError.message,
rentalId: updatedRental.id,
renterId: updatedRental.renterId,
});
}
);
}
res.json(updatedRental);
@@ -537,7 +552,11 @@ router.put("/:id/status", authenticateToken, async (req, res) => {
// Send confirmation emails
// Send approval confirmation to owner (for free rentals, no Stripe reminder shown)
try {
await emailServices.rentalFlow.sendRentalApprovalConfirmationEmail(updatedRental.owner, updatedRental.renter, updatedRental);
await emailServices.rentalFlow.sendRentalApprovalConfirmationEmail(
updatedRental.owner,
updatedRental.renter,
updatedRental
);
const reqLogger = logger.withRequestId(req.id);
reqLogger.info("Rental approval confirmation sent to owner", {
rentalId: updatedRental.id,
@@ -545,11 +564,14 @@ router.put("/:id/status", authenticateToken, async (req, res) => {
});
} catch (emailError) {
const reqLogger = logger.withRequestId(req.id);
reqLogger.error("Failed to send rental approval confirmation email to owner", {
reqLogger.error(
"Failed to send rental approval confirmation email to owner",
{
error: emailError.message,
rentalId: updatedRental.id,
ownerId: updatedRental.ownerId,
});
}
);
}
// Send rental confirmation to renter
@@ -581,11 +603,14 @@ router.put("/:id/status", authenticateToken, async (req, res) => {
}
} catch (emailError) {
const reqLogger = logger.withRequestId(req.id);
reqLogger.error("Failed to send rental confirmation email to renter", {
reqLogger.error(
"Failed to send rental confirmation email to renter",
{
error: emailError.message,
rentalId: updatedRental.id,
renterId: updatedRental.renterId,
});
}
);
}
res.json(updatedRental);
@@ -687,7 +712,11 @@ router.put("/:id/decline", authenticateToken, async (req, res) => {
// Send decline notification email to renter
try {
await emailServices.rentalFlow.sendRentalDeclinedEmail(updatedRental.renter, updatedRental, reason);
await emailServices.rentalFlow.sendRentalDeclinedEmail(
updatedRental.renter,
updatedRental,
reason
);
const reqLogger = logger.withRequestId(req.id);
reqLogger.info("Rental decline notification sent to renter", {
rentalId: rental.id,
@@ -904,7 +933,7 @@ router.post("/cost-preview", authenticateToken, async (req, res) => {
// Validate date range
if (rentalEndDateTime <= rentalStartDateTime) {
return res.status(400).json({
error: "End date/time must be after start date/time",
error: "End must be after start",
});
}
@@ -987,12 +1016,17 @@ router.get("/:id/refund-preview", authenticateToken, async (req, res, next) => {
});
// Get late fee preview
router.get("/:id/late-fee-preview", authenticateToken, async (req, res, next) => {
router.get(
"/:id/late-fee-preview",
authenticateToken,
async (req, res, next) => {
try {
const { actualReturnDateTime } = req.query;
if (!actualReturnDateTime) {
return res.status(400).json({ error: "actualReturnDateTime is required" });
return res
.status(400)
.json({ error: "actualReturnDateTime is required" });
}
const rental = await Rental.findByPk(req.params.id, {
@@ -1024,7 +1058,8 @@ router.get("/:id/late-fee-preview", authenticateToken, async (req, res, next) =>
});
next(error);
}
});
}
);
// Cancel rental with refund processing
router.post("/:id/cancel", authenticateToken, async (req, res, next) => {
@@ -1156,7 +1191,11 @@ router.post("/:id/mark-return", authenticateToken, async (req, res, next) => {
// Send completion emails to both renter and owner
try {
await emailServices.rentalFlow.sendRentalCompletionEmails(rentalWithDetails.owner, rentalWithDetails.renter, rentalWithDetails);
await emailServices.rentalFlow.sendRentalCompletionEmails(
rentalWithDetails.owner,
rentalWithDetails.renter,
rentalWithDetails
);
const reqLogger = logger.withRequestId(req.id);
reqLogger.info("Rental completion emails sent", {
rentalId,
@@ -1224,7 +1263,11 @@ router.post("/:id/mark-return", authenticateToken, async (req, res, next) => {
// Send notification to customer service
const owner = await User.findByPk(rental.ownerId);
const renter = await User.findByPk(rental.renterId);
await emailServices.customerService.sendLostItemToCustomerService(updatedRental, owner, renter);
await emailServices.customerService.sendLostItemToCustomerService(
updatedRental,
owner,
renter
);
break;
default:
@@ -1261,14 +1304,14 @@ router.post("/:id/mark-return", authenticateToken, async (req, res, next) => {
// Allowed fields for damage report (prevents mass assignment)
const ALLOWED_DAMAGE_REPORT_FIELDS = [
'description',
'canBeFixed',
'repairCost',
'needsReplacement',
'replacementCost',
'proofOfOwnership',
'actualReturnDateTime',
'imageFilenames',
"description",
"canBeFixed",
"repairCost",
"needsReplacement",
"replacementCost",
"proofOfOwnership",
"actualReturnDateTime",
"imageFilenames",
];
function extractAllowedDamageFields(body) {
@@ -1295,9 +1338,13 @@ router.post("/:id/report-damage", authenticateToken, async (req, res, next) => {
? damageInfo.imageFilenames
: [];
const keyValidation = validateS3Keys(imageFilenamesArray, 'damage-reports', {
const keyValidation = validateS3Keys(
imageFilenamesArray,
"damage-reports",
{
maxKeys: IMAGE_LIMITS.damageReports,
});
}
);
if (!keyValidation.valid) {
return res.status(400).json({
error: keyValidation.error,

1
backend/services/email/domain/AuthEmailService.js
View File

@@ -50,6 +50,7 @@ class AuthEmailService {
const variables = {
recipientName: user.firstName || "there",
verificationUrl: verificationUrl,
verificationCode: verificationToken, // 6-digit code for display in email
};
const htmlContent = await this.templateManager.renderTemplate(

26
backend/templates/emails/emailVerificationToUser.html
View File

@@ -196,9 +196,29 @@
<h1>Verify Your Email Address</h1>
<p>Thank you for registering with RentAll! To complete your account setup and start renting items, please verify your email address by clicking the button below.</p>
<p>Thank you for registering with RentAll! Use the verification code below to complete your account setup.</p>
<div style="text-align: center;">
<!-- Verification Code Display -->
<div style="text-align: center; margin: 30px 0;">
<p style="margin-bottom: 10px; color: #6c757d; font-size: 14px;">Your verification code is:</p>
<div style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 12px;
padding: 20px 40px;
display: inline-block;
border: 2px dashed #28a745;">
<span style="font-size: 36px;
font-weight: 700;
letter-spacing: 8px;
color: #28a745;
font-family: 'Courier New', monospace;">{{verificationCode}}</span>
</div>
<p style="margin-top: 10px; font-size: 14px; color: #6c757d;">
Enter this code in the app to verify your email
</p>
</div>
<div style="text-align: center; margin: 20px 0;">
<p style="color: #6c757d; margin-bottom: 10px; font-size: 14px;">Or click the button below:</p>
<a href="{{verificationUrl}}" class="button">Verify Email Address</a>
</div>
@@ -210,7 +230,7 @@
<p style="word-break: break-all; color: #667eea;">{{verificationUrl}}</p>
<div class="warning-box">
<p><strong>This link will expire in 24 hours.</strong> If you need a new verification link, you can request one from your account settings.</p>
<p><strong>This code will expire in 24 hours.</strong> If you need a new verification code, you can request one from your account settings.</p>
</div>
<p><strong>Didn't create an account?</strong> If you didn't register for a RentAll account, you can safely ignore this email.</p>

33
frontend/src/components/AuthModal.tsx
View File

@@ -3,6 +3,7 @@ import { useAuth } from "../contexts/AuthContext";
import PasswordStrengthMeter from "./PasswordStrengthMeter";
import PasswordInput from "./PasswordInput";
import ForgotPasswordModal from "./ForgotPasswordModal";
import VerificationCodeModal from "./VerificationCodeModal";
interface AuthModalProps {
show: boolean;
@@ -23,6 +24,7 @@ const AuthModal: React.FC<AuthModalProps> = ({
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
const [showForgotPassword, setShowForgotPassword] = useState(false);
const [showVerificationModal, setShowVerificationModal] = useState(false);
const { login, register } = useAuth();
@@ -39,6 +41,7 @@ const AuthModal: React.FC<AuthModalProps> = ({
setPassword("");
setFirstName("");
setLastName("");
setShowVerificationModal(false);
};
const handleGoogleLogin = () => {
@@ -68,28 +71,48 @@ const AuthModal: React.FC<AuthModalProps> = ({
await login(email, password);
onHide();
} else {
await register({
const response = await register({
email,
password,
firstName,
lastName,
username: email.split("@")[0], // Generate username from email
});
onHide();
// Show verification modal after successful registration
setShowVerificationModal(true);
// Don't call onHide() - keep modal context for verification
}
} catch (err: any) {
setError(err.response?.data?.message || "An error occurred");
setError(err.response?.data?.error || "An error occurred");
} finally {
setLoading(false);
}
};
if (!show && !showForgotPassword) return null;
if (!show && !showForgotPassword && !showVerificationModal) return null;
return (
<>
{!showForgotPassword && (
{/* Verification Code Modal - shown after signup */}
{showVerificationModal && (
<VerificationCodeModal
show={showVerificationModal}
onHide={() => {
setShowVerificationModal(false);
resetModal();
onHide();
}}
email={email}
onVerified={() => {
setShowVerificationModal(false);
resetModal();
onHide();
}}
/>
)}
{!showForgotPassword && !showVerificationModal && (
<div
className="modal show d-block"
tabIndex={-1}

5
frontend/src/components/CommentThread.tsx
View File

@@ -18,6 +18,7 @@ interface CommentThreadProps {
isAdmin?: boolean;
onAdminDelete?: (commentId: string) => Promise<void>;
onAdminRestore?: (commentId: string) => Promise<void>;
canReply?: boolean;
}
const CommentThread: React.FC<CommentThreadProps> = ({
@@ -33,6 +34,7 @@ const CommentThread: React.FC<CommentThreadProps> = ({
isAdmin = false,
onAdminDelete,
onAdminRestore,
canReply = true,
}) => {
const [showReplyForm, setShowReplyForm] = useState(false);
const [isEditing, setIsEditing] = useState(false);
@@ -299,7 +301,7 @@ const CommentThread: React.FC<CommentThreadProps> = ({
)}
<div className="d-flex gap-2">
{!isEditing && canNest && (
{!isEditing && canNest && canReply && (
<button
className="btn btn-sm btn-link text-decoration-none p-0"
onClick={() => setShowReplyForm(!showReplyForm)}
@@ -394,6 +396,7 @@ const CommentThread: React.FC<CommentThreadProps> = ({
isAdmin={isAdmin}
onAdminDelete={onAdminDelete}
onAdminRestore={onAdminRestore}
canReply={canReply}
/>
))}
</div>

249
frontend/src/components/VerificationCodeModal.tsx Normal file
View File

@@ -0,0 +1,249 @@
import React, { useState, useRef, useEffect } from "react";
import { authAPI } from "../services/api";
import { useAuth } from "../contexts/AuthContext";
interface VerificationCodeModalProps {
show: boolean;
onHide: () => void;
email: string;
onVerified: () => void;
}
const VerificationCodeModal: React.FC<VerificationCodeModalProps> = ({
show,
onHide,
email,
onVerified,
}) => {
const [code, setCode] = useState<string[]>(["", "", "", "", "", ""]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
const [resending, setResending] = useState(false);
const [resendCooldown, setResendCooldown] = useState(0);
const [resendSuccess, setResendSuccess] = useState(false);
const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
const { checkAuth } = useAuth();
// Handle resend cooldown timer
useEffect(() => {
if (resendCooldown > 0) {
const timer = setTimeout(
() => setResendCooldown(resendCooldown - 1),
1000
);
return () => clearTimeout(timer);
}
}, [resendCooldown]);
// Focus first input on mount
useEffect(() => {
if (show && inputRefs.current[0]) {
inputRefs.current[0].focus();
}
}, [show]);
// Clear resend success message after 3 seconds
useEffect(() => {
if (resendSuccess) {
const timer = setTimeout(() => setResendSuccess(false), 3000);
return () => clearTimeout(timer);
}
}, [resendSuccess]);
const handleInputChange = (index: number, value: string) => {
// Only allow digits
if (value && !/^\d$/.test(value)) return;
const newCode = [...code];
newCode[index] = value;
setCode(newCode);
setError("");
// Auto-advance to next input
if (value && index < 5) {
inputRefs.current[index + 1]?.focus();
}
// Auto-submit when all 6 digits entered
if (value && index === 5 && newCode.every((d) => d !== "")) {
handleVerify(newCode.join(""));
}
};
const handleKeyDown = (index: number, e: React.KeyboardEvent) => {
if (e.key === "Backspace" && !code[index] && index > 0) {
inputRefs.current[index - 1]?.focus();
}
};
const handlePaste = (e: React.ClipboardEvent) => {
e.preventDefault();
const pastedData = e.clipboardData
.getData("text")
.replace(/\D/g, "")
.slice(0, 6);
if (pastedData.length === 6) {
const newCode = pastedData.split("");
setCode(newCode);
handleVerify(pastedData);
}
};
const handleVerify = async (verificationCode: string) => {
setLoading(true);
setError("");
try {
await authAPI.verifyEmail(verificationCode);
await checkAuth(); // Refresh user data
onVerified();
onHide();
} catch (err: any) {
const errorData = err.response?.data;
if (errorData?.code === "TOO_MANY_ATTEMPTS") {
setError("Too many attempts. Please request a new code.");
} else if (errorData?.code === "VERIFICATION_EXPIRED") {
setError("Code expired. Please request a new one.");
} else if (errorData?.code === "VERIFICATION_INVALID") {
setError("Invalid code. Please check and try again.");
} else {
setError(errorData?.error || "Verification failed. Please try again.");
}
// Clear code on error
setCode(["", "", "", "", "", ""]);
inputRefs.current[0]?.focus();
} finally {
setLoading(false);
}
};
const handleResend = async () => {
setResending(true);
setError("");
setResendSuccess(false);
try {
await authAPI.resendVerification();
setResendCooldown(60); // 60 second cooldown
setResendSuccess(true);
setCode(["", "", "", "", "", ""]);
inputRefs.current[0]?.focus();
} catch (err: any) {
if (err.response?.status === 429) {
setError("Please wait before requesting another code.");
} else {
setError("Failed to resend code. Please try again.");
}
} finally {
setResending(false);
}
};
if (!show) return null;
return (
<div
className="modal show d-block"
tabIndex={-1}
style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
>
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content">
<div className="modal-header border-0 pb-0">
<button
type="button"
className="btn-close"
onClick={onHide}
aria-label="Close"
></button>
</div>
<div className="modal-body px-4 pb-4 text-center">
<i
className="bi bi-envelope-check text-success"
style={{ fontSize: "3rem" }}
></i>
<h4 className="mt-3">Verify Your Email</h4>
<p className="text-muted">
We sent a 6-digit code to <strong>{email}</strong>
</p>
{error && (
<div className="alert alert-danger py-2" role="alert">
{error}
</div>
)}
{resendSuccess && (
<div className="alert alert-success py-2" role="alert">
New code sent! Check your email.
</div>
)}
{/* 6-digit code input */}
<div
className="d-flex justify-content-center gap-2 my-4"
onPaste={handlePaste}
>
{code.map((digit, index) => (
<input
key={index}
ref={(el) => { inputRefs.current[index] = el; }}
type="text"
inputMode="numeric"
maxLength={1}
value={digit}
onChange={(e) => handleInputChange(index, e.target.value)}
onKeyDown={(e) => handleKeyDown(index, e)}
className="form-control text-center"
style={{
width: "50px",
height: "60px",
fontSize: "24px",
fontWeight: "bold",
}}
disabled={loading}
/>
))}
</div>
<button
className="btn btn-success w-100 py-3"
onClick={() => handleVerify(code.join(""))}
disabled={loading || code.some((d) => d === "")}
>
{loading ? (
<>
<span className="spinner-border spinner-border-sm me-2" />
Verifying...
</>
) : (
"Verify Email"
)}
</button>
<div className="mt-4">
<p className="text-muted small mb-2">Didn't receive the code?</p>
<button
className="btn btn-link text-decoration-none p-0"
onClick={handleResend}
disabled={resending || resendCooldown > 0}
>
{resendCooldown > 0
? `Resend in ${resendCooldown}s`
: resending
? "Sending..."
: "Resend Code"}
</button>
</div>
<p className="text-muted small mt-3">
Check your spam folder if you don't see the email.
</p>
</div>
</div>
</div>
</div>
);
};
export default VerificationCodeModal;

11
frontend/src/contexts/AuthContext.tsx
View File

@@ -13,11 +13,15 @@ import {
resetCSRFToken,
} from "../services/api";
interface RegisterResponse {
verificationEmailSent?: boolean;
}
interface AuthContextType {
user: User | null;
loading: boolean;
login: (email: string, password: string) => Promise<void>;
register: (data: any) => Promise<void>;
register: (data: any) => Promise<RegisterResponse>;
googleLogin: (code: string) => Promise<void>;
logout: () => Promise<void>;
updateUser: (user: User) => void;
@@ -98,11 +102,14 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
await fetchCSRFToken();
};
const register = async (data: any) => {
const register = async (data: any): Promise<RegisterResponse> => {
const response = await authAPI.register(data);
setUser(response.data.user);
// Fetch new CSRF token after registration
await fetchCSRFToken();
return {
verificationEmailSent: response.data.verificationEmailSent,
};
};
const googleLogin = async (code: string) => {

56
frontend/src/pages/CreateForumPost.tsx
View File

@@ -5,18 +5,21 @@ import { forumAPI, addressAPI } from "../services/api";
import { uploadFiles, getPublicImageUrl } from "../services/uploadService";
import TagInput from "../components/TagInput";
import ForumImageUpload from "../components/ForumImageUpload";
import VerificationCodeModal from "../components/VerificationCodeModal";
import { Address, ForumPost } from "../types";
const CreateForumPost: React.FC = () => {
const { id } = useParams<{ id: string }>();
const isEditMode = !!id;
const { user } = useAuth();
const { user, checkAuth } = useAuth();
const navigate = useNavigate();
const [loading, setLoading] = useState(isEditMode);
const [isSubmitting, setIsSubmitting] = useState(false);
const [error, setError] = useState<string | null>(null);
const [userAddresses, setUserAddresses] = useState<Address[]>([]);
const [existingImageKeys, setExistingImageKeys] = useState<string[]>([]);
const [showVerificationModal, setShowVerificationModal] = useState(false);
const [pendingSubmit, setPendingSubmit] = useState(false);
const [formData, setFormData] = useState({
title: "",
@@ -245,11 +248,32 @@ const CreateForumPost: React.FC = () => {
navigate(`/forum/${response.data.id}`);
}
} catch (err: any) {
// Check for email verification required error
if (
err.response?.status === 403 &&
err.response?.data?.code === "EMAIL_NOT_VERIFIED"
) {
setPendingSubmit(true);
setShowVerificationModal(true);
setIsSubmitting(false);
return;
}
setError(err.response?.data?.error || err.message || `Failed to ${isEditMode ? 'update' : 'create'} post`);
setIsSubmitting(false);
}
};
const handleVerificationSuccess = async () => {
setShowVerificationModal(false);
await checkAuth(); // Refresh user data
if (pendingSubmit) {
setPendingSubmit(false);
// Create a synthetic form event to retry submission
const syntheticEvent = { preventDefault: () => {} } as React.FormEvent;
handleSubmit(syntheticEvent);
}
};
if (loading) {
return (
<div className="container mt-4">
@@ -310,6 +334,23 @@ const CreateForumPost: React.FC = () => {
</ol>
</nav>
{/* Email Verification Warning Banner */}
{user && !user.isVerified && (
<div className="alert alert-warning d-flex align-items-center mb-4">
<i className="bi bi-exclamation-triangle-fill me-2"></i>
<div className="flex-grow-1">
<strong>Email verification required.</strong> Verify your email to
create forum posts.
</div>
<button
className="btn btn-warning btn-sm ms-3"
onClick={() => setShowVerificationModal(true)}
>
Verify Now
</button>
</div>
)}
<div className="row">
<div className="col-lg-8 mx-auto">
{/* Guidelines Card - only show for new posts */}
@@ -542,6 +583,19 @@ const CreateForumPost: React.FC = () => {
</div>
</div>
</div>
{/* Email Verification Modal */}
{user && (
<VerificationCodeModal
show={showVerificationModal}
onHide={() => {
setShowVerificationModal(false);
setPendingSubmit(false);
}}
email={user.email || ""}
onVerified={handleVerificationSuccess}
/>
)}
</div>
);
};

71
frontend/src/pages/CreateItem.tsx
View File

@@ -10,6 +10,7 @@ import LocationForm from "../components/LocationForm";
import DeliveryOptions from "../components/DeliveryOptions";
import PricingForm from "../components/PricingForm";
import RulesForm from "../components/RulesForm";
import VerificationCodeModal from "../components/VerificationCodeModal";
import { Address } from "../types";
import { IMAGE_LIMITS } from "../config/imageLimits";
@@ -48,9 +49,11 @@ interface ItemFormData {
const CreateItem: React.FC = () => {
const navigate = useNavigate();
const { user } = useAuth();
const { user, checkAuth } = useAuth();
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
const [showVerificationModal, setShowVerificationModal] = useState(false);
const [pendingSubmit, setPendingSubmit] = useState(false);
const [formData, setFormData] = useState<ItemFormData>({
name: "",
description: "",
@@ -265,12 +268,38 @@ const CreateItem: React.FC = () => {
navigate(`/items/${response.data.id}`);
} catch (err: any) {
setError(err.response?.data?.error || err.message || "Failed to create listing");
// Check if it's a 403 verification required error
if (
err.response?.status === 403 &&
err.response?.data?.code === "EMAIL_NOT_VERIFIED"
) {
setPendingSubmit(true);
setShowVerificationModal(true);
setError("");
} else {
setError(
err.response?.data?.error || err.message || "Failed to create listing"
);
}
} finally {
setLoading(false);
}
};
// Handle successful verification - retry form submission
const handleVerificationSuccess = async () => {
setShowVerificationModal(false);
await checkAuth(); // Refresh user data
if (pendingSubmit) {
setPendingSubmit(false);
// Create a synthetic event to trigger handleSubmit
const syntheticEvent = {
preventDefault: () => {},
} as React.FormEvent<HTMLFormElement>;
handleSubmit(syntheticEvent);
}
};
const handleChange = (
e: React.ChangeEvent<
HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
@@ -401,6 +430,26 @@ const CreateItem: React.FC = () => {
<div className="col-md-8">
<h1>List an Item for Rent</h1>
{/* Email verification warning banner */}
{user && !user.isVerified && (
<div
className="alert alert-warning d-flex align-items-center"
role="alert"
>
<i className="bi bi-exclamation-triangle-fill me-2"></i>
<div className="flex-grow-1">
Verify your email to create a listing.
</div>
<button
type="button"
className="btn btn-warning btn-sm"
onClick={() => setShowVerificationModal(true)}
>
Verify Now
</button>
</div>
)}
{error && (
<div className="alert alert-danger" role="alert">
{error}
@@ -484,10 +533,7 @@ const CreateItem: React.FC = () => {
onTierToggle={handleTierToggle}
/>
<RulesForm
rules={formData.rules || ""}
onChange={handleChange}
/>
<RulesForm rules={formData.rules || ""} onChange={handleChange} />
<div className="d-grid gap-2 mb-5">
<button
@@ -508,6 +554,19 @@ const CreateItem: React.FC = () => {
</form>
</div>
</div>
{/* Verification Code Modal */}
{showVerificationModal && user && (
<VerificationCodeModal
show={showVerificationModal}
onHide={() => {
setShowVerificationModal(false);
setPendingSubmit(false);
}}
email={user.email || ""}
onVerified={handleVerificationSuccess}
/>
)}
</div>
);
};

51
frontend/src/pages/ForumPostDetail.tsx
View File

@@ -9,10 +9,11 @@ import PostStatusBadge from '../components/PostStatusBadge';
import CommentThread from '../components/CommentThread';
import CommentForm from '../components/CommentForm';
import AuthButton from '../components/AuthButton';
import VerificationCodeModal from '../components/VerificationCodeModal';
const ForumPostDetail: React.FC = () => {
const { id } = useParams<{ id: string }>();
const { user } = useAuth();
const { user, checkAuth } = useAuth();
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const [post, setPost] = useState<ForumPost | null>(null);
@@ -20,6 +21,7 @@ const ForumPostDetail: React.FC = () => {
const [error, setError] = useState<string | null>(null);
const [actionLoading, setActionLoading] = useState(false);
const [showAdminModal, setShowAdminModal] = useState(false);
const [showVerificationModal, setShowVerificationModal] = useState(false);
const [adminAction, setAdminAction] = useState<{
type: 'deletePost' | 'deleteComment' | 'restorePost' | 'restoreComment' | 'closePost' | 'reopenPost';
id?: string;
@@ -68,6 +70,14 @@ const ForumPostDetail: React.FC = () => {
});
await fetchPost(); // Refresh to get new comment
} catch (err: any) {
// Check for email verification required error
if (
err.response?.status === 403 &&
err.response?.data?.code === "EMAIL_NOT_VERIFIED"
) {
setShowVerificationModal(true);
throw new Error('Email verification required to comment.');
}
throw new Error(err.response?.data?.error || err.message || 'Failed to post comment');
}
};
@@ -93,10 +103,23 @@ const ForumPostDetail: React.FC = () => {
});
await fetchPost(); // Refresh to get new reply
} catch (err: any) {
// Check for email verification required error
if (
err.response?.status === 403 &&
err.response?.data?.code === "EMAIL_NOT_VERIFIED"
) {
setShowVerificationModal(true);
throw new Error('Email verification required to reply.');
}
throw new Error(err.response?.data?.error || err.message || 'Failed to post reply');
}
};
const handleVerificationSuccess = async () => {
setShowVerificationModal(false);
await checkAuth(); // Refresh user data
};
const handleEditComment = async (
commentId: string,
content: string,
@@ -490,6 +513,7 @@ const ForumPostDetail: React.FC = () => {
isAdmin={isAdmin}
onAdminDelete={handleAdminDeleteComment}
onAdminRestore={handleAdminRestoreComment}
canReply={!!user}
/>
))}
</div>
@@ -529,6 +553,21 @@ const ForumPostDetail: React.FC = () => {
{post.status !== 'closed' && user ? (
<div>
{/* Email Verification Warning for unverified users */}
{!user.isVerified && (
<div className="alert alert-warning d-flex align-items-center mb-3">
<i className="bi bi-exclamation-triangle-fill me-2"></i>
<div className="flex-grow-1">
<strong>Email verification required.</strong> Verify your email to comment.
</div>
<button
className="btn btn-warning btn-sm ms-3"
onClick={() => setShowVerificationModal(true)}
>
Verify Now
</button>
</div>
)}
<h6>Add a comment</h6>
<CommentForm
onSubmit={handleAddComment}
@@ -673,6 +712,16 @@ const ForumPostDetail: React.FC = () => {
</div>
)}
{/* Email Verification Modal */}
{user && (
<VerificationCodeModal
show={showVerificationModal}
onHide={() => setShowVerificationModal(false)}
email={user.email || ""}
onVerified={handleVerificationSuccess}
/>
)}
</div>
</div>
);

54
frontend/src/pages/RentItem.tsx
View File

@@ -5,15 +5,18 @@ import { useAuth } from "../contexts/AuthContext";
import { itemAPI, rentalAPI } from "../services/api";
import { getPublicImageUrl } from "../services/uploadService";
import EmbeddedStripeCheckout from "../components/EmbeddedStripeCheckout";
import VerificationCodeModal from "../components/VerificationCodeModal";
const RentItem: React.FC = () => {
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
const { user } = useAuth();
const { user, checkAuth } = useAuth();
const [searchParams] = useSearchParams();
const [item, setItem] = useState<Item | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [showVerificationModal, setShowVerificationModal] = useState(false);
const [pendingSubmit, setPendingSubmit] = useState(false);
const [formData, setFormData] = useState({
deliveryMethod: "pickup" as "pickup" | "delivery",
@@ -163,12 +166,31 @@ const RentItem: React.FC = () => {
await rentalAPI.createRental(rentalData);
setCompleted(true);
} catch (error: any) {
// Check for email verification required error
if (
error.response?.status === 403 &&
error.response?.data?.code === "EMAIL_NOT_VERIFIED"
) {
setPendingSubmit(true);
setShowVerificationModal(true);
return;
}
setError(
error.response?.data?.error || "Failed to create rental request"
);
}
};
const handleVerificationSuccess = async () => {
setShowVerificationModal(false);
await checkAuth(); // Refresh user data
if (pendingSubmit) {
setPendingSubmit(false);
// Retry the rental submission
handleFreeBorrow();
}
};
const handleChange = (
e: React.ChangeEvent<
HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
@@ -213,6 +235,23 @@ const RentItem: React.FC = () => {
<div className="col-md-8">
<h1>Renting {item.name}</h1>
{/* Email Verification Warning Banner */}
{user && !user.isVerified && (
<div className="alert alert-warning d-flex align-items-center mb-4">
<i className="bi bi-exclamation-triangle-fill me-2"></i>
<div className="flex-grow-1">
<strong>Email verification required.</strong> Verify your email
to book rentals.
</div>
<button
className="btn btn-warning btn-sm ms-3"
onClick={() => setShowVerificationModal(true)}
>
Verify Now
</button>
</div>
)}
{error && (
<div className="alert alert-danger" role="alert">
{error}
@@ -426,6 +465,19 @@ const RentItem: React.FC = () => {
</div>
</div>
</div>
{/* Email Verification Modal */}
{user && (
<VerificationCodeModal
show={showVerificationModal}
onHide={() => {
setShowVerificationModal(false);
setPendingSubmit(false);
}}
email={user.email || ""}
onVerified={handleVerificationSuccess}
/>
)}
</div>
);
};

359
frontend/src/pages/VerifyEmail.tsx
View File

@@ -1,93 +1,234 @@
import React, { useEffect, useState, useRef } from 'react';
import { useNavigate, useSearchParams, Link } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
import { authAPI } from '../services/api';
import React, { useEffect, useState, useRef } from "react";
import { useNavigate, useSearchParams, Link } from "react-router-dom";
import { useAuth } from "../contexts/AuthContext";
import { authAPI } from "../services/api";
const VerifyEmail: React.FC = () => {
const [searchParams] = useSearchParams();
const navigate = useNavigate();
const { checkAuth, user } = useAuth();
const [error, setError] = useState<string>('');
const { checkAuth, user, loading: authLoading } = useAuth();
const [error, setError] = useState<string>("");
const [errorCode, setErrorCode] = useState<string>("");
const [success, setSuccess] = useState(false);
const [processing, setProcessing] = useState(true);
const [resending, setResending] = useState(false);
const [resendSuccess, setResendSuccess] = useState(false);
const [resendCooldown, setResendCooldown] = useState(0);
const [showManualEntry, setShowManualEntry] = useState(false);
const [code, setCode] = useState<string[]>(["", "", "", "", "", ""]);
const [verifying, setVerifying] = useState(false);
const hasProcessed = useRef(false);
const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
// Handle resend cooldown timer
useEffect(() => {
if (resendCooldown > 0) {
const timer = setTimeout(
() => setResendCooldown(resendCooldown - 1),
1000
);
return () => clearTimeout(timer);
}
}, [resendCooldown]);
// Clear resend success after 3 seconds
useEffect(() => {
if (resendSuccess) {
const timer = setTimeout(() => setResendSuccess(false), 3000);
return () => clearTimeout(timer);
}
}, [resendSuccess]);
// Check authentication and handle verification
useEffect(() => {
// Wait for auth to finish loading
if (authLoading) return;
const handleVerification = async () => {
// Prevent double execution in React StrictMode
if (hasProcessed.current) {
return;
}
if (hasProcessed.current) return;
hasProcessed.current = true;
try {
const token = searchParams.get('token');
const token = searchParams.get("token");
// If not logged in, redirect to login with return URL
if (!user) {
const returnUrl = token
? `/verify-email?token=${token}`
: "/verify-email";
navigate(`/?login=true&redirect=${encodeURIComponent(returnUrl)}`, {
replace: true,
});
return;
}
// If user is already verified, show success
if (user.isVerified) {
setSuccess(true);
setProcessing(false);
setTimeout(() => navigate("/", { replace: true }), 3000);
return;
}
// If no token in URL, show manual entry form
if (!token) {
setError('No verification token provided.');
setShowManualEntry(true);
setProcessing(false);
return;
}
// Verify the email with the token
// Auto-verify with token from URL
try {
await authAPI.verifyEmail(token);
setSuccess(true);
setProcessing(false);
// Refresh user data to update isVerified status
await checkAuth();
// Redirect to home after 3 seconds
setTimeout(() => {
navigate('/', { replace: true });
}, 3000);
setTimeout(() => navigate("/", { replace: true }), 3000);
} catch (err: any) {
console.error('Email verification error:', err);
const errorData = err.response?.data;
if (errorData?.code === 'VERIFICATION_TOKEN_EXPIRED') {
setError('Your verification link has expired. Please request a new one.');
} else if (errorData?.code === 'VERIFICATION_TOKEN_INVALID') {
setError('Invalid verification link. The link may have already been used or is incorrect.');
} else if (errorData?.code === 'ALREADY_VERIFIED') {
setError('Your email is already verified.');
} else {
setError(errorData?.error || 'Failed to verify email. Please try again.');
}
handleVerificationError(err);
setProcessing(false);
}
};
handleVerification();
}, [searchParams, navigate, checkAuth]);
}, [searchParams, navigate, checkAuth, user, authLoading]);
const handleVerificationError = (err: any) => {
const errorData = err.response?.data;
const code = errorData?.code || "";
setErrorCode(code);
switch (code) {
case "VERIFICATION_EXPIRED":
setError("Your verification code has expired. Please request a new one.");
setShowManualEntry(true);
break;
case "VERIFICATION_INVALID":
setError("Invalid verification code. Please check and try again.");
setShowManualEntry(true);
break;
case "TOO_MANY_ATTEMPTS":
setError("Too many attempts. Please request a new code.");
setShowManualEntry(true);
break;
case "ALREADY_VERIFIED":
setError("Your email is already verified.");
break;
case "NO_CODE":
setError("No verification code found. Please request a new one.");
setShowManualEntry(true);
break;
default:
setError(errorData?.error || "Failed to verify email. Please try again.");
setShowManualEntry(true);
}
};
const handleInputChange = (index: number, value: string) => {
if (value && !/^\d$/.test(value)) return;
const newCode = [...code];
newCode[index] = value;
setCode(newCode);
setError("");
setErrorCode("");
if (value && index < 5) {
inputRefs.current[index + 1]?.focus();
}
if (value && index === 5 && newCode.every((d) => d !== "")) {
handleManualVerify(newCode.join(""));
}
};
const handleKeyDown = (index: number, e: React.KeyboardEvent) => {
if (e.key === "Backspace" && !code[index] && index > 0) {
inputRefs.current[index - 1]?.focus();
}
};
const handlePaste = (e: React.ClipboardEvent) => {
e.preventDefault();
const pastedData = e.clipboardData
.getData("text")
.replace(/\D/g, "")
.slice(0, 6);
if (pastedData.length === 6) {
const newCode = pastedData.split("");
setCode(newCode);
handleManualVerify(pastedData);
}
};
const handleManualVerify = async (verificationCode: string) => {
setVerifying(true);
setError("");
setErrorCode("");
try {
await authAPI.verifyEmail(verificationCode);
setSuccess(true);
await checkAuth();
setTimeout(() => navigate("/", { replace: true }), 3000);
} catch (err: any) {
handleVerificationError(err);
setCode(["", "", "", "", "", ""]);
inputRefs.current[0]?.focus();
} finally {
setVerifying(false);
}
};
const handleResendVerification = async () => {
setResending(true);
setError('');
setError("");
setErrorCode("");
setResendSuccess(false);
try {
await authAPI.resendVerification();
setError('');
alert('Verification email sent! Please check your inbox.');
setResendSuccess(true);
setResendCooldown(60);
setCode(["", "", "", "", "", ""]);
inputRefs.current[0]?.focus();
} catch (err: any) {
console.error('Resend verification error:', err);
const errorData = err.response?.data;
if (errorData?.code === 'ALREADY_VERIFIED') {
setError('Your email is already verified.');
} else if (errorData?.code === 'NO_TOKEN') {
setError('You must be logged in to resend the verification email.');
if (errorData?.code === "ALREADY_VERIFIED") {
setError("Your email is already verified.");
} else if (err.response?.status === 429) {
setError("Please wait before requesting another code.");
} else {
setError(errorData?.error || 'Failed to resend verification email. Please try again.');
setError(
errorData?.error ||
"Failed to resend verification email. Please try again."
);
}
} finally {
setResending(false);
}
};
// Show loading while auth is initializing
if (authLoading) {
return (
<div className="container">
<div className="row justify-content-center mt-5">
<div className="col-md-6">
<div className="card">
<div className="card-body text-center py-5">
<div className="spinner-border text-primary mb-3" role="status">
<span className="visually-hidden">Loading...</span>
</div>
<h5>Loading...</h5>
</div>
</div>
</div>
</div>
</div>
);
}
return (
<div className="container">
<div className="row justify-content-center mt-5">
@@ -96,38 +237,136 @@ const VerifyEmail: React.FC = () => {
<div className="card-body text-center py-5">
{processing ? (
<>
<div className="spinner-border text-primary mb-3" role="status">
<div
className="spinner-border text-primary mb-3"
role="status"
>
<span className="visually-hidden">Loading...</span>
</div>
<h5>Verifying Your Email...</h5>
<p className="text-muted">Please wait while we verify your email address.</p>
<p className="text-muted">
Please wait while we verify your email address.
</p>
</>
) : success ? (
<>
<i className="bi bi-check-circle text-success" style={{ fontSize: '3rem' }}></i>
<i
className="bi bi-check-circle text-success"
style={{ fontSize: "3rem" }}
></i>
<h5 className="mt-3">Email Verified Successfully!</h5>
<p className="text-muted">
Your email has been verified. You will be redirected to the home page shortly.
Your email has been verified. You will be redirected
shortly.
</p>
<Link to="/" className="btn btn-primary mt-3">
<Link to="/" className="btn btn-success mt-3">
Go to Home
</Link>
</>
) : showManualEntry ? (
<>
<i
className="bi bi-envelope-check text-success"
style={{ fontSize: "3rem" }}
></i>
<h5 className="mt-3">Enter Verification Code</h5>
<p className="text-muted">
Enter the 6-digit code sent to your email
</p>
{error && (
<div className="alert alert-danger py-2" role="alert">
{error}
</div>
)}
{resendSuccess && (
<div className="alert alert-success py-2" role="alert">
New code sent! Check your email.
</div>
)}
{/* 6-digit code input */}
<div
className="d-flex justify-content-center gap-2 my-4"
onPaste={handlePaste}
>
{code.map((digit, index) => (
<input
key={index}
ref={(el) => { inputRefs.current[index] = el; }}
type="text"
inputMode="numeric"
maxLength={1}
value={digit}
onChange={(e) =>
handleInputChange(index, e.target.value)
}
onKeyDown={(e) => handleKeyDown(index, e)}
className="form-control text-center"
style={{
width: "50px",
height: "60px",
fontSize: "24px",
fontWeight: "bold",
}}
disabled={verifying}
/>
))}
</div>
<button
className="btn btn-success w-100 py-3"
onClick={() => handleManualVerify(code.join(""))}
disabled={verifying || code.some((d) => d === "")}
>
{verifying ? (
<>
<span className="spinner-border spinner-border-sm me-2" />
Verifying...
</>
) : (
"Verify Email"
)}
</button>
<div className="mt-4">
<p className="text-muted small mb-2">
Didn't receive the code?
</p>
<button
className="btn btn-link text-decoration-none p-0"
onClick={handleResendVerification}
disabled={resending || resendCooldown > 0}
>
{resendCooldown > 0
? `Resend in ${resendCooldown}s`
: resending
? "Sending..."
: "Resend Code"}
</button>
</div>
<p className="text-muted small mt-3">
Check your spam folder if you don't see the email.
</p>
<Link
to="/"
className="btn btn-outline-secondary mt-3"
>
Return to Home
</Link>
</>
) : error ? (
<>
<i className="bi bi-exclamation-circle text-danger" style={{ fontSize: '3rem' }}></i>
<i
className="bi bi-exclamation-circle text-danger"
style={{ fontSize: "3rem" }}
></i>
<h5 className="mt-3">Verification Failed</h5>
<p className="text-danger">{error}</p>
<div className="mt-3">
{user && !error.includes('already verified') && (
<button
className="btn btn-primary me-2"
onClick={handleResendVerification}
disabled={resending}
>
{resending ? 'Sending...' : 'Resend Verification Email'}
</button>
)}
<Link to="/" className="btn btn-outline-secondary">
Return to Home
</Link>

2
frontend/src/services/api.ts
View File

@@ -162,7 +162,7 @@ export const authAPI = {
refresh: () => api.post("/auth/refresh"),
getCSRFToken: () => api.get("/auth/csrf-token"),
getStatus: () => api.get("/auth/status"),
verifyEmail: (token: string) => api.post("/auth/verify-email", { token }),
verifyEmail: (code: string) => api.post("/auth/verify-email", { code }),
resendVerification: () => api.post("/auth/resend-verification"),
forgotPassword: (email: string) =>
api.post("/auth/forgot-password", { email }),