Skip to content

DESIGN - Required Profile Setup Flow on Login #260

@alexbhchoi

Description

@alexbhchoi

Title
Required profile setup on first login + core login and forgot password flows

Context / Motivation
BCAN users currently authenticate without completing identity setup, and the login experience lacks several core UX states expected in a production application. This creates ambiguity across the Dashboard and Grant Home, increases friction for returning users, and introduces unnecessary admin overhead for password recovery.

This ticket defines the minimum required login and onboarding flows to ensure a complete, consistent, and user-friendly authentication experience while supporting future backend enforcement.

Scope

  1. Add a mandatory post-login setup step that requires users to:
    -- Upload a profile photo (required)
    -- Enter their full name (required)
  2. Users cannot proceed to the Dashboard or Grant Home until setup is completed
  3. Add core login page must-haves:
    -- Invalid credentials + generic auth error states
    -- Loading / submitting states (prevent double-submit)
    -- Password visibility toggle (show/hide)
  4. Add a “Forgot password?” flow from the login page:
    -- Email submission
    -- “Email sent” confirmation state
    -- Reset password state
    -- Success + error states (including invalid/expired reset link)
  5. Profile data should populate a reusable profile card component used across:
    -- Grant Home
    -- Dashboard

Acceptance Criteria

  1. Lo-fi user flow showing:
    -- Returning user login → Dashboard/Grant Home
    -- First login detection → forced profile setup step
    -- Completion → redirect to Dashboard/Grant Home
  2. Hi-fi designs finalized by end of January (desktop-first):
    -- Login screen includes:
    --- Password visibility toggle
    --- Loading / disabled CTA state
    --- Invalid credentials + generic auth failure states
    -- Forgot password flow includes:
    --- Email entry + validation
    --- “Email sent” confirmation screen
    --- Reset password screen (new password + confirm password)
    --- Success state
    --- Error states (invalid/expired link, generic failure)
    -- Required profile setup includes:
    --- Name input validation (required)
    --- Photo upload states (empty, uploading, uploaded, error)
    --- Disabled CTA until requirements are met
    --- Clear error messaging for missing name / missing photo
  3. Profile card component designed and documented (reusable):
    -- Includes photo + full name display
    -- Ready for use on Dashboard + Grant Home
  4. Shared in BCAN Figma file with:
    -- Comments enabled
    -- Dev handoff notes (key states + intended behavior)

Priority
High
References
Existing BCAN login flow (current Figma)
Updated Grant Home designs (Rachel)

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions