Studio: Refactor AuthProvider into Redux slice by katinthehatsite · Pull Request #2778 · Automattic/studio

katinthehatsite · 2026-03-12T13:20:21Z

Related issues

Fixes https://linear.app/a8c/issue/STU-1379/studio-refactor-authprovider-into-redux-slice

How AI was used in this PR

I used it in the plan mode to plan the refactor, then gave feedback on the plan and used it for implementation, making further manual corrections.

Proposed Changes

This PR refactors AuthProvider into Redux slice.

Testing Instructions

Pull the changes from this branch
Start Studio with npm start
Log out of Studio and confirm that you are seeing logged out view
Log in and confirm it works as expected
Confirm you are correctly seeing the features that should be available with WP.com logged in view
Confirm tests are passing
Close the app while logged in
Open ~/Library/Application Support/Studio/appdata-v1.json
Delete the authToken
Save the changes
Start the app with again
Confirm that you can see logged out view

Pre-merge Checklist

Have you checked for TypeScript, React or other console errors?

fredrikekelund

Thanks for tackling this, @katinthehatsite.

The end goal with this refactor should be to remove AuthProvider altogether. That, and doing something about setWpcomClient from src/stores/wpcom-api are the two big changes needed here, IMO.

fredrikekelund · 2026-03-16T07:39:28Z

We should remove this context provider altogether. Components can easily consume Redux state and dispatch actions. There's no point in keeping this provider as a thin wrapper around the Redux slice.

Should be done ✅

fredrikekelund · 2026-03-16T07:42:38Z

+export const selectIsAuthenticated = ( state: RootState ) => state.auth.isAuthenticated;
+export const selectUser = ( state: RootState ) => state.auth.user ?? undefined;


Suggested change

export const selectIsAuthenticated = ( state: RootState ) => state.auth.isAuthenticated;

export const selectUser = ( state: RootState ) => state.auth.user ?? undefined;

export const authThunks = {

handleInvalidToken,

initializeAuth,

authTokenReceived,

authLogout,

};

export const authSelectors = {

selectIsAuthenticated: ( state: RootState ) => state.auth.isAuthenticated,

selectUser: ( state: RootState ) => state.auth.user ?? undefined,

};

We've followed this pattern in some other Redux slices. I think it's helpful to namespace selectors, actions, and thunks this way.

This isn't exactly a blocker, but I still think it's good practice.

…r-auth-provider-in-redux-slice

wpmobilebot · 2026-03-19T11:01:28Z

📊 Performance Test Results

Comparing f2c6f44 vs trunk

app-size

Metric	trunk	`f2c6f44`	Diff	Change
App Size (Mac)	1451.96 MB	1907.45 MB	+455.48 MB	🔴 31.4%

site-editor

Metric	trunk	`f2c6f44`	Diff	Change
load	1815 ms	1810 ms	5 ms	⚪ 0.0%

site-startup

Metric	trunk	`f2c6f44`	Diff	Change
siteCreation	8079 ms	8088 ms	+9 ms	⚪ 0.0%
siteStartup	4948 ms	4960 ms	+12 ms	⚪ 0.0%

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

Port removal of noisy Sentry.captureException calls from auth-provider.tsx to auth-slice.ts (handleInvalidToken, authLogout token revoke, authLogout clearAuthenticationToken), keeping the intentional deletion of auth-provider.tsx. Made-with: Cursor

…r-auth-provider-in-redux-slice

katinthehatsite · 2026-04-08T10:00:00Z

I think all the comments have now been addressed so I am requesting another review on this. 🙇

…r-auth-provider-in-redux-slice

fredrikekelund

Sorry for the delayed review, @katinthehatsite. This is looking pretty good overall! 👍

The biggest remaining question to me is use-auth.ts, which I argue we should also remove. Beyond that, I left a couple of comments about plumbing/wiring and raised a few comments from my previous review that you didn't address or push back on.

fredrikekelund · 2026-04-23T09:22:40Z

Same as with apps/studio/src/components/auth-provider.tsx, I argue we should remove this file. Components can easily consume the selectors used in this hook directly, and dispatch the authLogout action directly, too.

I went ahead and removed it 👍

fredrikekelund · 2026-04-23T09:29:01Z

+export const selectIsAuthenticated = ( state: RootState ) => state.auth.isAuthenticated;
+export const selectUser = ( state: RootState ) => state.auth.user ?? undefined;


This isn't exactly a blocker, but I still think it's good practice.

fredrikekelund · 2026-04-23T09:36:42Z

Could we make the wpcomClient part of the auth slice? Either part of the state or keep using the current logic, but export getWpcomClient. This is what I was getting at in #2778 (comment), too

katinthehatsite · 2026-04-23T16:00:05Z

Thanks so much for the review @fredrikekelund 🙇

I am planning to take a closer look today or tomorrow and address the rest of the comments 😃

…r-auth-provider-in-redux-slice

katinthehatsite · 2026-04-27T19:46:25Z

