Studio: Refactor AuthProvider into Redux slice

[katinthehatsite]

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?

[katinthehatsite]

This is not related directly to changes in this PR. This is something that my linter flagged that needed to be fixed and was present on trunk

[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]

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.

[fredrikekelund]

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.

[fredrikekelund]

Now that the auth details live in the Redux state tree, I'd argue that src/stores/wpcom-api should either retrieve the client state prop from this slice or subscribe to state updates from it. We should remove the getWpcomClient and setWpcomClient from src/stores/wpcom-api

[fredrikekelund]

If the idea is to always dispatch handleInvalidToken here, then I think it's better to pass the store as an argument to this function and call store.dispatch( handleInvalidToken() ).

We could also consider moving the getIpcApi().showMessageBox() call to handleInvalidToken

[fredrikekelund]

This can be moved to apps/studio/src/stores/auth-slice.ts like so:

window.ipcListener.subscribe( 'auth-updated', ( _event, payload ) => {
	if ( 'error' in payload ) {
		let title: string = __( 'Authentication error' );
		let message: string = __( 'Please try again.' );

		if ( payload.error instanceof Error && payload.error.message.includes( 'access_denied' ) ) {
			title = __( 'Authorization denied' );
			message = __(
				'It looks like you denied the authorization request. To proceed, please click "Approve"'
			);
		}

		void getIpcApi().showErrorMessageBox( { title, message } );
		return;
	}

	void store.dispatch( authTokenReceived( { token: payload.token, locale } ) );
} );

[fredrikekelund]

This can be dispatched in apps/studio/src/stores/index.ts instead.