User Registration Flow

Registration Form Component

import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
import PasswordStrengthMeter from './PasswordStrengthMeter';
import './RegistrationForm.css';

// Validation schema using Yup
const schema = yup.object().shape({
  username: yup
    .string()
    .required('Username is required')
    .min(3, 'Username must be at least 3 characters')
    .max(20, 'Username cannot exceed 20 characters')
    .matches(/^[a-zA-Z0-9_]+$/, 'Username can only contain letters, numbers and underscores'),
  
  email: yup
    .string()
    .required('Email is required')
    .email('Please enter a valid email address'),
  
  password: yup
    .string()
    .required('Password is required')
    .min(8, 'Password must be at least 8 characters')
    .matches(
      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/,
      'Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character'
    ),
  
  confirmPassword: yup
    .string()
    .required('Please confirm your password')
    .oneOf([yup.ref('password'), null], 'Passwords must match'),
  
  terms: yup
    .boolean()
    .oneOf([true], 'You must accept the terms and conditions')
});

const RegistrationForm = () => {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [serverError, setServerError] = useState('');
  const [registrationSuccess, setRegistrationSuccess] = useState(false);
  
  const { register, handleSubmit, watch, formState: { errors } } = useForm({
    resolver: yupResolver(schema),
    mode: 'onChange'
  });
  
  // Watch password field for strength meter
  const password = watch('password', '');
  
  const onSubmit = async (data) => {
    try {
      setIsSubmitting(true);
      setServerError('');
      
      // Make API call to register user
      const response = await fetch('/api/auth/register', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          username: data.username,
          email: data.email,
          password: data.password
        }),
      });
      
      const result = await response.json();
      
      if (!response.ok) {
        throw new Error(result.message || 'Registration failed');
      }
      
      // Show success message
      setRegistrationSuccess(true);
    } catch (error) {
      setServerError(error.message);
    } finally {
      setIsSubmitting(false);
    }
  };
  
  if (registrationSuccess) {
    return (
      

        
Registration Successful!
        
Please check your email to verify your account.
      
    );
  }
  
  return (
    <div className="registration-form-container">
      <h2>Create an Account</h2>
      
      {serverError && (
        <div className="error-message server-error">
          {serverError}
        </div>
      )}
      
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="form-group">
          <label htmlFor="username">Username</label>
          <input
            id="username"
            type="text"
            {...register('username')}
            className={errors.username ? 'is-invalid' : ''}
          />
          {errors.username && (
            <div className="error-message">{errors.username.message}</div>
          )}
        </div>
        
        <div className="form-group">
          <label htmlFor="email">Email Address</label>
          <input
            id="email"
            type="email"
            {...register('email')}
            className={errors.email ? 'is-invalid' : ''}
          />
          {errors.email && (
            <div className="error-message">{errors.email.message}</div>
          )}
        </div>
        
        <div className="form-group">
          <label htmlFor="password">Password</label>
          <input
            id="password"
            type="password"
            {...register('password')}
            className={errors.password ? 'is-invalid' : ''}
          />
          {password && <PasswordStrengthMeter password={password} />}
          {errors.password && (
            <div className="error-message">{errors.password.message}</div>
          )}
        </div>
        
        <div className="form-group">
          <label htmlFor="confirmPassword">Confirm Password</label>
          <input
            id="confirmPassword"
            type="password"
            {...register('confirmPassword')}
            className={errors.confirmPassword ? 'is-invalid' : ''}
          />
          {errors.confirmPassword && (
            <div className="error-message">{errors.confirmPassword.message}</div>
          )}
        </div>
        
        <div className="form-group checkbox-group">
          <input
            id="terms"
            type="checkbox"
            {...register('terms')}
            className={errors.terms ? 'is-invalid' : ''}
          />
          <label htmlFor="terms">
            I agree to the <a href="/terms" target="_blank">Terms and Conditions</a>
          </label>
          {errors.terms && (
            <div className="error-message">{errors.terms.message}</div>
          )}
        </div>
        
        <button
          type="submit"
          className="submit-button"
          disabled={isSubmitting}
        >
          {isSubmitting ? 'Creating Account...' : 'Create Account'}
        </button>
        
        <div className="login-link">
          Already have an account? <a href="/login">Login here</a>
        </div>
      </form>
    </div>
  );
  };

export default RegistrationForm;
                

Password Strength Meter Component

import React from 'react';
import './PasswordStrengthMeter.css';

const PasswordStrengthMeter = ({ password }) => {
  // Calculate password strength
  const calculateStrength = (password) => {
    let strength = 0;
    
    // Length check
    if (password.length >= 8) strength += 1;
    if (password.length >= 12) strength += 1;
    
    // Character variety checks
    if (/[A-Z]/.test(password)) strength += 1; // Has uppercase
    if (/[a-z]/.test(password)) strength += 1; // Has lowercase
    if (/[0-9]/.test(password)) strength += 1; // Has number
    if (/[^A-Za-z0-9]/.test(password)) strength += 1; // Has special char
    
    return Math.min(strength, 5); // Max strength of 5
  };
  
  const strength = calculateStrength(password);
  
  // Labels and colors based on strength
  const labels = ['Very Weak', 'Weak', 'Fair', 'Good', 'Strong', 'Very Strong'];
  const widthPercentage = (strength / 5) * 100;
  
  // Determine color based on strength
  let meterColor;
  if (strength <= 1) meterColor = '#ff3e36'; // Red
  else if (strength <= 2) meterColor = '#ff691f'; // Orange
  else if (strength <= 3) meterColor = '#ffda36'; // Yellow
  else if (strength <= 4) meterColor = '#0be881'; // Light Green
  else meterColor = '#20bf6b'; // Green
  
  return (
  <div className="password-strength-meter">
    <div className="strength-meter">
      <div
        className="strength-meter-fill"
        style={{
          width: `${widthPercentage}%`,
          backgroundColor: meterColor
        }}
      ></div>
    </div>
    <div className="strength-label" style={{ color: meterColor }}>
      {labels[strength]}
    </div>
  </div>
);
};
export default PasswordStrengthMeter;
                

CSS Styling

/* RegistrationForm.css */
.registration-form-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 2rem;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

input.is-invalid {
  border-color: #dc3545;
}

