@workos-inc/authkit-nextjs 2.6.0 → 2.7.0

package/src/components/authkit-provider.spec.tsx

@@ -0,0 +1,471 @@
+import React from 'react';
+import { render, waitFor, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { AuthKitProvider, useAuth } from './authkit-provider.js';
+import {
+  checkSessionAction,
+  getAuthAction,
+  refreshAuthAction,
+  handleSignOutAction,
+  switchToOrganizationAction,
+} from '../actions.js';
+
+jest.mock('../actions', () => ({
+  checkSessionAction: jest.fn(),
+  getAuthAction: jest.fn(),
+  refreshAuthAction: jest.fn(),
+  handleSignOutAction: jest.fn(),
+  switchToOrganizationAction: jest.fn(),
+}));
+
+describe('AuthKitProvider', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render children', async () => {
+    const { getByText } = await act(async () => {
+      return render(
+        <AuthKitProvider>
+          <div>Test Child</div>
+        </AuthKitProvider>,
+      );
+    });
+
+    expect(getByText('Test Child')).toBeInTheDocument();
+  });
+
+  it('should do nothing if onSessionExpired is false', async () => {
+    jest.spyOn(window, 'addEventListener');
+
+    await act(async () => {
+      render(
+        <AuthKitProvider onSessionExpired={false}>
+          <div>Test Child</div>
+        </AuthKitProvider>,
+      );
+    });
+
+    // expect window to not have an event listener
+    expect(window.addEventListener).not.toHaveBeenCalled();
+  });
+
+  it('should call onSessionExpired when session is expired', async () => {
+    (checkSessionAction as jest.Mock).mockRejectedValueOnce(new Error('Failed to fetch'));
+    const onSessionExpired = jest.fn();
+
+    render(
+      <AuthKitProvider onSessionExpired={onSessionExpired}>
+        <div>Test Child</div>
+      </AuthKitProvider>,
+    );
+
+    act(() => {
+      // Simulate visibility change
+      window.dispatchEvent(new Event('visibilitychange'));
+    });
+
+    await waitFor(() => {
+      expect(onSessionExpired).toHaveBeenCalled();
+    });
+  });
+
+  it('should only call onSessionExpired once if multiple visibility changes occur', async () => {
+    (checkSessionAction as jest.Mock).mockRejectedValueOnce(new Error('Failed to fetch'));
+    const onSessionExpired = jest.fn();
+
+    render(
+      <AuthKitProvider onSessionExpired={onSessionExpired}>
+        <div>Test Child</div>
+      </AuthKitProvider>,
+    );
+
+    act(() => {
+      // Simulate visibility change twice
+      window.dispatchEvent(new Event('visibilitychange'));
+      window.dispatchEvent(new Event('visibilitychange'));
+    });
+
+    await waitFor(() => {
+      expect(onSessionExpired).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('should pass through if checkSessionAction does not throw "Failed to fetch"', async () => {
+    (checkSessionAction as jest.Mock).mockResolvedValueOnce(false);
+
+    const onSessionExpired = jest.fn();
+
+    render(
+      <AuthKitProvider onSessionExpired={onSessionExpired}>
+        <div>Test Child</div>
+      </AuthKitProvider>,
+    );
+
+    act(() => {
+      // Simulate visibility change
+      window.dispatchEvent(new Event('visibilitychange'));
+    });
+
+    await waitFor(() => {
+      expect(onSessionExpired).not.toHaveBeenCalled();
+    });
+  });
+
+  it('should reload the page when session is expired and no onSessionExpired handler is provided', async () => {
+    (checkSessionAction as jest.Mock).mockRejectedValueOnce(new Error('Failed to fetch'));
+
+    const originalLocation = window.location;
+
+    // @ts-expect-error - we're deleting the property to test the mock
+    delete window.location;
+
+    window.location = { ...window.location, reload: jest.fn() };
+
+    render(
+      <AuthKitProvider>
+        <div>Test Child</div>
+      </AuthKitProvider>,
+    );
+
+    act(() => {
+      // Simulate visibility change
+      window.dispatchEvent(new Event('visibilitychange'));
+    });
+
+    await waitFor(() => {
+      expect(window.location.reload).toHaveBeenCalled();
+    });
+
+    // Restore original reload function
+    window.location = originalLocation;
+  });
+
+  it('should not call onSessionExpired or reload the page if session is valid', async () => {
+    (checkSessionAction as jest.Mock).mockResolvedValueOnce(true);
+    const onSessionExpired = jest.fn();
+
+    const originalLocation = window.location;
+
+    // @ts-expect-error - we're deleting the property to test the mock
+    delete window.location;
+
+    window.location = { ...window.location, reload: jest.fn() };
+
+    render(
+      <AuthKitProvider onSessionExpired={onSessionExpired}>
+        <div>Test Child</div>
+      </AuthKitProvider>,
+    );
+
+    act(() => {
+      // Simulate visibility change
+      window.dispatchEvent(new Event('visibilitychange'));
+    });
+
+    await waitFor(() => {
+      expect(onSessionExpired).not.toHaveBeenCalled();
+      expect(window.location.reload).not.toHaveBeenCalled();
+    });
+
+    window.location = originalLocation;
+  });
+});
+
+describe('useAuth', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should call getAuth when a user is not returned when ensureSignedIn is true', async () => {
+    // First and second calls return no user, second call returns a user
+    (getAuthAction as jest.Mock)
+      .mockResolvedValueOnce({ user: null, loading: true })
+      .mockResolvedValueOnce({ user: { email: 'test@example.com' }, loading: false });
+
+    const TestComponent = () => {
+      const auth = useAuth({ ensureSignedIn: true });
+      return <div data-testid="email">{auth.user?.email}</div>;
+    };
+
+    const { getByTestId } = render(
+      <AuthKitProvider>
+        <TestComponent />
+      </AuthKitProvider>,
+    );
+
+    await waitFor(() => {
+      expect(getAuthAction).toHaveBeenCalledTimes(2);
+      expect(getAuthAction).toHaveBeenLastCalledWith({ ensureSignedIn: true });
+      expect(getByTestId('email')).toHaveTextContent('test@example.com');
+    });
+  });
+
+  it('should throw error when used outside of AuthKitProvider', () => {
+    const TestComponent = () => {
+      const auth = useAuth();
+      return <div>{auth.user?.email}</div>;
+    };
+
+    // Suppress console.error for this test since we expect an error
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    expect(() => {
+      render(<TestComponent />);
+    }).toThrow('useAuth must be used within an AuthKitProvider');
+
+    consoleSpy.mockRestore();
+  });
+
+  it('should provide auth context values when used within AuthKitProvider', async () => {
+    (getAuthAction as jest.Mock).mockResolvedValueOnce({
+      user: { email: 'test@example.com' },
+      sessionId: 'test-session',
+      organizationId: 'test-org',
+      role: 'admin',
+      permissions: ['read', 'write'],
+      entitlements: ['feature1'],
+      featureFlags: ['test-flag'],
+      impersonator: { email: 'admin@example.com' },
+    });
+
+    const TestComponent = () => {
+      const auth = useAuth();
+      return (
+        <div>
+          <div data-testid="loading">{auth.loading.toString()}</div>
+          <div data-testid="email">{auth.user?.email}</div>
+          <div data-testid="session">{auth.sessionId}</div>
+          <div data-testid="org">{auth.organizationId}</div>
+        </div>
+      );
+    };
+
+    const { getByTestId } = render(
+      <AuthKitProvider>
+        <TestComponent />
+      </AuthKitProvider>,
+    );
+
+    // Initially loading
+    expect(getByTestId('loading')).toHaveTextContent('true');
+
+    // Wait for auth to load
+    await waitFor(() => {
+      expect(getByTestId('loading')).toHaveTextContent('false');
+      expect(getByTestId('email')).toHaveTextContent('test@example.com');
+      expect(getByTestId('session')).toHaveTextContent('test-session');
+      expect(getByTestId('org')).toHaveTextContent('test-org');
+    });
+  });
+
+  it('should handle auth methods (getAuth and refreshAuth)', async () => {
+    const mockAuth = {
+      user: { email: 'test@example.com' },
+      sessionId: 'test-session',
+    };
+
+    (getAuthAction as jest.Mock).mockResolvedValueOnce(mockAuth);
+    (refreshAuthAction as jest.Mock).mockResolvedValueOnce({
+      ...mockAuth,
+      sessionId: 'new-session',
+    });
+
+    const TestComponent = () => {
+      const auth = useAuth();
+      return (
+        <div>
+          <div data-testid="session">{auth.sessionId}</div>
+          <button onClick={() => auth.refreshAuth()}>Refresh</button>
+        </div>
+      );
+    };
+
+    const { getByTestId, getByRole } = render(
+      <AuthKitProvider>
+        <TestComponent />
+      </AuthKitProvider>,
+    );
+
+    await waitFor(() => {
+      expect(getByTestId('session')).toHaveTextContent('test-session');
+    });
+
+    // Test refresh
+    act(() => {
+      getByRole('button').click();
+    });
+
+    await waitFor(() => {
+      expect(getByTestId('session')).toHaveTextContent('new-session');
+    });
+  });
+
+  it('should handle switching organizations', async () => {
+    const mockAuth = {
+      user: { email: 'test@example.com' },
+      sessionId: 'test-session',
+      organizationId: 'new-org',
+    };
+
+    (getAuthAction as jest.Mock)
+      .mockResolvedValue(mockAuth)
+      .mockResolvedValueOnce({ ...mockAuth, organizationId: 'old-org' });
+    (switchToOrganizationAction as jest.Mock).mockResolvedValueOnce(mockAuth);
+
+    const TestComponent = () => {
+      const auth = useAuth();
+      return (
+        <div>
+          <div data-testid="org">{auth.organizationId}</div>
+          <button onClick={async () => await auth.switchToOrganization('test-org')}>Switch Organization</button>
+        </div>
+      );
+    };
+
+    const { getByTestId, getByRole } = render(
+      <AuthKitProvider>
+        <TestComponent />
+      </AuthKitProvider>,
+    );
+
+    await waitFor(() => {
+      expect(getByTestId('org')).toHaveTextContent('old-org');
+    });
+
+    // Test refresh
+    act(() => {
+      getByRole('button').click();
+    });
+
+    await waitFor(() => {
+      expect(getByTestId('org')).toHaveTextContent('new-org');
+    });
+  });
+
+  it('should receive an error when refreshAuth fails with an error', async () => {
+    (refreshAuthAction as jest.Mock).mockRejectedValueOnce(new Error('Refresh failed'));
+
+    let error: string | undefined;
+
+    const TestComponent = () => {
+      const auth = useAuth();
+      return (
+        <div>
+          <div data-testid="session">{auth.sessionId}</div>
+          <button
+            onClick={async () => {
+              const result = await auth.refreshAuth();
+              error = result?.error;
+            }}
+          >
+            Refresh
+          </button>
+        </div>
+      );
+    };
+
+    const { getByRole } = render(
+      <AuthKitProvider>
+        <TestComponent />
+      </AuthKitProvider>,
+    );
+
+    act(() => {
+      getByRole('button').click();
+    });
+
+    await waitFor(() => {
+      expect(error).toBe('Refresh failed');
+    });
+  });
+
+  it('should receive an error when refreshAuth fails with a string error', async () => {
+    (refreshAuthAction as jest.Mock).mockRejectedValueOnce('Refresh failed');
+
+    let error: string | undefined;
+
+    const TestComponent = () => {
+      const auth = useAuth();
+      return (
+        <div>
+          <div data-testid="session">{auth.sessionId}</div>
+          <button
+            onClick={async () => {
+              const result = await auth.refreshAuth();
+              error = result?.error;
+            }}
+          >
+            Refresh
+          </button>
+        </div>
+      );
+    };
+
+    const { getByRole } = render(
+      <AuthKitProvider>
+        <TestComponent />
+      </AuthKitProvider>,
+    );
+
+    act(() => {
+      getByRole('button').click();
+    });
+
+    await waitFor(() => {
+      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' });
+  });
+});

package/src/components/button.spec.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Button } from './button.js';
+
+describe('Button', () => {
+  it('should render with default props', () => {
+    const { getByRole } = render(<Button>Click me</Button>);
+    const button = getByRole('button');
+
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent('Click me');
+    expect(button).toHaveAttribute('type', 'button');
+  });
+
+  it('should forward ref correctly', () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    render(<Button ref={ref}>Click me</Button>);
+
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+  });
+
+  it('should merge custom styles with default styles', () => {
+    const { getByRole } = render(<Button style={{ backgroundColor: 'red' }}>Click me</Button>);
+    const button = getByRole('button');
+
+    expect(button).toHaveStyle({
+      backgroundColor: 'red',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    });
+  });
+
+  it('should pass through additional props', () => {
+    const { getByRole } = render(
+      <Button data-testid="test-button" aria-label="Test Button">
+        Click me
+      </Button>,
+    );
+    const button = getByRole('button');
+
+    expect(button).toHaveAttribute('data-testid', 'test-button');
+    expect(button).toHaveAttribute('aria-label', 'Test Button');
+  });
+});

