Login button unresponsive for unverified users - should redirect to verification page #53

Closed
opened 2026-01-18 19:33:06 +00:00 by egullickson · 2 comments
Owner

Bug Description

When a user signs up but does not verify their email, the Login button on the landing page becomes unresponsive. Clicking it does nothing - no navigation, no error message, no feedback.

Steps to Reproduce

  1. Sign up for a new account
  2. Do NOT verify the email
  3. Navigate to the landing page (https://staging.motovaultpro.com/)
  4. Click the "Login" button in the upper right

Actual Behavior

  • Login button does nothing when clicked
  • URL remains unchanged at the homepage
  • No error messages displayed
  • Console shows isAuthGateReady: false state
  • User has no indication why login isn't working

Expected Behavior

  • User should be redirected to the existing verification page (VerifyEmailPage.tsx / VerifyEmailMobileScreen.tsx)
  • Clear messaging should inform the user they need to verify their email before logging in

Technical Notes

  • Console logs show [Auth Gate] Module loaded, authInitialized: false
  • Auth debug state: isLoading: false, isAuthenticated: false, isAuthGateReady: false
  • Verification pages already exist in the codebase:
    • frontend/src/features/auth/pages/VerifyEmailPage.tsx
    • frontend/src/features/auth/mobile/VerifyEmailMobileScreen.tsx

Investigation Areas

  • Auth gate logic may be blocking navigation without providing user feedback
  • Login button click handler may need to check verification status and redirect accordingly
  • Need to determine if verification state comes from Auth0 email_verified flag or application database

Affected Pages

  • Landing page Login button (desktop and mobile)
## Bug Description When a user signs up but does not verify their email, the Login button on the landing page becomes unresponsive. Clicking it does nothing - no navigation, no error message, no feedback. ## Steps to Reproduce 1. Sign up for a new account 2. Do NOT verify the email 3. Navigate to the landing page (https://staging.motovaultpro.com/) 4. Click the "Login" button in the upper right ## Actual Behavior - Login button does nothing when clicked - URL remains unchanged at the homepage - No error messages displayed - Console shows `isAuthGateReady: false` state - User has no indication why login isn't working ## Expected Behavior - User should be redirected to the existing verification page (`VerifyEmailPage.tsx` / `VerifyEmailMobileScreen.tsx`) - Clear messaging should inform the user they need to verify their email before logging in ## Technical Notes - Console logs show `[Auth Gate] Module loaded, authInitialized: false` - Auth debug state: `isLoading: false, isAuthenticated: false, isAuthGateReady: false` - Verification pages already exist in the codebase: - `frontend/src/features/auth/pages/VerifyEmailPage.tsx` - `frontend/src/features/auth/mobile/VerifyEmailMobileScreen.tsx` ## Investigation Areas - Auth gate logic may be blocking navigation without providing user feedback - Login button click handler may need to check verification status and redirect accordingly - Need to determine if verification state comes from Auth0 `email_verified` flag or application database ## Affected Pages - Landing page Login button (desktop and mobile)
egullickson added the
status
backlog
type
bug
labels 2026-01-18 19:33:11 +00:00
egullickson added
status
in-progress
and removed
status
backlog
labels 2026-01-18 19:35:04 +00:00
Author
Owner

Milestone: Implementation Complete

Phase: Execution | Agent: Developer | Status: IN_PROGRESS

Investigation Summary

Analyzed the auth flow in HomePage.tsx and App.tsx:

  1. Root Cause: When an unverified user clicks Login:

    • If isAuthenticated is true (Auth0 session exists), navigates to /garage
    • The auth gate (isAuthGateReady) may never become ready if token acquisition fails for unverified users
    • Results in "Initializing session..." spinner forever, or silent redirect back to homepage
  2. Existing Infrastructure:

    • localStorage.setItem('pendingVerificationEmail', email) is set during signup
    • Verification pages already read from this storage
    • Clean redirect path exists to /verify-email

Fix Implemented

File: frontend/src/pages/HomePage.tsx:23-38

const handleAuthAction = () => {
  if (isAuthenticated) {
    navigate('/garage');
    return;
  }

  // Check if user has a pending email verification (signed up but not verified)
  const pendingVerificationEmail = localStorage.getItem('pendingVerificationEmail');
  if (pendingVerificationEmail) {
    // Redirect to verify-email page with the stored email
    navigate('/verify-email', { state: { email: pendingVerificationEmail } });
    return;
  }

  loginWithRedirect({ appState: { returnTo: '/garage' } });
};

Verification Status

  • Lint: PASS (no new warnings)
  • Type-check: PASS
  • Tests: Pre-existing failures only (unrelated to this change)

Verdict: PASS | Next: Visual verification on staging

## Milestone: Implementation Complete **Phase**: Execution | **Agent**: Developer | **Status**: IN_PROGRESS ### Investigation Summary Analyzed the auth flow in `HomePage.tsx` and `App.tsx`: 1. **Root Cause**: When an unverified user clicks Login: - If `isAuthenticated` is true (Auth0 session exists), navigates to `/garage` - The auth gate (`isAuthGateReady`) may never become ready if token acquisition fails for unverified users - Results in "Initializing session..." spinner forever, or silent redirect back to homepage 2. **Existing Infrastructure**: - `localStorage.setItem('pendingVerificationEmail', email)` is set during signup - Verification pages already read from this storage - Clean redirect path exists to `/verify-email` ### Fix Implemented **File**: `frontend/src/pages/HomePage.tsx:23-38` ```typescript const handleAuthAction = () => { if (isAuthenticated) { navigate('/garage'); return; } // Check if user has a pending email verification (signed up but not verified) const pendingVerificationEmail = localStorage.getItem('pendingVerificationEmail'); if (pendingVerificationEmail) { // Redirect to verify-email page with the stored email navigate('/verify-email', { state: { email: pendingVerificationEmail } }); return; } loginWithRedirect({ appState: { returnTo: '/garage' } }); }; ``` ### Verification Status - Lint: PASS (no new warnings) - Type-check: PASS - Tests: Pre-existing failures only (unrelated to this change) *Verdict*: PASS | *Next*: Visual verification on staging
egullickson added
status
review
and removed
status
in-progress
labels 2026-01-18 19:40:32 +00:00
Author
Owner

Final Review: Quality Agent Validation

Phase: Review | Agent: Quality Agent | Status: PASS

RULE 0/1/2 Analysis

Rule Status Summary
RULE 0 (Critical) PASS No unhandled errors, security issues, or race conditions. Safe localStorage access with graceful fallback.
RULE 1 (High) PASS Mobile + desktop validated (same handler for all contexts). Naming conventions correct. Pattern matches existing auth flows.
RULE 2 (Should Fix) PASS Minimal change (9 lines). No code duplication. No dead code.

Verification Summary

  • Tests: No regressions (pre-existing failures unrelated)
  • Linting: Clean
  • Type Check: Clean
  • Mobile/Desktop: Same handleAuthAction used in 5 places (desktop nav, mobile menu, hero carousel, welcome section, bottom CTA)

Integration Points Validated

  1. SignupPage.tsx line 20: Sets pendingVerificationEmail in localStorage
  2. VerifyEmailPage.tsx line 23-24: Reads same localStorage key
  3. VerifyEmailPage.tsx line 42: Clears localStorage after successful verification
  4. HomePage.tsx (this fix): Checks localStorage before attempting login

Full round-trip flow is complete and consistent.

PR Details

Verdict: APPROVED | Next: Merge PR

## Final Review: Quality Agent Validation **Phase**: Review | **Agent**: Quality Agent | **Status**: PASS ### RULE 0/1/2 Analysis | Rule | Status | Summary | |------|--------|---------| | RULE 0 (Critical) | PASS | No unhandled errors, security issues, or race conditions. Safe localStorage access with graceful fallback. | | RULE 1 (High) | PASS | Mobile + desktop validated (same handler for all contexts). Naming conventions correct. Pattern matches existing auth flows. | | RULE 2 (Should Fix) | PASS | Minimal change (9 lines). No code duplication. No dead code. | ### Verification Summary - **Tests**: No regressions (pre-existing failures unrelated) - **Linting**: Clean - **Type Check**: Clean - **Mobile/Desktop**: Same `handleAuthAction` used in 5 places (desktop nav, mobile menu, hero carousel, welcome section, bottom CTA) ### Integration Points Validated 1. `SignupPage.tsx` line 20: Sets `pendingVerificationEmail` in localStorage 2. `VerifyEmailPage.tsx` line 23-24: Reads same localStorage key 3. `VerifyEmailPage.tsx` line 42: Clears localStorage after successful verification 4. **HomePage.tsx** (this fix): Checks localStorage before attempting login Full round-trip flow is complete and consistent. ### PR Details - **PR**: #54 - **Branch**: `issue-53-login-button-unverified-users` - **Files Changed**: 1 (`frontend/src/pages/HomePage.tsx`) - **Lines Added**: 9 *Verdict*: APPROVED | *Next*: Merge PR
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: egullickson/motovaultpro#53