diff --git a/.changeset/fix-auth-button-mode.md b/.changeset/fix-auth-button-mode.md
new file mode 100644
index 00000000..08ab662d
--- /dev/null
+++ b/.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.
diff --git a/packages/ui/src/components/YouVersionAuthButton.test.tsx b/packages/ui/src/components/YouVersionAuthButton.test.tsx
new file mode 100644
index 00000000..b5bb2300
--- /dev/null
+++ b/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') => (
+
+
+
+ );
+
+ 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();
+ });
+});
diff --git a/packages/ui/src/components/YouVersionAuthButton.tsx b/packages/ui/src/components/YouVersionAuthButton.tsx
index 8c85e921..3000ca18 100644
--- a/packages/ui/src/components/YouVersionAuthButton.tsx
+++ b/packages/ui/src/components/YouVersionAuthButton.tsx
@@ -135,6 +135,7 @@ export const YouVersionAuthButton = React.forwardRef): Promise => {
e.preventDefault();
@@ -144,7 +145,7 @@ export const YouVersionAuthButton = React.forwardRef {
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
);
- }, [mode, auth.isAuthenticated, size, text, t]);
+ }, [isSignOut, size, text, t]);
const loadingSpinner = (