.error-message {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

.server-error {
  background-color: #f8d7da;
  color: #721c24;
  padding: 0.75rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.checkbox-group {
  display: flex;
  align-items: flex-start;
}

.checkbox-group input {
  margin-top: 0.25rem;
  margin-right: 0.5rem;
}

.submit-button {
  width: 100%;
  padding: 0.75rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.submit-button:hover {
  background-color: #0069d9;
}

.submit-button:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

.login-link {
  text-align: center;
  margin-top: 1.5rem;
}

.registration-success {
  text-align: center;
  padding: 2rem;
  background-color: #d4edda;
  border-radius: 8px;
  color: #155724;
}

/* PasswordStrengthMeter.css */
.password-strength-meter {
  margin-top: 0.5rem;
}

.strength-meter {
  height: 4px;
  background-color: #eee;
  border-radius: 2px;
  overflow: hidden;
}

.strength-meter-fill {
  height: 100%;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.strength-label {
  font-size: 0.75rem;
  margin-top: 0.25rem;
  text-align: right;
}
                

User Model (models/User.js)

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

const UserSchema = new mongoose.Schema({
  username: {
    type: String,
    required: [true, 'Please provide a username'],
    unique: true,
    trim: true,
    minlength: [3, 'Username must be at least 3 characters'],
    maxlength: [20, 'Username cannot exceed 20 characters'],
    match: [/^[a-zA-Z0-9_]+$/, 'Username can only contain letters, numbers and underscores']
  },
  email: {
    type: String,
    required: [true, 'Please provide an email'],
    unique: true,
    lowercase: true,
    match: [/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/, 'Please provide a valid email']
  },
  password: {
    type: String,
    required: [true, 'Please provide a password'],
    minlength: [8, 'Password must be at least 8 characters'],
    select: false // Don't include password in query results by default
  },
  isEmailVerified: {
    type: Boolean,
    default: false
  },
  emailVerificationToken: String,
  emailVerificationExpire: Date,
  role: {
    type: String,
    enum: ['user', 'admin'],
    default: 'user'
  },
  createdAt: {
    type: Date,
    default: Date.now
  }
});

// Encrypt password using bcrypt before saving
UserSchema.pre('save', async function(next) {
  // Only hash the password if it's modified (or new)
  if (!this.isModified('password')) {
    return next();
  }
  
  try {
    // Generate a salt
    const salt = await bcrypt.genSalt(10);
    
    // Hash the password along with the new salt
    this.password = await bcrypt.hash(this.password, salt);
    next();
  } catch (error) {
    next(error);
  }
});

// Generate email verification token
UserSchema.methods.generateEmailVerificationToken = function() {
  // Create a verification token
  const verificationToken = crypto.randomBytes(20).toString('hex');
  
  // Hash token and set to emailVerificationToken field
  this.emailVerificationToken = crypto
    .createHash('sha256')
    .update(verificationToken)
    .digest('hex');
  
  // Set token expire time (24 hours)
  this.emailVerificationExpire = Date.now() + 24 * 60 * 60 * 1000;
  
  return verificationToken;
};

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

Registration Controller (controllers/authController.js)

const User = require('../models/User');
const ErrorResponse = require('../utils/errorResponse');
const asyncHandler = require('../middleware/async');
const sendEmail = require('../utils/sendEmail');

// @desc    Register user
// @route   POST /api/v1/auth/register
// @access  Public
exports.register = asyncHandler(async (req, res, next) => {
  const { username, email, password } = req.body;

  // Check if user already exists
  const existingUser = await User.findOne({ 
    $or: [{ email }, { username }] 
  });
  
  if (existingUser) {
    return next(
      new ErrorResponse(
        existingUser.email === email
          ? 'Email already in use'
          : 'Username already taken',
        400
      )
    );
  }

  // Create user
  const user = await User.create({
    username,
    email,
    password
  });

  // Generate email verification token
  const verificationToken = user.generateEmailVerificationToken();
  
  await user.save({ validateBeforeSave: false });

  // Create verification URL
  const verificationUrl = `${req.protocol}://${req.get(
    'host'
  )}/api/v1/auth/verify-email/${verificationToken}`;

  const message = `
    Thank you for registering! Please verify your email address by clicking the link below:
    
    ${verificationUrl}
    
    This link will expire in 24 hours.
    
    If you did not register for this account, please ignore this email.
  `;

  try {
    await sendEmail({
      email: user.email,
      subject: 'Email Verification',
      message
    });

    // Send response without the verification token
    res.status(201).json({
      success: true,
      message: 'User registered successfully. Please check your email to verify your account.'
    });
  } catch (err) {
    // If sending email fails, delete the user and return an error
    user.emailVerificationToken = undefined;
    user.emailVerificationExpire = undefined;
    await user.save({ validateBeforeSave: false });

    return next(new ErrorResponse('Email could not be sent', 500));
  }
});

// @desc    Verify email
// @route   GET /api/v1/auth/verify-email/:token
// @access  Public
exports.verifyEmail = asyncHandler(async (req, res, next) => {
  // Get hashed token
  const emailVerificationToken = crypto
    .createHash('sha256')
    .update(req.params.token)
    .digest('hex');

  // Find user by token
  const user = await User.findOne({
    emailVerificationToken,
    emailVerificationExpire: { $gt: Date.now() }
  });

  if (!user) {
    return next(new ErrorResponse('Invalid or expired token', 400));
  }

  // Set isEmailVerified to true and remove verification fields
  user.isEmailVerified = true;
  user.emailVerificationToken = undefined;
  user.emailVerificationExpire = undefined;

  await user.save();

  res.status(200).json({
    success: true,
    message: 'Email verified successfully'
  });
});
                

Email Sending Utility (utils/sendEmail.js)

const nodemailer = require('nodemailer');

const sendEmail = async (options) => {
  // Create a transporter
  const transporter = nodemailer.createTransport({
    host: process.env.SMTP_HOST,
    port: process.env.SMTP_PORT,
    auth: {
      user: process.env.SMTP_EMAIL,
      pass: process.env.SMTP_PASSWORD
    }
  });

  // Define email options
  const mailOptions = {
    from: `${process.env.FROM_NAME} <${process.env.FROM_EMAIL}>`,
    to: options.email,
    subject: options.subject,
    text: options.message
  };

  // Send email
  await transporter.sendMail(mailOptions);
};

module.exports = sendEmail;
                

Auth Routes (routes/auth.js)

const express = require('express');
const { register, verifyEmail } = require('../controllers/authController');

const router = express.Router();

router.post('/register', register);
router.get('/verify-email/:token', verifyEmail);

module.exports = router;
                

Error Handling (utils/errorResponse.js)

class ErrorResponse extends Error {
  constructor(message, statusCode) {
    super(message);
    this.statusCode = statusCode;
  }
}

module.exports = ErrorResponse;
                

Async Handler Middleware (middleware/async.js)

const asyncHandler = fn => (req, res, next) =>
  Promise.resolve(fn(req, res, next)).catch(next);

module.exports = asyncHandler;
                

Express Validator Middleware (middleware/validators.js)

const { body, validationResult } = require('express-validator');

// User registration validator
exports.validateUserRegistration = [
  body('username')
    .trim()
    .isLength({ min: 3, max: 20 })
    .withMessage('Username must be between 3 and 20 characters')
    .matches(/^[a-zA-Z0-9_]+$/)
    .withMessage('Username can only contain letters, numbers and underscores')
    .escape(),
    
  body('email')
    .trim()
    .isEmail()
    .withMessage('Please provide a valid email address')
    .normalizeEmail(),
    
  body('password')
    .isLength({ min: 8 })
    .withMessage('Password must be at least 8 characters')
    .matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/)
    .withMessage('Password must include one uppercase letter, one lowercase letter, one number, and one special character'),
  
  // Validation handler middleware
  (req, res, next) => {
    const errors = validationResult(req);
    
    if (!errors.isEmpty()) {
      // Format error messages
      const errorMessages = errors.array().map(error => ({
        field: error.param,
        message: error.msg
      }));
      
      return res.status(400).json({
        success: false,
        errors: errorMessages
      });
    }
    
    next();
  }
];
                

Updated Auth Routes with Validation

const express = require('express');
const { register, verifyEmail } = require('../controllers/authController');
const { validateUserRegistration } = require('../middleware/validators');

const router = express.Router();

router.post('/register', validateUserRegistration, register);
router.get('/verify-email/:token', verifyEmail);

module.exports = router;
                

Handlebars Email Template (templates/verification-email.handlebars)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Verify Your Email</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      color: #333;
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
    }
    .logo {
      text-align: center;
      margin-bottom: 20px;
    }
    .container {
      background-color: #f9f9f9;
      border-radius: 5px;
      padding: 20px;
    }
    .button {
      display: inline-block;
      background-color: #007bff;
      color: white;
      text-decoration: none;
      padding: 10px 20px;
      border-radius: 4px;
      margin: 20px 0;
    }
    .footer {
      margin-top: 30px;
      font-size: 12px;
      color: #777;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="logo">
    <img src="https://example.com/logo.png" alt="Company Logo" width="150">
  </div>
  
  <div class="container">
    <h2>Hello {{username}},</h2>
    
    <p>Thank you for registering! To complete your registration and verify your email address, please click the button below:</p>
    
    <p style="text-align: center;">
      <a href="{{verificationUrl}}" class="button">Verify Email Address</a>
    </p>
    
    <p>If the button doesn't work, copy and paste this link into your browser:</p>
    <p>{{verificationUrl}}</p>
    
    <p>This link will expire in 24 hours.</p>
    
    <p>If you didn't register for this account, you can safely ignore this email.</p>
  </div>
  
  <div class="footer">
    <p>© 2025 Your Company. All rights reserved.</p>
    <p>123 Business Ave, Suite 100, City, State 12345</p>
  </div>
</body>
</html>
                

Updated Email Sending Utility with Templates

const nodemailer = require('nodemailer');
const handlebars = require('handlebars');
const fs = require('fs');
const path = require('path');

// Read template file
const readHTMLFile = (path) => {
  return new Promise((resolve, reject) => {
    fs.readFile(path, { encoding: 'utf-8' }, (err, html) => {
      if (err) {
        reject(err);
      } else {
        resolve(html);
      }
    });
  });
};

const sendEmail = async (options) => {
  // Create a transporter
  const transporter = nodemailer.createTransport({
    host: process.env.SMTP_HOST,
    port: process.env.SMTP_PORT,
    auth: {
      user: process.env.SMTP_EMAIL,
      pass: process.env.SMTP_PASSWORD
    }
  });

  let htmlToSend = options.message;
  
  // If template is provided, use it
  if (options.template) {
    const templatePath = path.join(__dirname, `../templates/${options.template}.handlebars`);
    const template = await readHTMLFile(templatePath);
    const compiledTemplate = handlebars.compile(template);
    htmlToSend = compiledTemplate(options.context);
  }

  // Define email options
  const mailOptions = {
    from: `${process.env.FROM_NAME} <${process.env.FROM_EMAIL}>`,
    to: options.email,
    subject: options.subject,
    text: options.message, // Plain text version
    html: htmlToSend // HTML version
  };

  // Send email
  await transporter.sendMail(mailOptions);
};

module.exports = sendEmail;
                

Updated Registration Controller

// Inside the register function
try {
  await sendEmail({
    email: user.email,
    subject: 'Verify Your Email',
    template: 'verification-email',
    context: {
      username: user.username,
      verificationUrl: verificationUrl
    }
  });

  // Rest of the code...
}
                

const express = require('express');
const csrf = require('csurf');
const cookieParser = require('cookie-parser');

const app = express();

// Use cookie-parser middleware
app.use(cookieParser());

// Initialize CSRF protection
const csrfProtection = csrf({ cookie: true });

// Apply CSRF protection to routes that need it
app.get('/register', csrfProtection, (req, res) => {
  // Pass the CSRF token to the form
  res.render('register', { csrfToken: req.csrfToken() });
});

app.post('/api/auth/register', csrfProtection, (req, res) => {
  // CSRF token is automatically validated
  // Registration logic here
});
                

const rateLimit = require('express-rate-limit');

// Create a limiter for registration attempts
const registerLimiter = rateLimit({
  windowMs: 60 * 60 * 1000, // 1 hour
  max: 5, // Limit each IP to 5 registration attempts per hour
  message: 'Too many registration attempts from this IP, please try again after an hour'
});

// Apply the limiter to registration route
app.use('/api/auth/register', registerLimiter);
                

Frontend Integration

import React from 'react';
import ReCAPTCHA from 'react-google-recaptcha';

const RegistrationForm = () => {
  const [captchaToken, setCaptchaToken] = useState(null);
  
  const handleCaptchaChange = (token) => {
    setCaptchaToken(token);
  };
  
  const onSubmit = async (data) => {
    if (!captchaToken) {
      setServerError('Please complete the CAPTCHA');
      return;
    }
    
    // Include captchaToken with registration data
    const registrationData = {
      ...data,
      recaptchaToken: captchaToken
    };
    
    // Submit to server
    // ...
  };
  
  return (
    

      {/* Form fields */}
      
      

        
      
      
      Register
    
  );
};
                

Backend Verification

const axios = require('axios');

// CAPTCHA verification middleware
const verifyCaptcha = async (req, res, next) => {
  const { recaptchaToken } = req.body;
  
  if (!recaptchaToken) {
    return res.status(400).json({
      success: false,
      message: 'CAPTCHA verification failed'
    });
  }
  
  try {
    // Verify CAPTCHA token with Google
    const response = await axios.post(
      `https://www.google.com/recaptcha/api/siteverify?secret=${process.env.RECAPTCHA_SECRET_KEY}&response=${recaptchaToken}`
    );
    
    const { success, score } = response.data;
    
    // For reCAPTCHA v3, check the score
    if (!success || score < 0.5) {
      return res.status(400).json({
        success: false,
        message: 'CAPTCHA verification failed'
      });
    }
    
    next();
  } catch (error) {
    return res.status(500).json({
      success: false,
      message: 'Error verifying CAPTCHA'
    });
  }
};

// Apply middleware to registration route
router.post('/register', validateUserRegistration, verifyCaptcha, register);
                

const passwordValidator = require('password-validator');
const commonPasswords = require('common-password-list');

// Create a schema for password validation
const passwordSchema = new passwordValidator();

// Add password rules
passwordSchema
  .is().min(8)                                   // Minimum length 8
  .is().max(100)                                 // Maximum length 100
  .has().uppercase()                             // Must have uppercase letters
  .has().lowercase()                             // Must have lowercase letters
  .has().digits(1)                               // Must have at least 1 digit
  .has().symbols(1)                              // Must have at least 1 symbol
  .has().not().spaces()                          // Should not have spaces
  .is().not().oneOf(commonPasswords.get(1000));  // Blacklist common passwords

// Middleware for password validation
const validatePassword = (req, res, next) => {
  const { password } = req.body;
  
  // Validate password against schema
  const validationResult = passwordSchema.validate(password, { list: true });
  
  if (validationResult.length > 0) {
    // Map validation errors to messages
    const errorMessages = validationResult.map(error => {
      switch (error) {
        case 'min':
          return 'Password must be at least 8 characters';
        case 'max':
          return 'Password cannot exceed 100 characters';
        case 'uppercase':
          return 'Password must contain at least one uppercase letter';
        case 'lowercase':
          return 'Password must contain at least one lowercase letter';
        case 'digits':
          return 'Password must contain at least one number';
        case 'symbols':
          return 'Password must contain at least one special character';
        case 'spaces':
          return 'Password cannot contain spaces';
        case 'oneOf':
          return 'Password is too common and easily guessed';
        default:
          return 'Password does not meet security requirements';
      }
    });
    
    return res.status(400).json({
      success: false,
      errors: errorMessages
    });
  }
  
  next();
};
                

const request = require('supertest');
const app = require('../app');
const User = require('../models/User');
const mongoose = require('mongoose');

// Mock email sending
jest.mock('../utils/sendEmail', () => {
  return jest.fn().mockImplementation(() => Promise.resolve());
});

describe('User Registration', () => {
  beforeAll(async () => {
    await mongoose.connect(process.env.MONGO_URI_TEST, {
      useNewUrlParser: true,
      useUnifiedTopology: true
    });
  });

  afterAll(async () => {
    await mongoose.connection.dropDatabase();
    await mongoose.connection.close();
  });

  beforeEach(async () => {
    await User.deleteMany({});
  });

  describe('POST /api/v1/auth/register', () => {
    it('should register a new user', async () => {
      const res = await request(app)
        .post('/api/v1/auth/register')
        .send({
          username: 'testuser',
          email: 'test@example.com',
          password: 'Test1234!'
        });
      
      expect(res.statusCode).toEqual(201);
      expect(res.body).toHaveProperty('success', true);
      
      // Check if user was created in database
      const user = await User.findOne({ email: 'test@example.com' });
      expect(user).toBeTruthy();
      expect(user.username).toBe('testuser');
      expect(user.isEmailVerified).toBe(false);
      expect(user.emailVerificationToken).toBeTruthy();
    });

    it('should not register a user with an existing email', async () => {
      // First create a user
      await User.create({
        username: 'existinguser',
        email: 'existing@example.com',
        password: 'Existing1234!'
      });
      
      // Try to register with the same email
      const res = await request(app)
        .post('/api/v1/auth/register')
        .send({
          username: 'newuser',
          email: 'existing@example.com',
          password: 'Test1234!'
        });
      
      expect(res.statusCode).toEqual(400);
      expect(res.body).toHaveProperty('success', false);
      expect(res.body.error).toContain('Email already in use');
    });

    it('should validate password strength', async () => {
      const res = await request(app)
        .post('/api/v1/auth/register')
        .send({
          username: 'testuser',
          email: 'test@example.com',
          password: 'weak'  // Too short, no uppercase, no number, no special char
        });
      
      expect(res.statusCode).toEqual(400);
      expect(res.body).toHaveProperty('success', false);
      expect(res.body.errors).toBeTruthy();
    });
  });

  describe('GET /api/v1/auth/verify-email/:token', () => {
    it('should verify email with valid token', async () => {
      // Create a user with verification token
      const user = new User({
        username: 'verifyuser',
        email: 'verify@example.com',
        password: 'Verify1234!'
      });
      
      const verificationToken = user.generateEmailVerificationToken();
      await user.save();
      
      // Verify email
      const res = await request(app)
        .get(`/api/v1/auth/verify-email/${verificationToken}`);
      
      expect(res.statusCode).toEqual(200);
      expect(res.body).toHaveProperty('success', true);
      
      // Check if user is now verified
      const updatedUser = await User.findById(user._id);
      expect(updatedUser.isEmailVerified).toBe(true);
      expect(updatedUser.emailVerificationToken).toBeUndefined();
    });

    it('should reject invalid verification tokens', async () => {
      const res = await request(app)
        .get('/api/v1/auth/verify-email/invalidtoken');
      
      expect(res.statusCode).toEqual(400);
      expect(res.body).toHaveProperty('success', false);
    });
  });
});
                

// Example Cypress test for registration form
describe('User Registration', () => {
  beforeEach(() => {
    cy.visit('/register');
  });

  it('should show validation errors for invalid inputs', () => {
    // Submit empty form
    cy.get('button[type="submit"]').click();
    
    // Check for validation errors
    cy.get('.error-message').should('have.length.at.least', 3);
    
    // Fill with invalid data
    cy.get('#username').type('u');  // Too short
    cy.get('#email').type('invalid-email');  // Invalid format
    cy.get('#password').type('weak');  // Weak password
    
    // Submit form
    cy.get('button[type="submit"]').click();
    
    // Check for specific error messages
    cy.contains('Username must be at least 3 characters');
    cy.contains('Please enter a valid email address');
    cy.contains('Password must be at least 8 characters');
  });

  it('should successfully register a new user', () => {
    // Fill form with valid data
    cy.get('#username').type('testuser');
    cy.get('#email').type('test@example.com');
    cy.get('#password').type('Test1234!');
    cy.get('#confirmPassword').type('Test1234!');
    cy.get('#terms').check();
    
    // Submit form
    cy.get('button[type="submit"]').click();
    
    // Check for success message
    cy.contains('Registration Successful');
    cy.contains('Please check your email');
    
    // Verify redirection
    cy.url().should('include', '/registration-success');
  });

  it('should handle existing email error', () => {
    // Setup: Create a user first (using API call or DB seeding)
    // ...
    
    // Fill form with existing email
    cy.get('#username').type('newuser');
    cy.get('#email').type('existing@example.com');
    cy.get('#password').type('Test1234!');
    cy.get('#confirmPassword').type('Test1234!');
    cy.get('#terms').check();
    
    // Submit form
    cy.get('button[type="submit"]').click();
    
    // Check for error message
    cy.contains('Email already in use');
  });
});
                

const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;
const User = require('../models/User');

// Configure Google Strategy
passport.use(new GoogleStrategy({
    clientID: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    callbackURL: '/api/v1/auth/google/callback'
  },
  async (accessToken, refreshToken, profile, done) => {
    try {
      // Check if user already exists
      let user = await User.findOne({ 
        $or: [
          { googleId: profile.id },
          { email: profile.emails[0].value }
        ]
      });
      
      if (user) {
        // Update Google ID if user registered with email before
        if (!user.googleId) {
          user.googleId = profile.id;
          await user.save();
        }
        
        return done(null, user);
      }
      
      // Create new user
      user = await User.create({
        googleId: profile.id,
        email: profile.emails[0].value,
        username: profile.displayName.replace(/\s+/g, '').toLowerCase() + Math.floor(Math.random() * 1000),
        name: profile.displayName,
        isEmailVerified: true // Email is verified through Google
      });
      
      done(null, user);
    } catch (error) {
      done(error, null);
    }
  }
));

// Routes
app.get('/api/v1/auth/google',
  passport.authenticate('google', { scope: ['profile', 'email'] })
);

app.get('/api/v1/auth/google/callback', 
  passport.authenticate('google', { failureRedirect: '/login' }),
  (req, res) => {
    // Generate JWT token for the authenticated user
    const token = generateToken(req.user);
    
    // Redirect to frontend with token
    res.redirect(`${process.env.FRONTEND_URL}/social-auth-success?token=${token}`);
  }
);
                

// Invitation model
const InvitationSchema = new mongoose.Schema({
  email: {
    type: String,
    required: true,
    unique: true
  },
  token: {
    type: String,
    required: true
  },
  isUsed: {
    type: Boolean,
    default: false
  },
  invitedBy: {
    type: mongoose.Schema.Types.ObjectId,
    ref: 'User'
  },
  expiresAt: {
    type: Date,
    required: true
  },
  createdAt: {
    type: Date,
    default: Date.now
  }
});

// Route to register with invitation
router.post('/register-with-invitation', async (req, res) => {
  const { email, password, username, invitationToken } = req.body;
  
  // Find invitation
  const invitation = await Invitation.findOne({
    email,
    token: invitationToken,
    isUsed: false,
    expiresAt: { $gt: Date.now() }
  });
  
  if (!invitation) {
    return res.status(400).json({
      success: false,
      message: 'Invalid or expired invitation'
    });
  }
  
  // Create user
  const user = await User.create({
    email,
    password,
    username,
    isEmailVerified: true // Email is verified through invitation
  });
  
  // Mark invitation as used
  invitation.isUsed = true;
  await invitation.save();
  
  // Generate token for user
  const token = generateToken(user);
  
  // Return success response
  res.status(201).json({
    success: true,
    token
  });
  

Frontend Implementation

  import React, { useState } from 'react';
  import { useForm } from 'react-hook-form';
  import * as yup from 'yup';
  import { yupResolver } from '@hookform/resolvers/yup';
  
  // Step 1 schema
  const step1Schema = yup.object().shape({
    email: yup
      .string()
      .required('Email is required')
      .email('Please enter a valid email address'),
    password: yup
      .string()
      .required('Password is required')
      .min(8, 'Password must be at least 8 characters')
      .matches(
        /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/,
        'Password must include uppercase, lowercase, number, and special character'
      ),
    confirmPassword: yup
      .string()
      .required('Please confirm your password')
      .oneOf([yup.ref('password')], 'Passwords must match')
  });
  
  // Step 2 schema
  const step2Schema = yup.object().shape({
    verificationCode: yup
      .string()
      .required('Verification code is required')
      .length(6, 'Verification code must be 6 characters')
  });
  
  // Step 3 schema
  const step3Schema = yup.object().shape({
    firstName: yup
      .string()
      .required('First name is required'),
    lastName: yup
      .string()
      .required('Last name is required'),
    username: yup
      .string()
      .required('Username is required')
      .min(3, 'Username must be at least 3 characters')
      .matches(
        /^[a-zA-Z0-9_]+$/,
        'Username can only contain letters, numbers, and underscores'
      )
  });
  
  const TwoStepRegistration = () => {
    const [step, setStep] = useState(1);
    const [userData, setUserData] = useState({});
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [serverError, setServerError] = useState('');
    
    // Initialize form with appropriate schema based on current step
    const { register, handleSubmit, formState: { errors } } = useForm({
      resolver: yupResolver(
        step === 1 
          ? step1Schema 
          : step === 2 
            ? step2Schema 
            : step3Schema
      ),
      mode: 'onChange'
    });
    
    const onSubmitStep1 = async (data) => {
      try {
        setIsSubmitting(true);
        setServerError('');
        
        // Send initial registration data to server
        const response = await fetch('/api/auth/register-step1', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            email: data.email,
            password: data.password
          }),
        });
        
        const result = await response.json();
        
        if (!response.ok) {
          throw new Error(result.message || 'Registration failed');
        }
        
        // Save data and proceed to step 2
        setUserData({ ...userData, ...data, tempUserId: result.tempUserId });
        setStep(2);
      } catch (error) {
        setServerError(error.message);
      } finally {
        setIsSubmitting(false);
      }
    };
    
    const onSubmitStep2 = async (data) => {
      try {
        setIsSubmitting(true);
        setServerError('');
        
        // Verify email verification code
        const response = await fetch('/api/auth/verify-code', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            tempUserId: userData.tempUserId,
            verificationCode: data.verificationCode
          }),
        });
        
        const result = await response.json();
        
        if (!response.ok) {
          throw new Error(result.message || 'Verification failed');
        }
        
        // Proceed to step 3
        setUserData({ ...userData, ...data });
        setStep(3);
      } catch (error) {
        setServerError(error.message);
      } finally {
        setIsSubmitting(false);
      }
    };
    
    const onSubmitStep3 = async (data) => {
      try {
        setIsSubmitting(true);
        setServerError('');
        
        // Complete registration with profile details
        const response = await fetch('/api/auth/register-complete', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            tempUserId: userData.tempUserId,
            firstName: data.firstName,
            lastName: data.lastName,
            username: data.username
          }),
        });
        
        const result = await response.json();
        
        if (!response.ok) {
          throw new Error(result.message || 'Registration failed');
        }
        
        // Registration complete - redirect to dashboard or login
        window.location.href = '/registration-success';
      } catch (error) {
        setServerError(error.message);
      } finally {
        setIsSubmitting(false);
      }
    };
    
    // Select the appropriate submit handler based on current step
    const onSubmit = step === 1 
      ? onSubmitStep1 
      : step === 2 
        ? onSubmitStep2 
        : onSubmitStep3;
    
  return (
  <div className="registration-container">
    <div className="steps-indicator">
      <div className={`step ${step >= 1 ? 'active' : ''}`}>Account</div>
      <div className={`step ${step >= 2 ? 'active' : ''}`}>Verification</div>
      <div className={`step ${step >= 3 ? 'active' : ''}`}>Profile</div>
    </div>
    
    {serverError && (
      <div className="error-message server-error">
        {serverError}
      </div>
    )}
    
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* Step 1: Account Information */}
      {step === 1 && (
        <div className="step-content">
          <h2>Create Your Account</h2>
          
          <div className="form-group">
            <label htmlFor="email">Email Address</label>
            <input
              id="email"
              type="email"
              {...register('email')}
              className={errors.email ? 'is-invalid' : ''}
            />
            {errors.email && (
              <div className="error-message">{errors.email.message}</div>
            )}
          </div>
          
          <div className="form-group">
            <label htmlFor="password">Password</label>
            <input
              id="password"
              type="password"
              {...register('password')}
              className={errors.password ? 'is-invalid' : ''}
            />
            {errors.password && (
              <div className="error-message">{errors.password.message}</div>
            )}
          </div>
          
          <div className="form-group">
            <label htmlFor="confirmPassword">Confirm Password</label>
            <input
              id="confirmPassword"
              type="password"
              {...register('confirmPassword')}
              className={errors.confirmPassword ? 'is-invalid' : ''}
            />
            {errors.confirmPassword && (
              <div className="error-message">{errors.confirmPassword.message}</div>
            )}
          </div>
        </div>
      )}
      
      {/* Step 2: Email Verification */}
      {step === 2 && (
        <div className="step-content">
          <h2>Verify Your Email</h2>
          <p>We've sent a verification code to {userData.email}.</p>
          <p>Please enter the 6-digit code below:</p>
          
          <div className="form-group">
            <label htmlFor="verificationCode">Verification Code</label>
            <input
              id="verificationCode"
              type="text"
              {...register('verificationCode')}
              className={errors.verificationCode ? 'is-invalid' : ''}
            />
            {errors.verificationCode && (
              <div className="error-message">{errors.verificationCode.message}</div>
            )}
          </div>
          
          <div className="resend-code">
            Didn't receive the code? <button type="button" className="link-button">Resend Code</button>
          </div>
        </div>
      )}
      
      {/* Step 3: Profile Information */}
      {step === 3 && (
        <div className="step-content">
          <h2>Complete Your Profile</h2>
          
          <div className="form-group">
            <label htmlFor="firstName">First Name</label>
            <input
              id="firstName"
              type="text"
              {...register('firstName')}
              className={errors.firstName ? 'is-invalid' : ''}
            />
            {errors.firstName && (
              <div className="error-message">{errors.firstName.message}</div>
            )}
          </div>
          
          <div className="form-group">
            <label htmlFor="lastName">Last Name</label>
            <input
              id="lastName"
              type="text"
              {...register('lastName')}
              className={errors.lastName ? 'is-invalid' : ''}
            />
            {errors.lastName && (
              <div className="error-message">{errors.lastName.message}</div>
            )}
          </div>
          
          <div className="form-group">
            <label htmlFor="username">Choose a Username</label>
            <input
              id="username"
              type="text"
              {...register('username')}
              className={errors.username ? 'is-invalid' : ''}
            />
            {errors.username && (
              <div className="error-message">{errors.username.message}</div>
            )}
          </div>
        </div>
      )}
      
      <div className="form-actions">
        {step > 1 && (
          <button
            type="button"
            className="back-button"
            onClick={() => setStep(step - 1)}
            disabled={isSubmitting}
          >
            Back
          </button>
        )}
        
        <button
          type="submit"
          className="submit-button"
          disabled={isSubmitting}
        >
          {isSubmitting 
            ? 'Processing...' 
            : step < 3 
              ? 'Continue' 
              : 'Complete Registration'}
        </button>
      </div>
    </form>
  </div>
);
};
  export default TwoStepRegistration;
                  

Backend Implementation

  // controllers/authController.js - Additional methods
  
  // @desc    Step 1 of registration process
  // @route   POST /api/auth/register-step1
  // @access  Public
  exports.registerStep1 = asyncHandler(async (req, res, next) => {
    const { email, password } = req.body;
  
    // Check if email is already in use
    const existingUser = await User.findOne({ email });
    
    if (existingUser) {
      return next(new ErrorResponse('Email already in use', 400));
    }
  
    // Create temporary user entry
    const tempUser = new TempUser({
      email,
      password,
      verificationCode: Math.floor(100000 + Math.random() * 900000).toString(), // 6-digit code
      verificationExpires: Date.now() + 30 * 60 * 1000 // 30 minutes
    });
    
    await tempUser.save();
  
    // Send verification code via email
    await sendEmail({
      email,
      subject: 'Your Verification Code',
      template: 'verification-code',
      context: {
        verificationCode: tempUser.verificationCode
      }
    });
  
    res.status(200).json({
      success: true,
      message: 'Verification code sent',
      tempUserId: tempUser._id
    });
  });
  
  // @desc    Verify email code
  // @route   POST /api/auth/verify-code
  // @access  Public
  exports.verifyCode = asyncHandler(async (req, res, next) => {
    const { tempUserId, verificationCode } = req.body;
  
    // Find temporary user
    const tempUser = await TempUser.findOne({
      _id: tempUserId,
      verificationCode,
      verificationExpires: { $gt: Date.now() }
    });
  
    if (!tempUser) {
      return next(new ErrorResponse('Invalid or expired verification code', 400));
    }
  
    // Mark as verified
    tempUser.isVerified = true;
    await tempUser.save();
  
    res.status(200).json({
      success: true,
      message: 'Email verified successfully'
    });
  });
  
  // @desc    Complete registration
  // @route   POST /api/auth/register-complete
  // @access  Public
  exports.registerComplete = asyncHandler(async (req, res, next) => {
    const { tempUserId, firstName, lastName, username } = req.body;
  
    // Find the verified temporary user
    const tempUser = await TempUser.findOne({
      _id: tempUserId,
      isVerified: true
    });
  
    if (!tempUser) {
      return next(new ErrorResponse('Invalid user or email not verified', 400));
    }
  
    // Check if username is taken
    const existingUsername = await User.findOne({ username });
    
    if (existingUsername) {
      return next(new ErrorResponse('Username already taken', 400));
    }
  
    // Create permanent user
    const user = await User.create({
      email: tempUser.email,
      password: tempUser.password, // Password is pre-hashed in the TempUser model
      username,
      firstName,
      lastName,
      isEmailVerified: true
    });
  
    // Delete temporary user
    await TempUser.findByIdAndDelete(tempUserId);
  
    // Generate token
    const token = user.getSignedJwtToken();
  
    res.status(201).json({
      success: true,
      token
    });
  });
                  

Temporary User Model

  const mongoose = require('mongoose');
  const bcrypt = require('bcryptjs');
  
  const TempUserSchema = new mongoose.Schema({
    email: {
      type: String,
      required: true,
      unique: true,
      lowercase: true
    },
    password: {
      type: String,
      required: true,
      minlength: 8,
      select: true // Include password in query results for temp users
    },
    verificationCode: {
      type: String,
      required: true
    },
    verificationExpires: {
      type: Date,
      required: true
    },
    isVerified: {
      type: Boolean,
      default: false
    },
    createdAt: {
      type: Date,
      default: Date.now,
      expires: 3600 // Automatically delete temp user documents after 1 hour
    }
  });
  
  // Hash password
  TempUserSchema.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();
  });
  
  module.exports = mongoose.model('TempUser', TempUserSchema);
                  

  // Install Twilio SDK
  npm install twilio
  
  // utils/sendSMS.js
  const twilio = require('twilio');
  
  const client = new twilio(
    process.env.TWILIO_ACCOUNT_SID,
    process.env.TWILIO_AUTH_TOKEN
  );
  
  const sendSMS = async (options) => {
    try {
      const message = await client.messages.create({
        body: options.message,
        from: process.env.TWILIO_PHONE_NUMBER,
        to: options.phoneNumber
      });
      
      return message.sid;
    } catch (error) {
      console.error('SMS sending error:', error);
      throw new Error('Failed to send SMS verification');
    }
  };
  
  module.exports = sendSMS;
  
  // Add to User model
  const UserSchema = new mongoose.Schema({
    // Other fields...
    phoneNumber: {
      type: String,
      unique: true,
      sparse: true // Allows null/undefined values to be unique
    },
    isPhoneVerified: {
      type: Boolean,
      default: false
    },
    phoneVerificationCode: String,
    phoneVerificationExpires: Date
  });
  
  // Generate phone verification code
  UserSchema.methods.generatePhoneVerificationCode = function() {
    // Generate a 6-digit code
    const verificationCode = Math.floor(100000 + Math.random() * 900000).toString();
    
    this.phoneVerificationCode = verificationCode;
    this.phoneVerificationExpires = Date.now() + 10 * 60 * 1000; // 10 minutes
    
    return verificationCode;
  };
  
  // Controllers/authController.js - Additional methods
  exports.sendPhoneVerification = asyncHandler(async (req, res, next) => {
    const { phoneNumber } = req.body;
    
    // Find user by ID (assume user is authenticated)
    const user = await User.findById(req.user.id);
    
    if (!user) {
      return next(new ErrorResponse('User not found', 404));
    }
    
    // Check if phone number is already verified by another user
    const existingPhone = await User.findOne({
      phoneNumber,
      _id: { $ne: user._id },
      isPhoneVerified: true
    });
    
    if (existingPhone) {
      return next(new ErrorResponse('Phone number already in use', 400));
    }
    
    // Update user's phone number
    user.phoneNumber = phoneNumber;
    user.isPhoneVerified = false;
    
    // Generate verification code
    const verificationCode = user.generatePhoneVerificationCode();
    await user.save();
    
    // Send verification SMS
    try {
      await sendSMS({
        phoneNumber,
        message: `Your verification code is: ${verificationCode}. It will expire in 10 minutes.`
      });
      
      res.status(200).json({
        success: true,
        message: 'Verification code sent'
      });
    } catch (error) {
      // Reset verification fields if SMS fails
      user.phoneVerificationCode = undefined;
      user.phoneVerificationExpires = undefined;
      await user.save();
      
      return next(new ErrorResponse('Failed to send verification code', 500));
    }
  });
  
  exports.verifyPhoneNumber = asyncHandler(async (req, res, next) => {
    const { verificationCode } = req.body;
    
    // Find user by ID and verification code
    const user = await User.findOne({
      _id: req.user.id,
      phoneVerificationCode: verificationCode,
      phoneVerificationExpires: { $gt: Date.now() }
    });
    
    if (!user) {
      return next(new ErrorResponse('Invalid or expired verification code', 400));
    }
    
    // Mark phone as verified and clear verification fields
    user.isPhoneVerified = true;
    user.phoneVerificationCode = undefined;
    user.phoneVerificationExpires = undefined;
    
    await user.save();
    
    res.status(200).json({
      success: true,
      message: 'Phone number verified successfully'
    });
  });
                  

  // Add to User model
  const UserSchema = new mongoose.Schema({
    // Other fields...
    magicLinkToken: String,
    magicLinkExpires: Date
  });
  
  // Generate magic link token
  UserSchema.methods.generateMagicLinkToken = function() {
    // Create random token
    const token = crypto.randomBytes(32).toString('hex');
    
    // Hash token and set to magicLinkToken field
    this.magicLinkToken = crypto
      .createHash('sha256')
      .update(token)
      .digest('hex');
    
    // Set token expire time (15 minutes)
    this.magicLinkExpires = Date.now() + 15 * 60 * 1000;
    
    return token;
  };
  
  // Controllers/authController.js - Magic link methods
  exports.requestMagicLink = asyncHandler(async (req, res, next) => {
    const { email } = req.body;
    
    // Check if user exists
    let user = await User.findOne({ email });
    
    // If user doesn't exist, create a new one
    if (!user) {
      user = await User.create({
        email,
        // Generate a random username as placeholder
        username: 'user_' + crypto.randomBytes(4).toString('hex'),
        isEmailVerified: false
      });
    }
    
    // Generate magic link token
    const magicToken = user.generateMagicLinkToken();
    await user.save({ validateBeforeSave: false });
    
    // Create magic link URL
    const magicLinkUrl = `${req.protocol}://${req.get(
      'host'
    )}/api/auth/magic-login/${magicToken}`;
    
    try {
      await sendEmail({
        email: user.email,
        subject: 'Your Magic Login Link',
        template: 'magic-link',
        context: {
          magicLinkUrl,
          expiresIn: '15 minutes'
        }
      });
      
      res.status(200).json({
        success: true,
        message: 'Magic link sent to your email'
      });
    } catch (error) {
      user.magicLinkToken = undefined;
      user.magicLinkExpires = undefined;
      await user.save({ validateBeforeSave: false });
      
      return next(new ErrorResponse('Email could not be sent', 500));
    }
  });
  
  exports.magicLogin = asyncHandler(async (req, res, next) => {
    // Get token from params
    const { token } = req.params;
    
    // Hash the token
    const magicLinkToken = crypto
      .createHash('sha256')
      .update(token)
      .digest('hex');
    
    // Find user by token
    const user = await User.findOne({
      magicLinkToken,
      magicLinkExpires: { $gt: Date.now() }
    });
    
    if (!user) {
      return next(new ErrorResponse('Invalid or expired magic link', 400));
    }
    
    // If user wasn't previously verified, mark as verified
    if (!user.isEmailVerified) {
      user.isEmailVerified = true;
    }
    
    // Clear magic link fields
    user.magicLinkToken = undefined;
    user.magicLinkExpires = undefined;
    
    await user.save();
    
    // Generate JWT
    const jwtToken = user.getSignedJwtToken();
    
    // Redirect to frontend with token
    res.redirect(`${process.env.FRONTEND_URL}/auth-callback?token=${jwtToken}`);
  });
                  

  // Frontend analytics tracking
  import ReactGA from 'react-ga';
  
  // Initialize GA
  ReactGA.initialize('UA-XXXXXXXXX-X');
  
  const RegistrationForm = () => {
    // Track when form is viewed
    useEffect(() => {
      ReactGA.pageview('/register');
      ReactGA.event({
        category: 'Registration',
        action: 'Form View'
      });
    }, []);
    
    // Track form start
    const handleFormFocus = () => {
      if (!hasInteracted) {
        setHasInteracted(true);
        ReactGA.event({
          category: 'Registration',
          action: 'Form Started'
        });
      }
    };
    
    // Track validation errors
    useEffect(() => {
      if (Object.keys(errors).length > 0 && isSubmitted) {
        ReactGA.event({
          category: 'Registration',
          action: 'Validation Error',
          label: Object.keys(errors).join(', ')
        });
      }
    }, [errors, isSubmitted]);
    
    // Track successful submission
    const onSubmit = async (data) => {
      setIsSubmitting(true);
      setIsSubmitted(true);
      
      try {
        // API call...
        
        // Track success
        ReactGA.event({
          category: 'Registration',
          action: 'Form Submitted',
          value: Math.round((Date.now() - formStartTime) / 1000) // Time in seconds
        });
      } catch (error) {
        // Track error
        ReactGA.event({
          category: 'Registration',
          action: 'Submission Error',
          label: error.message
        });
      }
    };
    
    return (
      

        {/* Form fields */}
      
    );
  };
  
  // Backend analytics logging
  // Add to authController.js
  exports.register = asyncHandler(async (req, res, next) => {
    // Start time for performance tracking
    const startTime = Date.now();
    
    // Registration logic...
    
    // Log analytics data
    await RegistrationAnalytics.create({
      email: user.email, // Hashed or anonymized in production
      completionTime: Date.now() - startTime,
      userAgent: req.headers['user-agent'],
      ipAddress: req.ip,
      referrer: req.headers.referer || 'direct',
      successfulRegistration: true
    });
    
    // Rest of the code...
  });
  
  // RegistrationAnalytics model
  const RegistrationAnalyticsSchema = new mongoose.Schema({
    email: {
      type: String,
      required: true
    },
    completionTime: {
      type: Number, // Milliseconds
      required: true
    },
    userAgent: String,
    ipAddress: String,
    referrer: String,
    successfulRegistration: {
      type: Boolean,
      default: true
    },
    emailVerified: {
      type: Boolean,
      default: false
    },
    timestamp: {
      type: Date,
      default: Date.now
    }
  });
                  

  // Install i18next
  npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector
  
  // src/i18n.js
  import i18n from 'i18next';
  import { initReactI18next } from 'react-i18next';
  import Backend from 'i18next-http-backend';
  import LanguageDetector from 'i18next-browser-languagedetector';
  
  i18n
    .use(Backend)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
      fallbackLng: 'en',
      debug: process.env.NODE_ENV === 'development',
      interpolation: {
        escapeValue: false,
      },
      react: {
        useSuspense: false,
      }
    });
  
  export default i18n;
  
  // Translation files
  // public/locales/en/translation.json
  {
    "registration": {
      "title": "Create an Account",
      "emailLabel": "Email Address",
      "passwordLabel": "Password",
      "confirmPasswordLabel": "Confirm Password",
      "submitButton": "Sign Up",
      "loginLink": "Already have an account? Log in",
      "errors": {
        "emailRequired": "Email is required",
        "emailInvalid": "Please enter a valid email address",
        "passwordRequired": "Password is required",
        "passwordMinLength": "Password must be at least 8 characters",
        "passwordRequirements": "Password must include uppercase, lowercase, number, and special character",
        "passwordMatch": "Passwords must match",
        "emailInUse": "Email already in use"
      },
      "success": "Registration successful! Please check your email to verify your account."
    }
  }
  
  // public/locales/es/translation.json
  {
    "registration": {
      "title": "Crear una Cuenta",
      "emailLabel": "Correo Electrónico",
      "passwordLabel": "Contraseña",
      "confirmPasswordLabel": "Confirmar Contraseña",
      "submitButton": "Registrarse",
      "loginLink": "¿Ya tienes una cuenta? Inicia sesión",
      "errors": {
        "emailRequired": "El correo electrónico es obligatorio",
        "emailInvalid": "Por favor, introduce un correo electrónico válido",
        "passwordRequired": "La contraseña es obligatoria",
        "passwordMinLength": "La contraseña debe tener al menos 8 caracteres",
        "passwordRequirements": "La contraseña debe incluir mayúsculas, minúsculas, números y caracteres especiales",
        "passwordMatch": "Las contraseñas deben coincidir",
        "emailInUse": "El correo electrónico ya está en uso"
      },
      "success": "¡Registro exitoso! Por favor, verifica tu correo electrónico para activar tu cuenta."
    }
  }
  
  // Using translations in components
  import React from 'react';
  import { useTranslation } from 'react-i18next';
  
  const RegistrationForm = () => {
    const { t } = useTranslation();
    
    return (
      

        
{t('registration.title')}
        
        

          

            {t('registration.emailLabel')}
            
            {errors.email && (
              

                {t(`registration.errors.${errors.email.message}`)}
              
            )}
          
          
          {/* More form fields */}
          
          
            {t('registration.submitButton')}
          
        
        
        

          {t('registration.loginLink')} Login
        
      
    );
  };
                  

  import React, { useState, useRef, useEffect } from 'react';
  
  const AccessibleRegistrationForm = () => {
    const [formData, setFormData] = useState({
      email: '',
      password: '',
      confirmPassword: ''
    });
    
    const [errors, setErrors] = useState({});
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [successMessage, setSuccessMessage] = useState('');
    
    // Refs for focus management
    const emailRef = useRef(null);
    const errorSummaryRef = useRef(null);
    
    // Handle input changes
    const handleChange = (e) => {
      const { name, value } = e.target;
      setFormData({
        ...formData,
        [name]: value
      });
      
      // Clear error when field is edited
      if (errors[name]) {
        setErrors({
          ...errors,
          [name]: ''
        });
      }
    };
    
    // Validate form
    const validateForm = () => {
      const newErrors = {};
      
      // Email validation
      if (!formData.email) {
        newErrors.email = 'Email is required';
      } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
        newErrors.email = 'Email is invalid';
      }
      
      // Password validation
      if (!formData.password) {
        newErrors.password = 'Password is required';
      } else if (formData.password.length < 8) {
        newErrors.password = 'Password must be at least 8 characters';
      }
      
      // Confirm password validation
      if (!formData.confirmPassword) {
        newErrors.confirmPassword = 'Please confirm your password';
      } else if (formData.password !== formData.confirmPassword) {
        newErrors.confirmPassword = 'Passwords do not match';
      }
      
      return newErrors;
    };
    
    // Handle form submission
    const handleSubmit = async (e) => {
      e.preventDefault();
      
      // Validate form
      const newErrors = validateForm();
      
      if (Object.keys(newErrors).length > 0) {
        setErrors(newErrors);
        // Focus error summary for screen readers
        if (errorSummaryRef.current) {
          errorSummaryRef.current.focus();
        }
        return;
      }
      
      setIsSubmitting(true);
      
      try {
        // API call would go here
        // await registerUser(formData);
        
        // Show success message
        setSuccessMessage('Registration successful! Please check your email to verify your account.');
        setFormData({ email: '', password: '', confirmPassword: '' });
      } catch (error) {
        setErrors({ 
          submit: error.message || 'Registration failed. Please try again.' 
        });
        
        // Focus error summary
        if (errorSummaryRef.current) {
          errorSummaryRef.current.focus();
        }
      } finally {
        setIsSubmitting(false);
      }
    };
    
    // Focus first field on mount
    useEffect(() => {
      if (emailRef.current) {
        emailRef.current.focus();
      }
    }, []);
    
    return (
      

        
Create an Account
        
        {/* Success message */}
        {successMessage && (
          

            {successMessage}
          
        )}
        
        {/* Error summary for screen readers */}
        {Object.keys(errors).length > 0 && (
          

            
There were problems with your submission
            

              {Object.entries(errors).map(([field, error]) => (
                

                  {error}
                
              ))}
            
          
        )}
        
        

          

            Email Address
            
            {errors.email && (
              

                {errors.email}
              
            )}
          
          
          

            Password
            
            

              Password must be at least 8 characters long
            
            {errors.password && (
              

                {errors.password}
              
            )}
          
          
          

            Confirm Password
            
            {errors.confirmPassword && (
              

                {errors.confirmPassword}
              
            )}
          
          
          
            {isSubmitting ? 'Creating Account...' : 'Create Account'}
          
          
          {errors.submit && (
            

              {errors.submit}
            
          )}
        
        
        

          Already have an account? Log in
        
      
    );
  };
  
  export default AccessibleRegistrationForm;
                  

  const GDPRConsentCheckbox = ({ register, errors }) => {
    return (
      

        
        
          I consent to the collection and processing of my personal data as described in the{' '}
          
            Privacy Policy
          
          . You can withdraw your consent at any time.
        
        {errors.dataConsent && (
          

            You must consent to the collection and processing of your data to create an account.
          
        )}
      
    );
  };
                  

  const AgeVerification = ({ register, errors, watch, setValue }) => {
    const isUnder13 = watch('isUnder13');
    
    return (
      <>
        

          Date of Birth
           {
                const birthDate = new Date(value);
                const today = new Date();
                const age = today.getFullYear() - birthDate.getFullYear();
                const isOver13 = age > 13 || (age === 13 && today.getMonth() >= birthDate.getMonth() && today.getDate() >= birthDate.getDate());
                
                // Set the under-13 status for parental consent form
                setValue('isUnder13', !isOver13);
                
                return isOver13 || true; // Always return true, we'll handle this below
              }
            })}
            className={errors.birthDate ? 'is-invalid' : ''}
          />
          {errors.birthDate && (
            
{errors.birthDate.message}
          )}
        
        
        {isUnder13 && (
          

            
Parental Consent Required
            

              Since the user is under 13 years old, we require parental consent as per the Children's Online Privacy Protection Act (COPPA).
            
            
            

              Parent's Email Address
              
              {errors.parentEmail && (
                
{errors.parentEmail.message}
              )}
            
            
            

              
              
                I confirm that I am the parent or legal guardian of this child and I give permission for them to use this service.
              
              {errors.parentalConsent && (
                
{errors.parentalConsent.message}
              )}
            
          
        )}
      
    );
  };
                  

