Getting Started - TraderFrame

Overview

This guide walks you through every step from opening the app for the first time to reaching your dashboard — covering registration, email verification, login, forgot password, and the live/demo account mode toggle.

Complete Auth Flow Diagram

┌─────────────────────────────────────────────────────────────────────┐
│                        TRADERFRAME AUTH FLOW                        │
└─────────────────────────────────────────────────────────────────────┘

  [ Visit App ]
       │
       ▼
  ┌─────────────┐     Already logged in?     ┌──────────────────┐
  │ /auth/login  │ ─────── YES ──────────────▶│   /dashboard     │
  └─────────────┘                            └──────────────────┘
       │
       │  New user?
       ▼
  ┌──────────────────┐
  │  /auth/register  │
  │  - Username      │
  │  - Email         │
  │  - Password      │
  │  - Accept Terms  │
  └──────────────────┘
       │
       │ Submit
       ▼
  ┌───────────────────────────┐
  │ /auth/email-verification  │
  │  Check inbox for link     │
  │  or Resend email          │
  └───────────────────────────┘
       │
       │ Click email link
       ▼
  ┌──────────────────┐
  │  Email verified  │──────────────────────────▶ [ /dashboard ]
  └──────────────────┘


  LOGIN FLOW
  ┌─────────────┐
  │ /auth/login  │
  │  - Email     │
  │  - Password  │
  │  - Remember  │
  └─────────────┘
       │
       ├──── Email not verified? ────▶ [ /auth/email-verification ]
       │
       ├──── Admin user? ────────────▶ [ /admin/dashboard ]
       │
       └──── Regular user? ──────────▶ [ /dashboard ]


  SOCIAL LOGIN (Google / Apple)
  [ Login or Register page ]
       │
       │ Click "Sign in with Google" or "Continue with Apple"
       ▼
  [ OAuth popup from Google / Apple ]
       │
       │ Authorized
       ▼
  Same redirect logic as email/password login


  FORGOT PASSWORD FLOW
  [ /auth/forgot-password ]
       │
       │ Enter email → click "Recover Account"
       ▼
  [ Reset email sent to inbox ]
       │
       │ Click link in email
       ▼
  [ /auth/reset-password ]
       │
       │ Enter new password
       ▼
  [ /auth/login ] ── success message shown

Module 1 — Register

URL: /auth/register

Form Fields

Field / Element	Details
Create User Name	Minimum 2 characters
Email Address	Must be a valid email format
Password	Minimum 6 characters. Toggle eye icon to show/hide
Terms checkbox	Must be checked — submit button is disabled if unchecked
Create an account	Primary submit button. Shows spinner while loading
Continue with Google	OAuth popup via Google
Continue with Apple	OAuth popup via Apple
Login link	”Have an account? Login” → navigates to `/auth/login`

Step-by-step

Fill in your details

Enter a username (min 2 characters), your email address, and a password (min 6 characters).

Accept Terms

Check the Terms of Service and Privacy Policy checkbox. The submit button stays disabled until this is checked.

Submit

Click Create an account. The button shows a loading spinner while the request is in progress. All other buttons (Google, Apple) are also disabled during this time.

Email verification

On success, you are automatically redirected to /auth/email-verification. Check your inbox for a verification link.

Validation Rules

Field	Rule	Error
Username	Min 2 characters	”Name must be at least 2 characters”
Email	Valid email format	”Invalid email address”
Password	Min 6 characters	”Password must be at least 6 characters”
Terms	Must be checked	”Please accept the Terms of Service and Privacy Policy”

Module 2 — Email Verification

URL: /auth/email-verification

What’s on this page

Element	Details
Email display	Shows the address the verification link was sent to
Resend Verification Email	Sends a fresh email if the first wasn’t received
Back to Registration	Logs out and returns to `/auth/register`

Verification Flow

User lands on /auth/email-verification
         │
         │ Does URL contain ?oobCode= ? (from Firebase email link)
         │
         ├── YES ──▶ Auto-verify on page load
         │               │
         │               ├── Success ──▶ "Email verified!" → /dashboard (2s delay)
         │               └── Failure ──▶ Show error message
         │
         └── NO  ──▶ Show "check your inbox" screen
                          │
                          ├── User clicks email link ──▶ same auto-verify flow above
                          │
                          └── User clicks "Resend"
                                  │
                                  └── New email sent → success message shown

