fix(ui): honor auth button mode

.changeset/fix-auth-button-mode.md

@@ -0,0 +1,5 @@
+---
+'@youversion/platform-react-ui': patch
+---
+
+Make `YouVersionAuthButton` honor explicit and default sign-in modes for authenticated users.

packages/ui/src/components/YouVersionAuthButton.test.tsx

@@ -0,0 +1,53 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { YouVersionAPIUsers, YouVersionPlatformConfiguration } from '@youversion/platform-core';
+import { YouVersionProvider } from '@youversion/platform-react-hooks';
+import { describe, expect, it, vi } from 'vitest';
+import { YouVersionAuthButton } from './YouVersionAuthButton';
+
+describe('YouVersionAuthButton', () => {
+  it('uses mode, rather than authentication state alone, to choose the auth action', async () => {
+    const signIn = vi.spyOn(YouVersionAPIUsers, 'signIn').mockResolvedValue(undefined);
+    const clearAuthTokens = vi
+      .spyOn(YouVersionPlatformConfiguration, 'clearAuthTokens')
+      .mockImplementation(() => undefined);
+
+    const renderButton = (mode?: 'signIn' | 'signOut' | 'auto') => (
+      <YouVersionProvider
+        appKey="test-app-key"
+        authRedirectUrl="https://example.com/callback"
+        includeAuth
+        userInfo={{ id: 'authenticated-user' }}
+      >
+        <YouVersionAuthButton mode={mode} />
+      </YouVersionProvider>
+    );
+
+    const { rerender } = render(renderButton('signIn'));
+    const explicitSignInButton = await screen.findByRole('button', { name: /sign in/i });
+    await waitFor(() => expect(explicitSignInButton).toBeEnabled());
+    fireEvent.click(explicitSignInButton);
+
+    await waitFor(() => expect(signIn).toHaveBeenCalledTimes(1));
+    expect(clearAuthTokens).not.toHaveBeenCalled();
+
+    rerender(renderButton());
+    const defaultButton = await screen.findByRole('button', { name: /sign in/i });
+    fireEvent.click(defaultButton);
+
+    await waitFor(() => expect(signIn).toHaveBeenCalledTimes(2));
+    expect(clearAuthTokens).not.toHaveBeenCalled();
+
+    rerender(renderButton('auto'));
+    const autoButton = await screen.findByRole('button', { name: /sign out/i });
+    fireEvent.click(autoButton);
+
+    expect(clearAuthTokens).toHaveBeenCalledTimes(1);
+    expect(signIn).toHaveBeenCalledTimes(2);
+
+    signIn.mockRestore();
+    clearAuthTokens.mockRestore();
+  });
+});

packages/ui/src/components/YouVersionAuthButton.tsx

@@ -135,6 +135,7 @@ export const YouVersionAuthButton = React.forwardRef<HTMLButtonElement, YouVersi
     const providerTheme = useTheme();
     const theme = background || providerTheme;
     const { t } = useTranslation(undefined, { i18n });
+    const isSignOut = mode === 'signOut' || (mode === 'auto' && auth.isAuthenticated);
 
     const handleClick = async (e: React.MouseEvent<HTMLButtonElement>): Promise<void> => {
       e.preventDefault();
@@ -144,7 +145,7 @@ export const YouVersionAuthButton = React.forwardRef<HTMLButtonElement, YouVersi
       }
 
       try {
-        if (mode === 'signOut' || auth.isAuthenticated) {
+        if (isSignOut) {
           signOut();
         } else {
           await signIn({
@@ -164,8 +165,6 @@ export const YouVersionAuthButton = React.forwardRef<HTMLButtonElement, YouVersi
     const buttonText = useMemo(() => {
       if (text) return text;
 
-      const isSignOut = mode === 'signOut' || (mode === 'auto' && auth.isAuthenticated);
-
       if (size === 'short') {
         return isSignOut ? t('signOut') : t('signIn');
       }
@@ -187,7 +186,7 @@ export const YouVersionAuthButton = React.forwardRef<HTMLButtonElement, YouVersi
           />
         </div>
       );
-    }, [mode, auth.isAuthenticated, size, text, t]);
+    }, [isSignOut, size, text, t]);
 
     const loadingSpinner = (
       <LoaderIcon className="yv:z-20 yv:absolute yv:left-1/2 yv:top-1/2 yv:animate-spin yv:-translate-x-1/2 yv:-translate-y-1/2 yv:fill-primary-foreground yv:text-primary" />