Skip to content

Frontend architecture priorities: separate auth state, router redirects, and tests #678

@therobbiedavis

Description

@therobbiedavis

Why I’m opening this

I want the frontend to stay easy to reason about as the app grows. The frontend already has useful structure around stores, routes, services, views, shared components, and an active test suite, but a few responsibilities are starting to blur together.

The specific concern here is that authentication state, navigation decisions, router access, and test structure are coupled more tightly than I want long term. That makes auth behavior harder to change safely and makes frontend tests carry more setup knowledge than they should.

This issue is meant to track a focused frontend cleanup path, similar to the backend architecture priority issue, without turning it into a broad rewrite.

Subtasks

  • Avoid router access from the auth store entirely

    • The auth store should ideally own auth state and auth actions only: current user, loaded state, login, logout, session marker cleanup, and auth-related API calls.
    • Navigation decisions should live in the router guard, app shell, or a small navigation/orchestration layer that is explicitly responsible for redirects.
    • This would remove the need for the auth store to import or indirectly access the app router.
    • Example target shape: the auth store updates state, then the router guard/app shell observes that state and decides whether to redirect to login, preserve a redirect target, or allow navigation.
    • This is cleaner long term, but it is a behavior-sensitive refactor, so it should be done after the current dependency/test stability work is green.
  • Continue the frontend test architecture refactor from Restructure FE tests and auth redirects #611

    • PR Restructure FE tests and auth redirects #611 restructures frontend tests around colocated test/ folders and Vitest projects for clearer runtime separation.
    • Use that work as the baseline for future frontend refactors so auth/router behavior can be tested close to the components, stores, services, and router code it affects.
    • Make sure auth/router tests cover enabled auth, disabled auth, login redirects, logout/session marker changes, preserved redirect targets, and startup-config timing.
  • Separate auth behavior tests by responsibility

    • Store tests should verify state transitions and API/session behavior without needing a real app router.
    • Router tests should verify route guards, redirect targets, login route behavior, and startup-config-driven auth requirements.
    • App shell tests should cover UI reactions such as hiding layout on login, responding to auth state changes, and user-visible login/logout navigation.
  • Reduce frontend test setup coupling

    • Prefer shared helpers from the Restructure FE tests and auth redirects #611 test refactor rather than each spec building its own router/store/API setup.
    • Keep fixtures and mocks explicit enough that auth state, startup config, and navigation behavior are obvious in each test.
    • Avoid hidden global setup that makes auth/router tests pass for the wrong reason.

Suggested order

  1. Land or reconcile the frontend test architecture work in Restructure FE tests and auth redirects #611.
  2. Add/adjust tests that describe the current auth/router behavior before changing ownership.
  3. Move redirect/navigation decisions out of the auth store in small steps.
  4. Remove any temporary router-instance workaround once the store no longer needs router access.
  5. Keep the final shape documented in the frontend test/readme guidance so future auth work follows the same boundary.

Related

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions