Skip to content

VERIFICATION_SYSTEM.md

Latest commit

 

History

History
151 lines (101 loc) · 4.78 KB

VERIFICATION_SYSTEM.md

File metadata and controls

151 lines (101 loc) · 4.78 KB

Verification System Documentation

Overview

Prodexa implements TWO INDEPENDENT verification systems that serve different purposes.

1. Email Verification (isVerified / emailVerified)

Purpose

Like Facebook's email verification - confirms the user owns the email address they signed up with.

How it Works

  • Backend Field: emailVerified (boolean)
  • Frontend State: isVerified (in AuthContext)
  • Sync: isVerified is automatically synced with user.emailVerified

User Flow

  1. User signs up with email
  2. Goes to Edit Profile page
  3. Clicks "Verify Email" button
  4. System sends OTP to email via POST /users/mail-verification/request
  5. User enters OTP
  6. System verifies OTP via POST /users/mail-verification/verify
  7. emailVerified becomes true

Endpoints

  • Request OTP: POST /users/mail-verification/request
  • Verify OTP: POST /users/mail-verification/verify

UI Location

  • Edit Profile: First verification card shows email verification status
  • No badge displayed for email verification

2. Account Verification (accountVerified / verifiedAccount)

Purpose

Verification badge for influencers, famous people, or important users - shows they are who they claim to be.

How it Works

  • Backend Field: verifiedAccount (boolean)
  • Frontend State: accountVerified (in AuthContext)
  • Sync: accountVerified is automatically synced with user.verifiedAccount

User Flow

  1. User goes to Edit Profile page
  2. Clicks "Request Verification" button
  3. System submits request via POST /users/verification-request/request
  4. Admin reviews and approves (backend process)
  5. verifiedAccount becomes true
  6. Blue verification badge appears next to user's name throughout the app

Endpoints

  • Request Verification: POST /users/verification-request/request
  • Revoke Request: POST /users/verification-request/revoke

UI Location

  • Edit Profile: Second verification card shows account verification status
  • Profile Page: Blue badge next to display name when verified
  • Sidebar: Blue badge next to username in footer when verified
  • Other locations: Badge can appear anywhere user's name is displayed

Visual Indicator

The VerificationBadge component displays a blue checkmark badge for verified accounts.

Implementation Details

AuthContext State

{
  isVerified: false,        // Email verification
  accountVerified: false,   // Account/influencer verification
  user: {
    emailVerified: false,    // Synced with isVerified
    verifiedAccount: false   // Synced with accountVerified
  }
}

Automatic Synchronization

Both verification states are automatically synchronized whenever:

  • User logs in (login())
  • User signs up (submitSignup())
  • User data is fetched (getMe())
  • User data is updated (UPDATE_USER action)

Edit Profile Page Structure

The Edit Profile page displays TWO separate verification cards:

  1. Email Verification Card

    • Shows current email verification status
    • Button: "Verify Email" (if not verified)
    • Uses OTP flow

  2. Account Verification Card (below email card)

    • Shows current account verification status
    • Button: "Request Verification" (if not verified)
    • Button: "Revoke Request" (if verification requested but not approved)
    • Shows blue verification badge when verified

Key Differences

Feature Email Verification Account Verification
Purpose Confirm email ownership Verify identity/importance
Process OTP via email Admin approval
Badge No Yes (blue checkmark)
Field emailVerified / isVerified verifiedAccount / accountVerified
Requirements Valid email Special status
UI Card in Edit Profile Card in Edit Profile + Badge everywhere

Important Notes

  1. Independence: These two systems are completely independent - a user can have:

    • Email verified but not account verified
    • Account verified but not email verified (unusual but possible)
    • Both verified
    • Neither verified

  2. Naming Convention:

    • Backend uses: emailVerified and verifiedAccount
    • Frontend uses: isVerified (email) and accountVerified (badge)

  3. Badge Display: Only accountVerified shows the blue badge - email verification does NOT show any badge.

  4. Sync Logic: Both states are kept in sync across the entire app automatically through the AuthContext reducer.