Add client component signout method (#183)

* Add signOut for client component

* fix act warnings in new signout tests

* add a test for calling the stop impersonating button

---------

Co-authored-by: Paul Asjes <p.asjes@gmail.com>

Author: nicknisi

__tests__/authkit-provider.spec.tsx

@@ -2,12 +2,13 @@ import React from 'react';
 import { render, waitFor, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { AuthKitProvider, useAuth } from '../src/components/authkit-provider.js';
-import { checkSessionAction, getAuthAction, refreshAuthAction } from '../src/actions.js';
+import { checkSessionAction, getAuthAction, refreshAuthAction, handleSignOutAction } from '../src/actions.js';
 
 jest.mock('../src/actions', () => ({
   checkSessionAction: jest.fn(),
   getAuthAction: jest.fn(),
   refreshAuthAction: jest.fn(),
+  handleSignOutAction: jest.fn(),
 }));
 
 describe('AuthKitProvider', () => {
@@ -331,7 +332,7 @@ describe('useAuth', () => {
     });
   });
 
-  it('should receive an error when refreshAuth fails with an errstringor', async () => {
+  it('should receive an error when refreshAuth fails with a string error', async () => {
     (refreshAuthAction as jest.Mock).mockRejectedValueOnce('Refresh failed');
 
     let error: string | undefined;
@@ -367,4 +368,56 @@ describe('useAuth', () => {
       expect(error).toBe('Refresh failed');
     });
   });
+
+  it('should call handleSignOutAction when signOut is called', async () => {
+    (handleSignOutAction as jest.Mock).mockResolvedValueOnce({});
+
+    const TestComponent = () => {
+      const auth = useAuth();
+      return (
+        <div>
+          <div data-testid="session">{auth.sessionId}</div>
+          <button onClick={() => auth.signOut()}>Sign out</button>
+        </div>
+      );
+    };
+
+    const { getByRole } = render(
+      <AuthKitProvider>
+        <TestComponent />
+      </AuthKitProvider>,
+    );
+
+    await act(async () => {
+      getByRole('button').click();
+    });
+
+    expect(handleSignOutAction).toHaveBeenCalled();
+  });
+
+  it('should pass returnTo parameter to handleSignOutAction', async () => {
+    (handleSignOutAction as jest.Mock).mockResolvedValueOnce({});
+
+    const TestComponent = () => {
+      const auth = useAuth();
+      return (
+        <div>
+          <div data-testid="session">{auth.sessionId}</div>
+          <button onClick={() => auth.signOut({ returnTo: '/home' })}>Sign out</button>
+        </div>
+      );
+    };
+
+    const { getByRole } = render(
+      <AuthKitProvider>
+        <TestComponent />
+      </AuthKitProvider>,
+    );
+
+    await act(async () => {
+      getByRole('button').click();
+    });
+
+    expect(handleSignOutAction).toHaveBeenCalledWith({ returnTo: '/home' });
+  });
 });

__tests__/impersonation.spec.tsx

@@ -1,9 +1,10 @@
-import { render, act } from '@testing-library/react';
+import { render, act, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { Impersonation } from '../src/components/impersonation.js';
 import { useAuth } from '../src/components/authkit-provider.js';
 import { getOrganizationAction } from '../src/actions.js';
 import * as React from 'react';
+import { handleSignOutAction } from '../src/actions.js';
 
 // Mock the useAuth hook
 jest.mock('../src/components/authkit-provider', () => ({
@@ -116,4 +117,18 @@ describe('Impersonation', () => {
     const root = container.querySelector('[data-workos-impersonation-root]');
     expect(root).toHaveStyle({ backgroundColor: 'red' });
   });
+
+  it('should should sign out when the Stop button is called', async () => {
+    (useAuth as jest.Mock).mockReturnValue({
+      impersonator: { email: 'admin@example.com' },
+      user: { id: '123', email: 'user@example.com' },
+      organizationId: null,
+      loading: false,
+    });
+
+    render(<Impersonation />);
+    const stopButton = await screen.findByText('Stop');
+    stopButton.click();
+    expect(handleSignOutAction).toHaveBeenCalled();
+  });
 });

__tests__/min-max-button.spec.tsx

@@ -1,4 +1,4 @@
-import { render, fireEvent } from '@testing-library/react';
+import { render, act } from '@testing-library/react';
 import { MinMaxButton } from '../src/components/min-max-button.js';
 import * as React from 'react';
 import '@testing-library/jest-dom';
@@ -19,8 +19,9 @@ describe('MinMaxButton', () => {
   it('sets minimized value when clicked', () => {
     const { getByRole } = render(<MinMaxButton minimizedValue="1">Minimize</MinMaxButton>);
 
-    const button = getByRole('button');
-    fireEvent.click(button);
+    act(() => {
+      getByRole('button').click();
+    });
 
     const root = document.querySelector('[data-workos-impersonation-root]');
     expect(root).toHaveStyle({ '--wi-minimized': '1' });
@@ -34,8 +35,10 @@ describe('MinMaxButton', () => {
     // Mock querySelector to return null for this test
     jest.spyOn(document, 'querySelector').mockReturnValue(null);
 
-    const button = getByRole('button');
-    fireEvent.click(button);
+    act(() => {
+      getByRole('button').click();
+    });
+
     expect(root).not.toHaveStyle({ '--wi-minimized': '1' });
   });
 

src/actions.ts

@@ -13,8 +13,8 @@ export const checkSessionAction = async () => {
   return true;
 };
 
-export const handleSignOutAction = async () => {
-  await signOut();
+export const handleSignOutAction = async ({ returnTo }: { returnTo?: string } = {}) => {
+  await signOut({ returnTo });
 };
 
 export const getOrganizationAction = async (organizationId: string) => {

src/components/authkit-provider.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { createContext, ReactNode, useContext, useEffect, useState } from 'react';
-import { checkSessionAction, getAuthAction, refreshAuthAction } from '../actions.js';
+import { checkSessionAction, getAuthAction, handleSignOutAction, refreshAuthAction } from '../actions.js';
 import type { Impersonator, User } from '@workos-inc/node';
 
 type AuthContextType = {
@@ -16,6 +16,7 @@ type AuthContextType = {
   loading: boolean;
   getAuth: (options?: { ensureSignedIn?: boolean }) => Promise<void>;
   refreshAuth: (options?: { ensureSignedIn?: boolean; organizationId?: string }) => Promise<void | { error: string }>;
+  signOut: (options?: { returnTo?: string }) => Promise<void>;
 };
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
@@ -88,6 +89,10 @@ export const AuthKitProvider = ({ children, onSessionExpired }: AuthKitProviderP
     }
   };
 
+  const signOut = async ({ returnTo }: { returnTo?: string } = {}) => {
+    await handleSignOutAction({ returnTo });
+  };
+
   useEffect(() => {
     getAuth();
 
@@ -153,6 +158,7 @@ export const AuthKitProvider = ({ children, onSessionExpired }: AuthKitProviderP
         loading,
         getAuth,
         refreshAuth,
+        signOut,
       }}
     >
       {children}

src/components/impersonation.tsx

@@ -76,7 +76,10 @@ export function Impersonation({ side = 'bottom', ...props }: ImpersonationProps)
         }}
       >
         <form
-          onSubmit={handleSignOutAction}
+          onSubmit={async (event) => {
+            event.preventDefault();
+            await handleSignOutAction();
+          }}
           style={{
             display: 'flex',
             alignItems: 'baseline',