Discovery - Auth Tools & VA Context Provider / Hooks

[adamwhitlock1]

User Story

As an engineer, I want to explore creating developer tools that make it easier to work with VA authentication states and application context, so I can spend less time mocking these foundational pieces and more time building features.

Background

Right now engineers have low visibility into the state of their applications in a clear and consistent way. They encounter problems with several areas of applications:

• Set up auth states so that and application can act as if the user is logged in
• Access common FE data and context across components
  • Current form data
  • Pages in the current context of react router
  • The form config in its full state, so it can be inspected
  • An easy way to fill out a form quickly without needing to go through each page of a form

Discovery Goals

1. Auth State Tools Investigation

   • [ ] Document current auth state management approaches
     • How apps handle auth now
     • Common auth scenarios needed for testing
     • Current pain points in mocking auth
   • [ ] Look into existing tools for auth state manipulation
     • useMockedAuth in mock-form-ae-design-patterns
     • any other tools? a chrome extension was created a while ago, but unsure if it works: https://github.com/erikphansen/chrome-extension-va-session-cookies
   • [ ] Identify what an ideal auth mocking experience would look like

2. VA Context Provider Research

   • [ ] Map out commonly needed VA context data
     • Form data
     • Form configs
     • Route info
     • Feature flags
     • User profile basics
   • [ ] Look at how apps currently share this context
   • [ ] Check out patterns from other large React apps

3. Technical Approach Ideas

   • [ ] Refactoring useMockedAuth to be more flexible and allow other ways besides query strings to trigger mocked auth state
   • [ ] Look at the session cookie extension for usability
   • [ ] identify if a common context provider would be useful to apps to help engineers

Questions to Figure Out

• What's the minimum auth state data apps need?
• Should auth mocking live in the browser or the mock server?
• Can we make a single source of truth for VA context?
• How do we handle different environments (local, codespaces, staging, prod)?
• What's the simplest way for devs to toggle between auth states when possible?

Resources

• Current auth implementation in platform
• Feature flag implementation and related hook
• Form system context usage
• React DevTools examples
• Redux DevTools examples

What We'll Make

1. Quick write-up of:

   • How auth and context work now
   • Pain points to solve
   • Ideas for making it better
   • Trade-offs of different approaches

2. Simple proof of concept showing:

   • Auth state switching
   • Basic context provider

Success Looks Like

• [ ] We understand current auth/context challenges
• [ ] We have a solid plan for improving the dev experience
• [ ] We've tested our ideas with a basic prototype
• [ ] We know what to build next

Things to Keep in Mind

• Keep it simple to start
• Make it easy to turn on/off
• Don't break existing auth
• Think about test environment needs

Review Needed By

• [ ] VA Product Owner
• [ ] Product Manager
• [ ] UX Research Team
• [ ] Engineering Team

Done When

• [ ] Write-up is reviewed
• [ ] Basic prototype works
• [ ] We have a plan for next steps
• [ ] Team agrees on approach