Appearance

External Verify ​

File Information ​

  • Path: pages/_workspace_id/external/verify.vue
  • Route: /:workspace_id/external/verify
  • Purpose: External user OTP verification and access grant

Overview ​

The External Verify page handles OTP (One-Time Password) verification for external users requesting access to upload files or access shared assets. It validates the OTP code sent via email and grants access if valid.

Key Features ​

  1. OTP Input

    • OTP code input field
    • Code validation
    • Resend OTP option
    • Error display

  2. Verification Process

    • OTP code validation
    • Session creation
    • Access grant
    • Redirect handling

  3. Access Management

    • Access type determination
    • Permission assignment
    • Session management
    • Expiration handling

  4. Error Handling

    • Invalid OTP errors
    • Expired OTP errors
    • Rate limiting
    • Network errors

Components Used ​

  • OTP input component
  • Verification status components
  • Error message components

Data Properties ​

javascript
{
  otpCode: '',          // OTP code input
  verifying: false,     // Verification state
  verified: false,     // Verification status
  error: null,         // Error message
  workspaceId: null,  // Workspace ID from route
  email: ''           // User email (from request)
}

Computed Properties ​

workspaceId ​

Returns workspace ID from route

canResend ​

Checks if OTP can be resent (rate limiting)

Methods ​

verifyOTP() ​

Verifies OTP code:

  • Validates OTP format
  • Calls verification API
  • Creates session on success
  • Redirects to upload page
  • Handles errors

resendOTP() ​

Resends OTP code:

  • Validates email
  • Calls resend API
  • Shows success message
  • Handles rate limiting

handleVerificationSuccess(response) ​

Handles successful verification:

  • Creates session
  • Sets verified status
  • Redirects to appropriate page
  • Stores access token

API Endpoints ​

Verify OTP ​

  • Endpoint: POST /external/verify-otp
  • Request Body:
    json
    {
  "otp_code": "123456",
  "workspace_id": 123,
  "email": "[email protected]"
}
  • Response: Verification token and access details

Resend OTP ​

  • Endpoint: POST /external/resend-otp
  • Request Body: Email and workspace ID
  • Response: OTP sent confirmation

User Flow ​

  1. External user receives OTP via email
  2. User navigates to verify page
  3. User enters OTP code
  4. User submits verification
  5. OTP is validated
  6. Session is created
  7. User is redirected to upload page
  8. User can now upload files

Middleware ​

  • external-otp-verify - OTP verification middleware
  • external-guest-redirect - Guest redirect handling

Notes for Development ​

  • OTP codes expire after set time
  • Rate limiting on resend
  • Session created on verification
  • Redirects based on access type
  • Error messages user-friendly