Already Verified?

If the user’s email is already verified (detected via Firebase onAuthStateChanged), the page shows:

“Your email is already verified!”

And redirects to /dashboard after 1.5 seconds automatically.

URL: /auth/login

Form Fields

Field / Element	Details
Email Address	Valid email required
Password	Min 6 characters. Eye icon toggles visibility
Remember Me	Checked by default. Persists your session
Forgot Password?	Link → `/auth/forgot-password`
Login	Primary submit button
Sign in with Google	OAuth popup
Sign in with Apple	OAuth popup
Signup link	”Don’t have an account? Signup” → `/auth/register`

Step-by-step

Enter credentials

Type your email address and password.

Remember Me

Remember Me is on by default. Turn it off if you’re on a shared or public device.

Submit

Click Login. A loading spinner appears while authenticating.

Redirect

After successful login, you are redirected based on your account type: - Email not verified → /auth/email-verification - Admin account → /admin/dashboard - Regular user → /dashboard

Redirect Logic

Login success
    │
    ├── emailVerified = false  ──▶  /auth/email-verification
    │
    ├── user.isAdmin = true    ──▶  /admin/dashboard
    │
    └── regular user           ──▶  /dashboard

Validation Rules

Field	Rule	Error
Email	Required + valid format	”Email is required” / “Invalid email address”
Password	Required + min 6 chars	”Password is required” / “Password must be at least 6 characters”

Module 4 — Forgot Password

URL: /auth/forgot-password

What’s on this page

Element	Details
Email Address	Enter the email linked to your account
Recover Account	Sends a password reset link to your inbox
Back arrow	Returns to `/auth/login`
Back to Login	Text link at the bottom

Step-by-step

Open Forgot Password

Click Forgot Password? on the login page. You land on /auth/forgot-password.

Enter your email

Type the email address registered with your TraderFrame account.

Request reset

Click Recover Account. The button shows a loading spinner while processing.

Check your inbox

A green success message appears:

“Password reset email sent to your@email.com. Please check your inbox and follow the instructions.”

Open the email and click the reset link.

Set new password

The link takes you to /auth/reset-password. Enter and confirm your new password.

You are redirected to /auth/login. Log in with your new credentials.

Module 5 — Live vs Demo Mode

Location: Top navigation bar (visible after login)

What it does

After logging in, a Live / Demo toggle appears in the top navigation bar. This single switch controls what data is shown across the entire app — Dashboard, Portfolio, Performance, Journal, and Bots all respond to the selected mode.

Mode	Visual Indicator	Data Shown
Demo	Default orange theme	Paper trading / simulated broker account
Live	Upgrade button turns green	Real broker account, real funds

How to switch

Click Live or Demo in the top navigation bar. The switch is instant — all sections update immediately with no page reload.

Always confirm which mode is active before making bot changes or placing trades. Live mode affects real money.

All Auth Routes — Quick Reference

Route	Purpose	Access Control
`/auth/register`	New user sign up	Guests only (logged-in users → `/dashboard`)
`/auth/email-verification`	Verify email after registration	Open
`/auth/login`	Sign in	Guests only (logged-in users → `/dashboard`)
`/auth/forgot-password`	Request password reset link	Open
`/auth/reset-password`	Set new password via email link	Open

​Overview

​Complete Auth Flow Diagram

​Module 1 — Register

​Form Fields

​Step-by-step

​Validation Rules

​Module 2 — Email Verification

​What’s on this page

​Verification Flow

​Already Verified?

​Module 3 — Login

​Form Fields

​Step-by-step

​Redirect Logic

​Validation Rules

​Module 4 — Forgot Password

​What’s on this page

​Step-by-step

​Module 5 — Live vs Demo Mode

​What it does

​How to switch

​All Auth Routes — Quick Reference

Overview

Complete Auth Flow Diagram

Module 1 — Register

Form Fields

Step-by-step

Validation Rules

Module 2 — Email Verification

What’s on this page

Verification Flow

Already Verified?

Module 3 — Login

Form Fields

Step-by-step

Redirect Logic

Validation Rules

Module 4 — Forgot Password

What’s on this page

Step-by-step

Module 5 — Live vs Demo Mode

What it does

How to switch

All Auth Routes — Quick Reference