I think this should be ready for another review @fredrikekelund

wojtekn · 2026-06-09T08:38:24Z

@katinthehatsite should we merge trunk in and solve conflicts?

fredrikekelund · 2026-07-07T10:06:28Z

@katinthehatsite, given that we are cutting over to the agentic UI soon and that landing this would still require a non-trivial amount of work, I suggest abandoning this PR and closing the related issue.

katinthehatsite · 2026-07-07T10:11:41Z

@katinthehatsite, given that we are cutting over to the agentic UI soon and that landing this would still require a non-trivial amount of work, I suggest abandoning this PR and closing the related issue.

This sounds good to me 👍 I will proceed with closing

Add Auth Slice

d4a35d3

katinthehatsite self-assigned this Mar 12, 2026

katinthehatsite marked this pull request as draft March 12, 2026 13:20

Kateryna Kodonenko added 5 commits March 12, 2026 14:24

Solve linter

598c654

Fix tests

f5d9d57

Clean up duplicate callbacks

81cd242

Fix unncessary export

149709e

Fix linter

d342280

katinthehatsite commented Mar 12, 2026

View reviewed changes

Comment thread apps/studio/src/stores/provider-constants-slice.ts Outdated

katinthehatsite marked this pull request as ready for review March 12, 2026 15:06

katinthehatsite requested a review from a team March 12, 2026 15:15

fredrikekelund reviewed Mar 16, 2026

View reviewed changes

fredrikekelund mentioned this pull request Mar 16, 2026

Clear sync state on user logout #2707

Merged

1 task

Merge branch 'trunk' of github.com:Automattic/studio into fix/refacto…

724fa49

…r-auth-provider-in-redux-slice

Kateryna Kodonenko added 11 commits March 19, 2026 15:25

Adjust implementation

4e8d6d5

Initialize locale

b6bc9fb

Futher adjustments

fe87aad

Adjust store

319cc7d

Fix regression

28cc95a

Merge branch 'trunk' of github.com:Automattic/studio into fix/refacto…

6819301

…r-auth-provider-in-redux-slice

Fix any of type error

649648f

Add tests

ae8e8d2

Remove test that is too complex and is not needed

317fbcf

Final fix

0fdfacd

katinthehatsite requested review from a team and fredrikekelund April 8, 2026 09:59

Merge branch 'trunk' of github.com:Automattic/studio into fix/refacto…

706793e

…r-auth-provider-in-redux-slice

fredrikekelund reviewed Apr 23, 2026

View reviewed changes

Kateryna Kodonenko added 12 commits April 24, 2026 12:26

Merge branch 'trunk' of github.com:Automattic/studio into fix/refacto…

6ed3623

…r-auth-provider-in-redux-slice

Fix error

547baf8

Remove test and use locator directly

eca9dc4

ADJUST EVENT handler

bc04dec

Adjust locale

b511fb8

Merge branch 'trunk' of github.com:Automattic/studio into fix/refacto…

3a0aa72

…r-auth-provider-in-redux-slice

Use better practice for auth trunk

24c66db

Remove use-auth

b170b06

Add guards for unit tests

10f81f2

Solve for linter

928ffbe

Another test fix

95401c0

Test fix

379f5d8

katinthehatsite requested a review from fredrikekelund April 27, 2026 15:54

tESTS FIX

f2c6f44

katinthehatsite closed this Jul 7, 2026

		export const selectIsAuthenticated = ( state: RootState ) => state.auth.isAuthenticated;
		export const selectUser = ( state: RootState ) => state.auth.user ?? undefined;

-export const selectIsAuthenticated = ( state: RootState ) => state.auth.isAuthenticated;
-export const selectUser = ( state: RootState ) => state.auth.user ?? undefined;
+export const authThunks = {
+	handleInvalidToken,
+	initializeAuth,
+	authTokenReceived,
+	authLogout,
+};
+export const authSelectors = {
+	selectIsAuthenticated: ( state: RootState ) => state.auth.isAuthenticated,
+	selectUser: ( state: RootState ) => state.auth.user ?? undefined,
+};

Uh oh!

Conversation

katinthehatsite commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related issues

How AI was used in this PR

Proposed Changes

Testing Instructions

Pre-merge Checklist

Uh oh!

Uh oh!

fredrikekelund left a comment

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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

wpmobilebot commented Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Performance Test Results

app-size

site-editor

site-startup

Uh oh!

katinthehatsite commented Apr 8, 2026

Uh oh!

fredrikekelund left a comment

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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

katinthehatsite commented Apr 23, 2026

Uh oh!

katinthehatsite commented Apr 27, 2026

Uh oh!

wojtekn commented Jun 9, 2026

Uh oh!

fredrikekelund commented Jul 7, 2026

Uh oh!

katinthehatsite commented Jul 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

katinthehatsite commented Mar 12, 2026 •

edited

Loading

wpmobilebot commented Mar 19, 2026 •

edited

Loading