Studio: Refactor AuthProvider into Redux slice

apps/studio/src/components/root.tsx

@@ -5,7 +5,6 @@ import { I18nProvider } from '@wordpress/react-i18n';
 import { useEffect } from 'react';
 import { Provider as ReduxProvider } from 'react-redux';
 import App from 'src/components/app';
-import AuthProvider from 'src/components/auth-provider';
 import CrashTester from 'src/components/crash-tester';
 import ErrorBoundary from 'src/components/error-boundary';
 import { WordPressStyles } from 'src/components/wordpress-styles';
@@ -35,21 +34,19 @@ const Root = () => {
 				<ReduxProvider store={ store }>
 					<I18nProvider i18n={ defaultI18n }>
 						<WordPressStyles />
-						<AuthProvider>
-							<FeatureFlagsProvider>
-								<ContentTabsProvider>
-									<SiteDetailsProvider>
-										<ThemeDetailsProvider>
-											<OnboardingProvider>
-												<ImportExportProvider>
-													<App />
-												</ImportExportProvider>
-											</OnboardingProvider>
-										</ThemeDetailsProvider>
-									</SiteDetailsProvider>
-								</ContentTabsProvider>
-							</FeatureFlagsProvider>
-						</AuthProvider>
+						<FeatureFlagsProvider>
+							<ContentTabsProvider>
+								<SiteDetailsProvider>
+									<ThemeDetailsProvider>
+										<OnboardingProvider>
+											<ImportExportProvider>
+												<App />
+											</ImportExportProvider>
+										</OnboardingProvider>
+									</ThemeDetailsProvider>
+								</SiteDetailsProvider>
+							</ContentTabsProvider>
+						</FeatureFlagsProvider>
 					</I18nProvider>
 				</ReduxProvider>
 			</CacheProvider>

apps/studio/src/components/tests/content-tab-assistant.test.tsx

@@ -7,12 +7,12 @@ import nock from 'nock';
 import { Provider } from 'react-redux';
 import { Dispatch } from 'redux';
 import { vi } from 'vitest';
-import { AuthContext, AuthContextType } from 'src/components/auth-provider';
 import {
 	ContentTabAssistant,
 	MIMIC_CONVERSATION_DELAY,
 } from 'src/components/content-tab-assistant';
 import { LOCAL_STORAGE_CHAT_MESSAGES_KEY, CLEAR_HISTORY_REMINDER_TIME } from 'src/constants';
+import { AuthContextType, useAuth } from 'src/hooks/use-auth';
 import { useGetWpVersion } from 'src/hooks/use-get-wp-version';
 import { useOffline } from 'src/hooks/use-offline';
 import { ThemeDetailsProvider } from 'src/hooks/use-theme-details';
@@ -28,6 +28,7 @@ store.replaceReducer( testReducer );
 vi.mock( 'src/hooks/use-offline' );
 vi.mock( 'src/lib/get-ipc-api' );
 vi.mock( 'src/hooks/use-get-wp-version' );
+vi.mock( 'src/hooks/use-auth' );
 
 vi.mock( 'src/lib/app-globals', () => ( {
 	getAppGlobals: () => ( {
@@ -129,14 +130,13 @@ describe( 'ContentTabAssistant', () => {
 			logout,
 			...auth,
 		};
+		vi.mocked( useAuth ).mockReturnValue( authContextValue );
 
 		return (
 			<Provider store={ store }>
-				<AuthContext.Provider value={ authContextValue }>
-					<ThemeDetailsProvider>
-						<ContentTabAssistant selectedSite={ selectedSite } />
-					</ThemeDetailsProvider>
-				</AuthContext.Provider>
+				<ThemeDetailsProvider>
+					<ContentTabAssistant selectedSite={ selectedSite } />
+				</ThemeDetailsProvider>
 			</Provider>
 		);
 	};

apps/studio/src/hooks/use-auth.ts

@@ -1,12 +1,37 @@
-import { useContext } from 'react';
-import { AuthContext, type AuthContextType } from 'src/components/auth-provider';
+import { useCallback } from 'react';
+import { useOffline } from 'src/hooks/use-offline';
+import { getIpcApi } from 'src/lib/get-ipc-api';
+import { useAppDispatch, useRootSelector } from 'src/stores';
+import { authLogout, selectIsAuthenticated, selectUser } from 'src/stores/auth-slice';
+import { getWpcomClient } from 'src/stores/wpcom-client';
+import type { AuthUser } from 'src/stores/auth-slice';
+import type { WPCOM } from 'wpcom/types';
+
+export interface AuthContextType {
+	client: WPCOM | undefined;
+	isAuthenticated: boolean;
+	authenticate: () => void;
+	logout: () => Promise< void >;
+	user?: AuthUser;
+}
 
 export const useAuth = (): AuthContextType => {
-	const context = useContext( AuthContext );
+	const dispatch = useAppDispatch();
+	const isOffline = useOffline();
+	const isAuthenticated = useRootSelector( selectIsAuthenticated );
+	const user = useRootSelector( selectUser );
+
+	const authenticate = useCallback( () => getIpcApi().authenticate(), [] );
 
-	if ( ! context ) {
-		throw new Error( 'useAuth must be used within an AuthProvider' );
-	}
+	const logout = useCallback( async () => {
+		await dispatch( authLogout( { isOffline } ) );
+	}, [ dispatch, isOffline ] );
 
-	return context;
+	return {
+		client: isAuthenticated ? getWpcomClient() : undefined,
+		isAuthenticated,
+		authenticate,
+		logout,
+		user,
+	};
 };

apps/studio/src/modules/preview-site/components/create-preview-button.tsx

@@ -1,10 +1,10 @@
 import { DEMO_SITE_SIZE_LIMIT_GB } from '@studio/common/constants';
 import { __, sprintf } from '@wordpress/i18n';
 import { useI18n } from '@wordpress/react-i18n';
-import { AuthContextType } from 'src/components/auth-provider';
 import Button from 'src/components/button';
 import offlineIcon from 'src/components/offline-icon';
 import { Tooltip } from 'src/components/tooltip';
+import { AuthContextType } from 'src/hooks/use-auth';
 import { useGetWpVersion } from 'src/hooks/use-get-wp-version';
 import { useOffline } from 'src/hooks/use-offline';
 import { useSiteSize } from 'src/hooks/use-site-size';