package/src/components/impersonation.spec.tsx

@@ -0,0 +1,134 @@
+import { render, act, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Impersonation } from './impersonation.js';
+import { useAuth } from './authkit-provider.js';
+import { getOrganizationAction } from '../actions.js';
+import * as React from 'react';
+import { handleSignOutAction } from '../actions.js';
+
+// Mock the useAuth hook
+jest.mock('./authkit-provider', () => ({
+  useAuth: jest.fn(),
+}));
+
+// Mock the getOrganizationAction
+jest.mock('../actions', () => ({
+  getOrganizationAction: jest.fn(),
+  handleSignOutAction: jest.fn(),
+}));
+
+describe('Impersonation', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should return null if not impersonating', () => {
+    (useAuth as jest.Mock).mockReturnValue({
+      impersonator: null,
+      user: { id: '123', email: 'user@example.com' },
+      organizationId: null,
+      loading: false,
+    });
+
+    const { container } = render(<Impersonation />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('should return null if loading', () => {
+    (useAuth as jest.Mock).mockReturnValue({
+      impersonator: { email: 'admin@example.com' },
+      user: { id: '123', email: 'user@example.com' },
+      organizationId: null,
+      loading: true,
+    });
+
+    const { container } = render(<Impersonation />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('should render impersonation banner when impersonating', () => {
+    (useAuth as jest.Mock).mockReturnValue({
+      impersonator: { email: 'admin@example.com' },
+      user: { id: '123', email: 'user@example.com' },
+      organizationId: null,
+      loading: false,
+    });
+
+    const { container } = render(<Impersonation />);
+    expect(container.querySelector('[data-workos-impersonation-root]')).toBeInTheDocument();
+  });
+
+  it('should render with organization info when organizationId is provided', async () => {
+    (useAuth as jest.Mock).mockReturnValue({
+      impersonator: { email: 'admin@example.com' },
+      user: { id: '123', email: 'user@example.com' },
+      organizationId: 'org_123',
+      loading: false,
+    });
+
+    (getOrganizationAction as jest.Mock).mockResolvedValue({
+      id: 'org_123',
+      name: 'Test Org',
+    });
+
+    const { container } = await act(async () => {
+      return render(<Impersonation />);
+    });
+
+    expect(container.querySelector('[data-workos-impersonation-root]')).toBeInTheDocument();
+  });
+
+  it('should render at the bottom by default', () => {
+    (useAuth as jest.Mock).mockReturnValue({
+      impersonator: { email: 'admin@example.com' },
+      user: { id: '123', email: 'user@example.com' },
+      organizationId: null,
+      loading: false,
+    });
+
+    const { container } = render(<Impersonation />);
+    const banner = container.querySelector('[data-workos-impersonation-root] > div:nth-child(2)');
+    expect(banner).toHaveStyle({ bottom: 'var(--wi-s)' });
+  });
+
+  it('should render at the top when side prop is "top"', () => {
+    (useAuth as jest.Mock).mockReturnValue({
+      impersonator: { email: 'admin@example.com' },
+      user: { id: '123', email: 'user@example.com' },
+      organizationId: null,
+      loading: false,
+    });
+
+    const { container } = render(<Impersonation side="top" />);
+    const banner = container.querySelector('[data-workos-impersonation-root] > div:nth-child(2)');
+    expect(banner).toHaveStyle({ top: 'var(--wi-s)' });
+  });
+
+  it('should merge custom styles with default styles', () => {
+    (useAuth as jest.Mock).mockReturnValue({
+      impersonator: { email: 'admin@example.com' },
+      user: { id: '123', email: 'user@example.com' },
+      organizationId: null,
+      loading: false,
+    });
+
+    const customStyle = { backgroundColor: 'red' };
+    const { container } = render(<Impersonation style={customStyle} />);
+    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();
+  });
+});

package/src/components/min-max-button.spec.tsx

@@ -0,0 +1,60 @@
+import { render, act } from '@testing-library/react';
+import { MinMaxButton } from './min-max-button.js';
+import * as React from 'react';
+import '@testing-library/jest-dom';
+
+describe('MinMaxButton', () => {
+  beforeEach(() => {
+    // Create the root element before each test
+    const root = document.createElement('div');
+    root.setAttribute('data-workos-impersonation-root', '');
+    document.body.appendChild(root);
+  });
+
+  afterEach(() => {
+    // Clean up after each test
+    document.body.innerHTML = '';
+  });
+
+  it('sets minimized value when clicked', () => {
+    const { getByRole } = render(<MinMaxButton minimizedValue="1">Minimize</MinMaxButton>);
+
+    act(() => {
+      getByRole('button').click();
+    });
+
+    const root = document.querySelector('[data-workos-impersonation-root]');
+    expect(root).toHaveStyle({ '--wi-minimized': '1' });
+  });
+
+  it('does nothing if root is undefined', () => {
+    const { getByRole } = render(<MinMaxButton minimizedValue="1">Minimize</MinMaxButton>);
+
+    const root = document.querySelector('[data-workos-impersonation-root]');
+
+    // Mock querySelector to return null for this test
+    jest.spyOn(document, 'querySelector').mockReturnValue(null);
+
+    act(() => {
+      getByRole('button').click();
+    });
+
+    expect(root).not.toHaveStyle({ '--wi-minimized': '1' });
+  });
+
+  it('renders children correctly', () => {
+    const { getByText } = render(<MinMaxButton minimizedValue="0">Test Child</MinMaxButton>);
+
+    expect(getByText('Test Child')).toBeInTheDocument();
+  });
+
+  it('applies correct default styling', () => {
+    const { getByRole } = render(<MinMaxButton minimizedValue="0">Test</MinMaxButton>);
+
+    const button = getByRole('button');
+    expect(button).toHaveStyle({
+      padding: 0,
+      width: '1.714em',
+    });
+  });
+});