fix(client): remove useNavigate from AuthKitProvider to avoid SSR warning

AuthKitProvider is rendered as a Wrap component before RouterProvider context exists. Calling useNavigate() unconditionally during render triggered "useRouter must be used inside a <RouterProvider>" warnings.

The navigate function was only used as a fallback in handleSignOut when no sign-out URL was returned. Replace it with window.location.href, which is appropriate for post-sign-out redirects (full page reload is desirable after session termination).

Fixes #57

Author: nicknisi

src/client/AuthKitProvider.spec.tsx

@@ -14,12 +14,6 @@ vi.mock('../server/server-functions', () => ({
   getSignOutUrl: vi.fn(),
 }));
 
-// Mock TanStack Router hooks to avoid warnings
-vi.mock('@tanstack/react-router', () => ({
-  useNavigate: () => vi.fn(),
-  useLocation: () => ({ pathname: '/' }),
-}));
-
 describe('AuthKitProvider', () => {
   const mockUser: User = {
     id: 'user_123',
@@ -41,6 +35,31 @@ describe('AuthKitProvider', () => {
     vi.clearAllMocks();
   });
 
+  it('renders without router context (no useNavigate SSR warning)', async () => {
+    // Regression test for https://github.com/workos/authkit-tanstack-start/issues/57
+    // AuthKitProvider renders as a Wrap component before RouterProvider exists.
+    // It must NOT call useNavigate() during render, or it would trigger:
+    // "useRouter must be used inside a <RouterProvider>"
+    //
+    // Since @tanstack/react-router is not mocked here, any unconditional
+    // useNavigate() call would throw. If this test passes, the provider
+    // does not call useNavigate during render.
+    const { getAuthAction } = await import('../server/actions');
+    vi.mocked(getAuthAction).mockResolvedValue({ user: null });
+
+    // This will throw if AuthKitProvider calls useNavigate() unconditionally,
+    // because there is no RouterProvider wrapping the component.
+    await act(async () => {
+      render(
+        <AuthKitProvider>
+          <div>Rendered without router</div>
+        </AuthKitProvider>,
+      );
+    });
+
+    expect(screen.getByText('Rendered without router')).toBeDefined();
+  });
+
   it('renders children', async () => {
     const { getAuthAction } = await import('../server/actions');
 
@@ -455,7 +474,7 @@ describe('AuthKitProvider', () => {
     });
   });
 
-  it('handles signOut when no session exists (navigates to returnTo)', async () => {
+  it('handles signOut when no session exists (navigates to returnTo via location)', async () => {
     const { getAuthAction } = await import('../server/actions');
     const { getSignOutUrl } = await import('../server/server-functions');
 
@@ -464,30 +483,37 @@ describe('AuthKitProvider', () => {
     // Mock getSignOutUrl to return null URL (no session to terminate)
     vi.mocked(getSignOutUrl).mockResolvedValue({ url: null });
 
-    const mockNavigate = vi.fn();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (vi.mocked(await import('@tanstack/react-router')) as any).useNavigate = () => mockNavigate;
+    // Mock window.location.href
+    const originalLocation = window.location;
+    Object.defineProperty(window, 'location', {
+      value: { ...originalLocation, href: '' },
+      writable: true,
+    });
 
-    const TestComponent = () => {
-      const { signOut: handleSignOut } = useAuth();
-      return <button onClick={() => handleSignOut({ returnTo: '/login' })}>Sign Out</button>;
-    };
+    try {
+      const TestComponent = () => {
+        const { signOut: handleSignOut } = useAuth();
+        return <button onClick={() => handleSignOut({ returnTo: '/login' })}>Sign Out</button>;
+      };
 
-    render(
-      <AuthKitProvider>
-        <TestComponent />
-      </AuthKitProvider>,
-    );
+      render(
+        <AuthKitProvider>
+          <TestComponent />
+        </AuthKitProvider>,
+      );
 
-    await waitFor(() => {
-      expect(screen.getByText('Sign Out')).toBeDefined();
-    });
+      await waitFor(() => {
+        expect(screen.getByText('Sign Out')).toBeDefined();
+      });
 
-    await act(async () => {
-      fireEvent.click(screen.getByText('Sign Out'));
-    });
+      await act(async () => {
+        fireEvent.click(screen.getByText('Sign Out'));
+      });
 
-    expect(mockNavigate).toHaveBeenCalledWith({ to: '/login' });
+      expect(window.location.href).toBe('/login');
+    } finally {
+      Object.defineProperty(window, 'location', { value: originalLocation, writable: true });
+    }
   });
 
   it('uses default returnTo when signOut called without options', async () => {
@@ -497,31 +523,38 @@ describe('AuthKitProvider', () => {
     vi.mocked(getAuthAction).mockResolvedValue({ user: mockUser, sessionId: 'session_123' });
     vi.mocked(getSignOutUrl).mockResolvedValue({ url: null });
 
-    const mockNavigate = vi.fn();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (vi.mocked(await import('@tanstack/react-router')) as any).useNavigate = () => mockNavigate;
+    // Mock window.location.href
+    const originalLocation = window.location;
+    Object.defineProperty(window, 'location', {
+      value: { ...originalLocation, href: '' },
+      writable: true,
+    });
 
-    const TestComponent = () => {
-      const { signOut: handleSignOut } = useAuth();
-      return <button onClick={() => handleSignOut()}>Sign Out</button>;
-    };
+    try {
+      const TestComponent = () => {
+        const { signOut: handleSignOut } = useAuth();
+        return <button onClick={() => handleSignOut()}>Sign Out</button>;
+      };
 
-    render(
-      <AuthKitProvider>
-        <TestComponent />
-      </AuthKitProvider>,
-    );
+      render(
+        <AuthKitProvider>
+          <TestComponent />
+        </AuthKitProvider>,
+      );
 
-    await waitFor(() => {
-      expect(screen.getByText('Sign Out')).toBeDefined();
-    });
+      await waitFor(() => {
+        expect(screen.getByText('Sign Out')).toBeDefined();
+      });
 
-    await act(async () => {
-      fireEvent.click(screen.getByText('Sign Out'));
-    });
+      await act(async () => {
+        fireEvent.click(screen.getByText('Sign Out'));
+      });
 
-    // Default returnTo is '/'
-    expect(getSignOutUrl).toHaveBeenCalledWith({ data: { returnTo: '/' } });
-    expect(mockNavigate).toHaveBeenCalledWith({ to: '/' });
+      // Default returnTo is '/'
+      expect(getSignOutUrl).toHaveBeenCalledWith({ data: { returnTo: '/' } });
+      expect(window.location.href).toBe('/');
+    } finally {
+      Object.defineProperty(window, 'location', { value: originalLocation, writable: true });
+    }
   });
 });

src/client/AuthKitProvider.tsx

@@ -1,5 +1,4 @@
 import { createContext, useCallback, useContext, useEffect, useState } from 'react';
-import { useNavigate } from '@tanstack/react-router';
 import { checkSessionAction, getAuthAction, refreshAuthAction, switchToOrganizationAction } from '../server/actions.js';
 import { ClientUserInfo, NoUserInfo, getSignOutUrl } from '../server/server-functions.js';
 import type { AuthContextType, AuthKitProviderProps } from './types.js';
@@ -22,7 +21,6 @@ const getProps = (auth: ClientUserInfo | NoUserInfo | undefined) => {
 };
 
 export function AuthKitProvider({ children, onSessionExpired, initialAuth }: AuthKitProviderProps) {
-  const navigate = useNavigate();
   const initialProps = getProps(initialAuth);
   const [user, setUser] = useState<User | null>(initialProps.user);
   const [sessionId, setSessionId] = useState<string | undefined>(initialProps.sessionId);
@@ -88,18 +86,15 @@ export function AuthKitProvider({ children, onSessionExpired, initialAuth }: Aut
     [],
   );
 
-  const handleSignOut = useCallback(
-    async ({ returnTo = '/' }: { returnTo?: string } = {}) => {
-      const result = await getSignOutUrl({ data: { returnTo } });
+  const handleSignOut = useCallback(async ({ returnTo = '/' }: { returnTo?: string } = {}) => {
+    const result = await getSignOutUrl({ data: { returnTo } });
 
-      if (result.url) {
-        window.location.href = result.url;
-      } else {
-        navigate({ to: returnTo });
-      }
-    },
-    [navigate],
-  );
+    if (result.url) {
+      window.location.href = result.url;
+    } else {
+      window.location.href = returnTo;
+    }
+  }, []);
 
   const handleSwitchToOrganization = useCallback(async (organizationId: string) => {
     try {