fix(aurora): pass router as prop to AuthProvider to avoid useRouter warning (#1032)

- AuthProvider now accepts router as a prop instead of calling useRouter() internally
- This fixes the warning 'useRouter must be used inside a <RouterProvider>'
- Updated tests to pass mock router
- Added autocomplete attributes to login form inputs for better UX

Author: andypf

packages/aurora/src/client/App.tsx

@@ -90,7 +90,7 @@ const App = (props: AppProps) => {
         <AppShellProvider shadowRoot={false} theme={currentTheme}>
           <trpcReact.Provider client={reactClient} queryClient={queryClient}>
             <QueryClientProvider client={queryClient}>
-              <AuthProvider>
+              <AuthProvider router={router}>
                 <NotificationManager position="top-right" />
                 <AppInner
                   router={router}

packages/aurora/src/client/components/navigation/MainNavigation.test.tsx

@@ -22,8 +22,14 @@ beforeAll(() => {
   }
 })
 
+// Mock router for AuthProvider
+const mockRouter = {
+  navigate: vi.fn(),
+  invalidate: vi.fn(),
+}
+
 const TestingProvider = ({ children }: { children: ReactNode }) => (
-  <AuthProvider>
+  <AuthProvider router={mockRouter}>
     <I18nProvider i18n={i18n}>{children}</I18nProvider>
   </AuthProvider>
 )

packages/aurora/src/client/routes/index.tsx

@@ -233,6 +233,7 @@ export function AuthLoginPage() {
               id="user"
               type="text"
               placeholder={t`Enter your username`}
+              autoComplete="username"
               className={textinputstyles}
               onChange={(e) => {
                 setForm({ ...form, user: e.target.value })
@@ -249,6 +250,7 @@ export function AuthLoginPage() {
             <input
               id="password"
               type="password"
+              autoComplete="current-password"
               required
               className={textinputstyles}
               onChange={(e) => {

packages/aurora/src/client/store/AuthProvider.test.tsx

@@ -3,21 +3,27 @@ import { renderHook, act } from "@testing-library/react"
 import { AuthProvider, useAuth } from "./AuthProvider"
 import type { User } from "./AuthProvider"
 import { ReactNode } from "react"
-import { useRouter } from "@tanstack/react-router"
-
-// Mock router — AuthProvider uses useRouter() internally
-vi.mock("../router", () => ({}))
 
 // Extract the non-null user type
 type AuthUser = NonNullable<User>
 
-const wrapper = ({ children }: { children: ReactNode }) => <AuthProvider>{children}</AuthProvider>
+// Mock router object passed as prop
+const mockRouter = {
+  navigate: vi.fn(),
+  invalidate: vi.fn(),
+}
+
+const wrapper = ({ children }: { children: ReactNode }) => <AuthProvider router={mockRouter}>{children}</AuthProvider>
 
 describe("AuthProvider", () => {
   beforeEach(() => {
     vi.clearAllMocks()
     vi.useFakeTimers()
 
+    // Reset mock router
+    mockRouter.navigate.mockClear()
+    mockRouter.invalidate.mockClear()
+
     // Mock window.location
     Object.defineProperty(window, "location", {
       value: {
@@ -138,7 +144,7 @@ describe("AuthProvider", () => {
       expect(result.current.isAuthenticated).toBe(false)
       expect(result.current.user).toBeNull()
       expect(result.current.logoutReason).toBe("manual")
-      expect(useRouter().invalidate).toHaveBeenCalled()
+      expect(mockRouter.invalidate).toHaveBeenCalled()
     })
 
     it("should invalidate router on inactive logout (no modal)", async () => {
@@ -162,7 +168,7 @@ describe("AuthProvider", () => {
       expect(result.current.isAuthenticated).toBe(false)
       expect(result.current.logoutReason).toBe("inactive")
       expect(result.current.showInactivityModal).toBe(false)
-      expect(useRouter().invalidate).toHaveBeenCalled()
+      expect(mockRouter.invalidate).toHaveBeenCalled()
     })
 
     it("should show modal on expired logout", async () => {
@@ -450,7 +456,7 @@ describe("AuthProvider", () => {
       })
 
       expect(result.current.showInactivityModal).toBe(false)
-      expect(useRouter().navigate).toHaveBeenCalledWith({
+      expect(mockRouter.navigate).toHaveBeenCalledWith({
         to: "/",
         search: { redirect: "/dashboard" },
       })
@@ -487,7 +493,7 @@ describe("AuthProvider", () => {
         result.current.closeInactivityModal()
       })
 
-      expect(useRouter().navigate).toHaveBeenCalledWith({
+      expect(mockRouter.navigate).toHaveBeenCalledWith({
         to: "/",
         search: undefined,
       })

packages/aurora/src/client/store/AuthProvider.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useCallback, useState } from "react"
 import { TokenData } from "../../server/Authentication/types/models"
-import { useRouter } from "@tanstack/react-router"
 
 export type User = TokenData["user"] | null
 
@@ -16,10 +15,14 @@ export interface AuthContext {
   redirectAfterModal?: string
 }
 
+interface RouterNavigation {
+  navigate: (options: { to: string; search?: Record<string, unknown> }) => void
+  invalidate: () => void
+}
+
 const AuthContext = React.createContext<AuthContext | null>(null)
 
-export function AuthProvider({ children }: { children: React.ReactNode }) {
-  const router = useRouter()
+export function AuthProvider({ children, router }: { children: React.ReactNode; router: RouterNavigation }) {
   const [user, setUser] = React.useState<User | null>(null)
   const [expiresAt, setExpiresAt] = React.useState<Date | undefined>(undefined)
   const [logoutReason, setLogoutReason] = React.useState<"inactive" | "expired" | "manual" | undefined>(undefined)