PART2: feat(settings): Add account local storage state management components by vbudhram · Pull Request #19980 · mozilla/fxa

vbudhram · 2026-02-02T18:40:36Z

Because

fxa-settings currently relies on Apollo Client and GraphQL for state management, which is being removed
Need new infrastructure to fetch account data via auth-client REST APIs and manage state in localStorage

This pull request

Adds account-storage.ts, unified localStorage abstraction for all account data
Adds useAccountData.ts, React hook that fetches account data from 3 sources in parallel (auth-server consolidated endpoint, profile server, attached clients)
Adds AccountStateContext.tsx, React context backed by localStorage with cross-tab sync via localStorageChange events
Adds AuthStateContext.tsx, React context for authentication state (session token, signed-in status)
These are additive-only changes not yet wired into the application

Issue

Closes: https://mozilla-hub.atlassian.net/browse/FXA-12994

Checklist

My commit is GPG signed
Tests pass locally (if applicable)
Documentation updated (if applicable)
RTL rendering verified (if UI changed)

Other Information

We won't be able to fully test the flow until #19981 lands, however this PR adds all the state management needed to support that.

dschom · 2026-02-04T21:53:24Z

packages/fxa-settings/src/lib/hooks/useAccountData.test.ts

+// and is best covered by integration tests.
+
+describe('InvalidTokenError', () => {
+  it('has the correct name and message', () => {


I don't really see the point of this test. What about tests for the other functions in userAccountData? Maybe these got lost in the shuffle.

Yea I'll remove this, I guess my initial iterations on the approach required tests for each module. To test this would require complicated mocks that is probably better as integration tests.

dschom · 2026-02-04T21:54:40Z

packages/fxa-settings/src/lib/hooks/useAccountData.ts

+  }
+}
+
+function transformAttachedClientsResponse(response: any[]): AttachedClient[] {


It'd be nice to add jsdoc.

dschom · 2026-02-04T21:57:10Z

packages/fxa-settings/src/lib/hooks/useAccountData.ts

+      const accountData: Partial<AccountState> = {};
+
+      if (accountResult.status === 'fulfilled') {
+        Object.assign(accountData, transformAccountResponse(accountResult.value));


Why object.assign?

No big reason, the object changes three times and this seemed a little cleaner?

The issue I have with doing this is it essentially by passes type checking.

dschom · 2026-02-04T22:00:32Z

packages/fxa-settings/src/lib/hooks/useAccountData.ts

+
+    try {
+      const [accountResult, profileResult, attachedClientsResult] =
+        await Promise.allSettled([


Why use .allSettled instead of .all?

Added note above, but this allows seeing all the errors vs just failing with first. Theres probably cases where we want to still get account data if the profile or attached devices fail for some reason.

My immediate concern when I see this kind of stuff is that we are essentailly quietly supresing errors for functionality that should not be failing... As a result we might never ever get wind of the failures, and give users a false impressions about the state of their account.

I like that a failure on a single call doesn't brick the page, but I think we should capture a Sentry error, and ideally we should notify the user that some sort of problem has occurred.

packages/fxa-settings/src/lib/account-storage.test.ts

dschom · 2026-02-04T22:03:35Z

packages/fxa-settings/src/lib/account-storage.test.ts

+  getFullAccountData,
+} from './account-storage';
+
+const { __mock: store } = require('./storage');


Why use require here? I feel like something is off with how this is being mocked...

Added comment above, this was one of the tricky things I didn't know but found through iterating on the tests.

dschom · 2026-02-04T22:12:56Z

packages/fxa-settings/src/lib/account-storage.test.ts

+}
+
+function savedAccount() {
+  return store.set.mock.calls[0][1][UID];


I find this function misleading... The function name implies that this will give you the account currently set / saved, but then why calls[0]? How do you know this the call you always want to reference? What if there multiple calls to store.set?

dschom · 2026-02-04T22:22:22Z

packages/fxa-settings/src/lib/account-storage.test.ts

+    set: jest.fn(),
+    remove: jest.fn(),
+  };
+  return { __esModule: true, __mock: mock, default: { factory: () => mock } };


Looks like this was just the testing convention to access mock instance.

dschom · 2026-02-04T22:31:34Z

packages/fxa-settings/src/models/contexts/AccountStateContext.tsx

+  const currentAccountUid = useLocalStorageSync('currentAccountUid') as string | undefined;
+
+  const accountState = useMemo<AccountState>(() => {
+    void accountsData; // Reference to trigger recompute on storage change


Is this only needed cause we are inside useMemo? Do we realy need to useMemo here? If unifiedToAccountData is an expensive call, we should note that's why we are using useMemo here.

I removed the useMemo, it was hack to trigger recomputing unifiedToAccountState. That function is pretty cheap so it probably does not matter.

dschom · 2026-02-04T22:36:09Z

packages/fxa-settings/src/models/contexts/AccountStateContext.tsx

+    clearExtendedAccountState(uid);
+  }, []);
+
+  const value = useMemo<AccountStateContextValue>(


I think a comment about why we useMemo here would be helpful.

dschom · 2026-02-04T22:36:55Z

packages/fxa-settings/src/models/contexts/AccountStateContext.tsx

+  return context;
+}
+
+export function useAccountUid(): string | null {


I don't see what these functions get us. Why not just have useAccountState?

Good call, I cleaned this up and simplified the code.

dschom · 2026-02-04T22:38:22Z

packages/fxa-settings/src/models/contexts/AuthStateContext.tsx

+  return context;
+}
+
+export function useIsSignedIn(): boolean {


Same comment as before. Why not just have useAuthState?

packages/fxa-settings/src/lib/account-storage.test.ts

dschom · 2026-02-05T22:27:53Z

packages/fxa-settings/src/lib/hooks/useAccountData.ts

+}
+
+/** Transform the consolidated /account endpoint response to AccountState format. */
+function transformAccountResponse(response: any): Partial<AccountState> {


Can we define a type here other than any?

dschom · 2026-02-05T22:28:24Z

packages/fxa-settings/src/lib/hooks/useAccountData.ts

+  };
+
+  const securityEvents: SecurityEvent[] = (response.securityEvents || []).map(
+    (e: any) => ({


More uses of any. Can we clean these up?

dschom · 2026-02-06T01:04:34Z

packages/fxa-auth-server/lib/routes/account.ts

        const seen = new Set<string>();
        bounces = [...normalizedBounces, ...wildcardBounces].filter(
-          (bounce: any) => {
+          (bounce: { email: string; createdAt: number }) => {


Nice, thanks for updating these too!

dschom · 2026-02-06T01:15:35Z

packages/fxa-settings/src/lib/account-storage.ts

+  verified: false,
+  metricsEnabled: true,
+  sessionVerified: false,
+  ...defaultExtendedState,


The default state should be spread before the other variables. It's unusual to do it in this order, becuase anything defined above would be overridden by the defaults, which is a bit backwards and not how we humans do it :] I know there are not overrides here, but it's just not idiomatic.

dschom · 2026-02-06T01:17:54Z

packages/fxa-settings/src/lib/account-storage.ts

+  providerUid?: string;
+}
+
+export type ExtendedAccountState = Pick<


I find this name confusing... Extending to me implies adding, but this is actually reducing the 'UnifiedAccountState'... a name that I also think is a litte confusing.

packages/fxa-settings/src/lib/hooks/useAccountData.ts

vbudhram mentioned this pull request Feb 2, 2026

feat(gql): Migrate fxa-settings from GraphQL to direct auth-client calls #19869

Closed

4 tasks

vbudhram self-assigned this Feb 2, 2026

vbudhram force-pushed the FXA-12994 branch 3 times, most recently from 6d0b107 to 3bd32ee Compare February 4, 2026 21:01

vbudhram marked this pull request as ready for review February 4, 2026 21:33

vbudhram requested a review from a team as a code owner February 4, 2026 21:33

vbudhram force-pushed the FXA-12994 branch from 3bd32ee to 5b4bf87 Compare February 4, 2026 21:35

vbudhram requested review from dschom February 4, 2026 21:39

dschom reviewed Feb 4, 2026

View reviewed changes

packages/fxa-settings/src/lib/account-storage.test.ts Show resolved Hide resolved

dschom reviewed Feb 4, 2026

View reviewed changes

vbudhram force-pushed the FXA-12994 branch 2 times, most recently from e908f0f to ad0842f Compare February 5, 2026 16:13

dschom reviewed Feb 5, 2026

View reviewed changes

packages/fxa-settings/src/lib/account-storage.test.ts Show resolved Hide resolved

vbudhram requested a review from dschom February 5, 2026 20:40

dschom reviewed Feb 5, 2026

View reviewed changes

vbudhram force-pushed the FXA-12994 branch 2 times, most recently from 06b66a3 to 0eef7c8 Compare February 6, 2026 00:56

dschom reviewed Feb 6, 2026

View reviewed changes

packages/fxa-settings/src/lib/hooks/useAccountData.ts Outdated Show resolved Hide resolved

dschom reviewed Feb 6, 2026

View reviewed changes

packages/fxa-settings/src/lib/hooks/useAccountData.ts Outdated Show resolved Hide resolved

dschom reviewed Feb 6, 2026

View reviewed changes

packages/fxa-settings/src/lib/hooks/useAccountData.ts Outdated Show resolved Hide resolved

dschom approved these changes Feb 6, 2026

View reviewed changes

vbudhram force-pushed the FXA-12994 branch from 5b9a415 to f13956c Compare February 6, 2026 01:52

feat(settings): Add account local storage state management components

ad733a5

vbudhram force-pushed the FXA-12994 branch from f13956c to ad733a5 Compare February 6, 2026 02:51

vbudhram merged commit 46cb7a1 into main Feb 6, 2026
21 checks passed

vbudhram deleted the FXA-12994 branch February 6, 2026 03:12

Conversation

vbudhram commented Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Because

This pull request

Issue

Checklist

Other Information

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dschom Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

dschom Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dschom Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dschom Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dschom Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

vbudhram commented Feb 2, 2026 •

edited

Loading

dschom Feb 6, 2026 •

edited

Loading

dschom Feb 4, 2026 •

edited

Loading

dschom Feb 4, 2026 •

edited

Loading

dschom Feb 4, 2026 •

edited

Loading

dschom Feb 6, 2026 •

edited

Loading