Skip to content

feat: Build Two-Factor Authentication UI - #293

Open
MooreTheAnalyst wants to merge 2 commits into
Hamplard-Hub:mainfrom
MooreTheAnalyst:feature/two-factor-authentication
Open

feat: Build Two-Factor Authentication UI#293
MooreTheAnalyst wants to merge 2 commits into
Hamplard-Hub:mainfrom
MooreTheAnalyst:feature/two-factor-authentication

Conversation

@MooreTheAnalyst

Copy link
Copy Markdown
Contributor

Changes

  • Create TwoFactorSetup component for enabling/disabling 2FA in dashboard settings
  • Create TwoFactorLogin component for entering 2FA codes during login
  • Add 2FA validation schema for 6-digit authenticator codes
  • Add twoFactorApi service with setup, verify, disable, and status endpoints
  • Update dashboard settings page with 2FA management section
  • Display QR code for authenticator app scanning
  • Show 6-digit code verification input with formatting
  • Generate and display backup codes after successful setup
  • Implement backup code download (.txt file) and copy-to-clipboard
  • Add ability to disable 2FA with code confirmation
  • Include TwoFactorLogin component ready for login flow integration

Features

  • Multi-step 2FA setup: QR scan → code verify → backup codes
  • Automatic numeric formatting (max 6 digits)
  • Inline validation with error messaging
  • Toast notifications for success/error states
  • Hide/show toggle for backup codes display
  • Status indicator (Enabled/Disabled) in settings
  • Support for both authenticator and backup codes
  • Responsive mobile and desktop layout

API Endpoints

  • POST /2fa/setup - Initiate setup, returns QR code
  • POST /2fa/verify - Verify code, enable 2FA, returns backup codes
  • POST /2fa/disable - Disable 2FA with code confirmation
  • GET /2fa/status - Check if 2FA is enabled

UI Components

  • TwoFactorSetup - Full enable/disable flow in settings
  • TwoFactorLogin - Code entry screen for login flow

Closes #160

- Create TwoFactorSetup component for enabling/disabling 2FA in settings
- Create TwoFactorLogin component for entering 2FA code during login
- Add 2FA validation schema for 6-digit codes
- Add twoFactorApi service with setup, verify, disable, and status endpoints
- Update dashboard settings page to include 2FA toggle and management
- Display QR code for scanner after initiating setup
- Show 6-digit code verification input
- Generate and display backup codes after successful verification
- Implement backup code download and copy functionality
- Add ability to disable 2FA with code confirmation via prompt
- Add TwoFactorLogin step for login flow (template for integration)
- Support for both authenticator and backup codes in login

Features:
- Multi-step 2FA setup flow (QR scan -> code verify -> backup codes)
- Automatic code formatting (numeric only, max 6 digits)
- Inline validation with error messages
- Toast notifications for success/error states
- Download backup codes as text file
- Copy backup codes to clipboard
- Hide/show backup codes toggle
- Status indicator (Enabled/Disabled) in settings
- Responsive design for mobile and desktop

API Endpoints:
- POST /2fa/setup - Initiate 2FA setup
- POST /2fa/verify - Verify code and enable 2FA
- POST /2fa/disable - Disable 2FA with verification
- GET /2fa/status - Check if 2FA is enabled

Closes Hamplard-Hub#160
@drips-wave

drips-wave Bot commented Aug 26, 2026

Copy link
Copy Markdown

@MooreTheAnalyst Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Frontend] Feature: Build Two-Factor Authentication UI

1 participant