DemoBuy

Settings & Auth

Last updated on 2026-05-31

The settings, auth, and utility modules cover account configuration, security management, authentication flows, and standalone utility pages. Settings pages are in the (app) route group; auth pages use the (auth) route group; utility pages use the (utility) route group.

Profile & Preferences

Route: /settings

The main settings page with profile management and trading preferences.

  • Profile form -- ProfileForm component with editable fields for display name, username, email, phone number, avatar upload, timezone selector, preferred currency, and language
  • Trading preferences -- TradingPreferences component with:
    • Default chart style -- select for Candles, Bars, Line, Area, Heikin-Ashi, or Renko
    • Default interval -- select for time intervals (1m, 5m, 15m, 30m, 1h, 4h, 1D, 1W, 1M)
    • Default order type -- select for Market, Limit, Stop, Stop-Limit
    • Compact mode -- toggle for denser UI layout
    • Extended hours -- toggle to show pre-market and after-hours data
    • Order confirmation -- toggle to require confirmation before placing orders
    • Sound alerts -- toggle for audio notifications on order fills and price alerts
import { ProfileForm } from "@/components/settings/profile-form"
import { TradingPreferences } from "@/components/settings/trading-preferences"

Security

Route: /settings/security

Security settings with two-factor authentication and session management.

  • Two-factor authentication card -- TwoFactorCard showing 2FA status (enabled/disabled), method (Authenticator, SMS, or Email), and setup/manage button; includes a toggle to enable/disable 2FA
  • Password section -- last password change date with a "Change Password" button
  • Active sessions table -- SessionsTable showing all logged-in sessions with columns for device name, browser, IP address, location, last active time, and a "current session" badge; each non-current session has a "Revoke" button
  • Login history -- table of recent login attempts showing date, device, browser, IP, location, and status badge (Success = green, Failed = red)
import { TwoFactorCard } from "@/components/settings/two-factor-card"
import { SessionsTable } from "@/components/settings/sessions-table"

2FA Methods

Method Description
Authenticator TOTP via Google Authenticator, Authy, etc.
SMS Verification code sent via text message
Email Verification code sent to email

API Keys

Route: /settings/api-keys

API key management for programmatic access to trading functionality.

  • API keys table -- ApiKeysTable showing all API keys with columns for:
    • Name -- descriptive name for the key
    • Key -- masked key value (e.g., sk-****ABCD)
    • Permissions -- badges for Read, Trade, and/or Withdraw permissions
    • Created date -- when the key was generated
    • Last used -- most recent API call timestamp
    • Expiration -- expiry date or "Never"
    • Status -- Active (green) or Inactive (gray) toggle
    • Actions -- Revoke button with confirmation dialog
  • Create key button -- opens a dialog to name the key, select permissions (Read, Trade, Withdraw), and set optional expiration date; the full key value is shown once upon creation and cannot be retrieved again
import { ApiKeysTable } from "@/components/settings/api-keys-table"

API Key Permissions

Permission Description
Read View portfolio, positions, and market data
Trade Place and manage orders
Withdraw Transfer funds out of the account

Notifications

Route: /settings/notifications

Per-channel notification preference management.

  • Notification channels -- NotificationChannel components for Email, Push, SMS, and In-App, each with:
    • Channel toggle -- master on/off switch for the entire channel
    • Granular toggles -- individual switches for:
      • Price alerts
      • Order fills
      • Daily summary
      • Weekly summary
      • News alerts
      • Earnings alerts
      • Social mentions
      • System updates
  • Save button -- persists notification preferences
import { NotificationChannel } from "@/components/settings/notification-channel"

Billing

Route: /settings/billing

Subscription plan management and invoice history.

  • Current plan card -- PlanCard showing plan name (Free, Basic, Pro, Enterprise), monthly/annual price, billing cycle, next billing date, and upgrade/downgrade buttons
  • Plan comparison -- side-by-side feature comparison grid for all available plans highlighting the current plan
  • Payment method -- card on file showing brand icon, last 4 digits, and expiration; "Update" button to change payment method
  • Invoice history table -- InvoicesTable with columns for date, invoice ID, amount, status badge (Paid = green, Pending = amber, Failed = red, Refunded = blue), and download link
import { PlanCard } from "@/components/settings/plan-card"
import { InvoicesTable } from "@/components/settings/invoices-table"

Subscription Plans

Plan Price Key Features
Free $0/mo Basic portfolio tracking, 1 watchlist, delayed quotes
Basic $19/mo Real-time quotes, 5 watchlists, stock screener
Pro $49/mo Options chain, social trading, backtesting, API access
Enterprise $149/mo Unlimited everything, priority support, custom integrations

Authentication

Login

Route: /login

A centered card layout with email/password login form.

  • Email input -- validated email field
  • Password input -- password field with show/hide toggle
  • Remember me -- checkbox to persist the session
  • Login button -- primary action button
  • Forgot password link -- navigates to /forgot-password
  • Register link -- navigates to /register
  • Social login -- optional social authentication buttons (Google, GitHub)

Register

Route: /register

Account registration with form validation.

  • Email, username, password, confirm password -- validated form fields
  • Terms agreement -- checkbox with link to terms of service
  • Register button -- creates the account
  • Login link -- navigates to /login

Forgot Password

Route: /forgot-password

Password reset request form.

  • Email input -- validated email field
  • Send reset link button -- triggers password reset email
  • Back to login link -- returns to /login

Utility Pages

404 Not Found

Route: Any unmatched route

A styled 404 page with the trading theme, error message, and a "Go to Dashboard" button.

Onboarding Wizard

Route: /onboarding

A multi-step onboarding flow for new users.

  • Step 1: Welcome -- introduction and overview
  • Step 2: Profile -- basic profile setup
  • Step 3: Experience Level -- select Beginner, Intermediate, Advanced, or Professional
  • Step 4: Investment Goals -- choose goals (Growth, Income, Preservation, Speculation)
  • Step 5: Risk Tolerance -- select Conservative, Moderate, or Aggressive
  • Step 6: Connect Accounts -- link brokerage accounts
  • Step 7: Create Watchlist -- set up initial watchlist
  • Step 8: Complete -- success screen with link to dashboard

Maintenance Page

Route: /maintenance

A standalone maintenance page displayed during scheduled downtime with estimated completion time and status page link.

Mobile App Prompt

Route: /mobile

A page promoting the mobile app with iOS and Android download links, QR code, and feature highlights.

Data Sources

Data Source Location
Account settings accountSettings data/seed.ts
Security settings securitySettings data/seed.ts
API keys apiKeys data/seed.ts
Notification prefs notificationPrefs data/seed.ts
Billing info billingData data/seed.ts

Next Steps

Previous

Analytics & Risk

Next

Design Tokens