Role-Based User Model

              const mongoose = require('mongoose');
              const bcrypt = require('bcryptjs');
              
              // Define permission schema
              const PermissionSchema = new mongoose.Schema({
                resource: {
                  type: String,
                  required: true
                },
                actions: {
                  type: [String],
                  enum: ['create', 'read', 'update', 'delete', 'manage'],
                  required: true
                }
              });
              
              // Define role schema
              const RoleSchema = new mongoose.Schema({
                name: {
                  type: String,
                  required: true
                },
                description: String,
                permissions: [PermissionSchema],
                createdAt: {
                  type: Date,
                  default: Date.now
                }
              });
              
              // Define organization schema
              const OrganizationSchema = new mongoose.Schema({
                name: {
                  type: String,
                  required: true
                },
                domain: {
                  type: String,
                  unique: true,
                  sparse: true
                },
                plan: {
                  type: String,
                  enum: ['free', 'standard', 'premium', 'enterprise'],
                  default: 'free'
                },
                ownerId: {
                  type: mongoose.Schema.Types.ObjectId,
                  ref: 'User'
                },
                createdAt: {
                  type: Date,
                  default: Date.now
                }
              });
              
              // Enhanced user schema with roles
              const UserSchema = new mongoose.Schema({
                email: {
                  type: String,
                  required: true,
                  unique: true,
                  lowercase: true
                },
                password: {
                  type: String,
                  required: function() {
                    return this.authMethod === 'local';
                  },
                  minlength: 8,
                  select: false
                },
                authMethod: {
                  type: String,
                  enum: ['local', 'google', 'microsoft', 'apple'],
                  default: 'local'
                },
                authProviderId: String,
                firstName: String,
                lastName: String,
                isEmailVerified: {
                  type: Boolean,
                  default: false
                },
                emailVerificationToken: String,
                emailVerificationExpire: Date,
                roles: [{
                  organization: {
                    type: mongoose.Schema.Types.ObjectId,
                    ref: 'Organization'
                  },
                  role: {
                    type: mongoose.Schema.Types.ObjectId,
                    ref: 'Role'
                  },
                  isDefault: {
                    type: Boolean,
                    default: false
                  }
                }],
                lastLogin: Date,
                createdAt: {
                  type: Date,
                  default: Date.now
                }
              });
              
              // Hash password before saving
              UserSchema.pre('save', async function(next) {
                if (!this.isModified('password') || this.authMethod !== 'local') {
                  return next();
                }
                
                try {
                  const salt = await bcrypt.genSalt(10);
                  this.password = await bcrypt.hash(this.password, salt);
                  next();
                } catch (error) {
                  next(error);
                }
              });
              
              // Method to check if user has permission
              UserSchema.methods.hasPermission = async function(organizationId, resource, action) {
                // Find user's role in the organization
                const userRole = this.roles.find(r => 
                  r.organization && r.organization.toString() === organizationId.toString()
                );
                
                if (!userRole) {
                  return false;
                }
                
                // Populate the role with permissions
                await this.populate({
                  path: 'roles.role',
                  select: 'permissions'
                });
                
                // Check if role has the required permission
                const role = userRole.role;
                
                if (!role || !role.permissions) {
                  return false;
                }
                
                return role.permissions.some(p => 
                  p.resource === resource && 
                  (p.actions.includes(action) || p.actions.includes('manage'))
                );
              };
              
              // Create models
              const Permission = mongoose.model('Permission', PermissionSchema);
              const Role = mongoose.model('Role', RoleSchema);
              const Organization = mongoose.model('Organization', OrganizationSchema);
              const User = mongoose.model('User', UserSchema);
              
              module.exports = {
                Permission,
                Role,
                Organization,
                User
              };
                              

