Fix clearSession operation order to prevent premature user state clearing (#1309)

Author: subhankarmaiti

src/hooks/Auth0Provider.tsx

@@ -128,14 +128,14 @@ export const Auth0Provider = ({
       opts?: NativeClearSessionOptions
     ): Promise<void> => {
       try {
-        // Step 1: Clear the locally stored credentials first.
+        // Step 1: Clear the server-side session cookie.
+        await client.webAuth.clearSession(parameters, opts);
+
+        // Step 2: Clear the locally stored credentials first.
         await client.credentialsManager.clearCredentials();
 
-        // Step 2: Update the React state immediately for a snappy UX.
+        // Step 3: Update the React state immediately for a snappy UX.
         dispatch({ type: 'LOGOUT_COMPLETE' });
-
-        // Step 3: Clear the server-side session cookie.
-        await client.webAuth.clearSession(parameters, opts);
       } catch (e) {
         const error = e as AuthError;
         dispatch({ type: 'ERROR', error });

src/hooks/__tests__/Auth0Provider.spec.tsx

@@ -332,6 +332,89 @@ describe('Auth0Provider', () => {
     expect(mockClientInstance.webAuth.clearSession).toHaveBeenCalled();
   });
 
+  it('should call clearSession operations in the correct order', async () => {
+    // Start with a logged-in state
+    mockClientInstance.credentialsManager.getCredentials.mockResolvedValueOnce({
+      idToken: 'a.b.c',
+      accessToken: 'access-token-123',
+      tokenType: 'Bearer',
+      expiresAt: Date.now() / 1000 + 3600,
+    } as any);
+
+    // Track the order of calls
+    const callOrder: string[] = [];
+
+    // Mock clearSession to track when it's called
+    mockClientInstance.webAuth.clearSession.mockImplementation(async () => {
+      callOrder.push('webAuth.clearSession');
+    });
+
+    // Mock clearCredentials to track when it's called
+    mockClientInstance.credentialsManager.clearCredentials.mockImplementation(
+      async () => {
+        callOrder.push('credentialsManager.clearCredentials');
+      }
+    );
+
+    let componentRef: any;
+    const TestConsumerWithRef = () => {
+      const auth0Context = useAuth0();
+      componentRef = auth0Context;
+      return <TestConsumer />;
+    };
+
+    await act(async () => {
+      render(
+        <Auth0Provider domain="test.com" clientId="123">
+          <TestConsumerWithRef />
+        </Auth0Provider>
+      );
+    });
+
+    await waitFor(() =>
+      expect(screen.getByTestId('user-status')).toHaveTextContent(
+        'Logged in as: Test User'
+      )
+    );
+
+    // Track when the user state changes from logged-in to logged-out
+    const originalUser = componentRef.user;
+    expect(originalUser).toBeTruthy();
+
+    const logoutButton = screen.getByTestId('logout-button');
+    await act(async () => {
+      fireEvent.click(logoutButton);
+    });
+
+    // Wait for the logout to complete and check the order
+    await waitFor(() => {
+      expect(screen.getByTestId('user-status')).toHaveTextContent(
+        'Not logged in'
+      );
+
+      // At this point, the dispatch action should have been triggered
+      callOrder.push('dispatch.LOGOUT_COMPLETE');
+    });
+
+    // Verify that the operations happened in the correct order:
+    // 1. webAuth.clearSession (server-side session)
+    // 2. credentialsManager.clearCredentials (local credentials)
+    // 3. dispatch LOGOUT_COMPLETE action (React state update)
+    expect(callOrder).toEqual([
+      'webAuth.clearSession',
+      'credentialsManager.clearCredentials',
+      'dispatch.LOGOUT_COMPLETE',
+    ]);
+
+    expect(mockClientInstance.webAuth.clearSession).toHaveBeenCalled();
+    expect(
+      mockClientInstance.credentialsManager.clearCredentials
+    ).toHaveBeenCalled();
+
+    // Verify the user state has been cleared
+    expect(componentRef.user).toBeNull();
+  });
+
   it('should update the state correctly after a clearCredentials call', async () => {
     // Start with a logged-in state
     mockClientInstance.credentialsManager.getCredentials.mockResolvedValueOnce({