Organization Registration Controller

              const { User, Organization, Role } = require('../models/User');
              const ErrorResponse = require('../utils/errorResponse');
              const asyncHandler = require('../middleware/async');
              const sendEmail = require('../utils/sendEmail');
              
              // Default roles and permissions
              const defaultRoles = [
                {
                  name: 'Owner',
                  description: 'Full access to all resources',
                  permissions: [
                    { resource: '*', actions: ['manage'] }
                  ]
                },
                {
                  name: 'Admin',
                  description: 'Administrative access to most resources',
                  permissions: [
                    { resource: 'users', actions: ['create', 'read', 'update'] },
                    { resource: 'content', actions: ['create', 'read', 'update', 'delete'] },
                    { resource: 'settings', actions: ['read', 'update'] }
                  ]
                },
                {
                  name: 'Member',
                  description: 'Standard member access',
                  permissions: [
                    { resource: 'content', actions: ['read'] },
                    { resource: 'profile', actions: ['read', 'update'] }
                  ]
                }
              ];
              
              // @desc    Register new organization and admin user
              // @route   POST /api/v1/auth/register-organization
              // @access  Public
              exports.registerOrganization = asyncHandler(async (req, res, next) => {
                const { 
                  organizationName, 
                  domain, 
                  firstName, 
                  lastName, 
                  email, 
                  password 
                } = req.body;
              
                // Check if email already exists
                const existingUser = await User.findOne({ email });
                
                if (existingUser) {
                  return next(new ErrorResponse('Email already in use', 400));
                }
                
                // Start a transaction
                const session = await mongoose.startSession();
                session.startTransaction();
                
                try {
                  // Create roles for the organization
                  const createdRoles = await Promise.all(
                    defaultRoles.map(roleData => 
                      Role.create([roleData], { session })
                        .then(roles => roles[0])
                    )
                  );
                  
                  // Find owner role
                  const ownerRole = createdRoles.find(role => role.name === 'Owner');
                  
                  // Create the user
                  const [user] = await User.create([{
                    email,
                    password,
                    firstName,
                    lastName,
                    authMethod: 'local'
                  }], { session });
                  
                  // Create the organization
                  const [organization] = await Organization.create([{
                    name: organizationName,
                    domain,
                    plan: 'free',
                    ownerId: user._id
                  }], { session });
                  
                  // Assign owner role to the user
                  user.roles.push({
                    organization: organization._id,
                    role: ownerRole._id,
                    isDefault: true
                  });
                  
                  await user.save({ session });
                  
                  // Generate email verification token
                  const verificationToken = user.generateEmailVerificationToken();
                  await user.save({ session });
                  
                  // Create verification URL
                  const verificationUrl = `${req.protocol}://${req.get(
                    'host'
                  )}/api/v1/auth/verify-email/${verificationToken}`;
                  
                  // Send verification email
                  await sendEmail({
                    email: user.email,
                    subject: 'Verify Your Email',
                    template: 'organization-welcome',
                    context: {
                      firstName: user.firstName,
                      organizationName,
                      verificationUrl
                    }
                  });
                  
                  // Commit the transaction
                  await session.commitTransaction();
                  
                  res.status(201).json({
                    success: true,
                    message: 'Organization created successfully. Please check your email to verify your account.'
                  });
                } catch (error) {
                  // Abort transaction on error
                  await session.abortTransaction();
                  return next(error);
                } finally {
                  // End session
                  session.endSession();
                }
              });
              
              // @desc    Invite user to organization
              // @route   POST /api/v1/organizations/:organizationId/invite
              // @access  Private (Admin/Owner only)
              exports.inviteUserToOrganization = asyncHandler(async (req, res, next) => {
                const { email, roleId } = req.body;
                const { organizationId } = req.params;
                
                // Check if user has permission to invite
                const hasPermission = await req.user.hasPermission(
                  organizationId, 
                  'users', 
                  'create'
                );
                
                if (!hasPermission) {
                  return next(
                    new ErrorResponse('Not authorized to invite users to this organization', 403)
                  );
                }
                
                // Get organization
                const organization = await Organization.findById(organizationId);
                
                if (!organization) {
                  return next(
                    new ErrorResponse(`Organization not found with id of ${organizationId}`, 404)
                  );
                }
                
                // Check if role exists and belongs to this organization
                const role = await Role.findById(roleId);
                
                if (!role) {
                  return next(
                    new ErrorResponse(`Role not found with id of ${roleId}`, 404)
                  );
                }
                
                // Check if user already exists
                let user = await User.findOne({ email });
                let isNewUser = false;
                
                if (!user) {
                  // Create new user if doesn't exist
                  user = await User.create({
                    email,
                    authMethod: 'invitation'
                  });
                  
                  isNewUser = true;
                }
                
                // Check if user is already in the organization
                const isAlreadyMember = user.roles.some(
                  r => r.organization.toString() === organizationId.toString()
                );
                
                if (isAlreadyMember) {
                  return next(
                    new ErrorResponse('User is already a member of this organization', 400)
                  );
                }
                
                // Generate invitation token
                const invitationToken = crypto.randomBytes(20).toString('hex');
                
                // Create invitation
                const invitation = await Invitation.create({
                  email: user.email,
                  organization: organizationId,
                  role: roleId,
                  token: crypto
                    .createHash('sha256')
                    .update(invitationToken)
                    .digest('hex'),
                  invitedBy: req.user.id,
                  expiresAt: Date.now() + 7 * 24 * 60 * 60 * 1000 // 7 days
                });
                
                // Create invitation URL
                const invitationUrl = `${req.protocol}://${req.get(
                  'host'
                )}/api/v1/auth/accept-invitation/${invitationToken}`;
                
                // Send invitation email
                await sendEmail({
                  email: user.email,
                  subject: `Invitation to join ${organization.name}`,
                  template: 'organization-invitation',
                  context: {
                    organizationName: organization.name,
                    inviterName: `${req.user.firstName} ${req.user.lastName}`,
                    invitationUrl,
                    isNewUser
                  }
                });
                
                res.status(200).json({
                  success: true,
                  message: `Invitation sent to ${email}`
                });
              });