navigate to login if unauthenticated

app/loginVerification.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import { signOut, useSession } from "next-auth/react"
+import { usePathname } from "next/navigation"
+import { useEffect } from "react"
+
+export default function LoginVerification({ children }: { children: React.ReactNode }) {
+
+    const { status } = useSession()
+    const url = usePathname()
+
+    useEffect(() => {
+        if (url === "/login") return
+        if (status === "unauthenticated") {
+            signOut({ callbackUrl: "/login" })
+        }
+    }, [status, url])
+
+    return children
+} 

app/providers.tsx

@@ -8,6 +8,7 @@ import { ImperativePanelHandle } from "react-resizable-panels";
 import Navbar from "@/components/custom/navbar";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import useScreenSize from "./useScreenSize";
+import LoginVerification from "./loginVerification";
 
 export default function NextAuthProvider({ children }: { children: React.ReactNode }) {
 
@@ -56,7 +57,7 @@ export default function NextAuthProvider({ children }: { children: React.ReactNo
             </button>
             <Navbar collapsed={isCollapsed} />
           </ResizablePanel>
-          <ResizablePanel defaultSize={100 - panelSize}>{children}</ResizablePanel>
+          <ResizablePanel defaultSize={100 - panelSize}><LoginVerification>{children}</LoginVerification></ResizablePanel>
         </ResizablePanelGroup>
       </ThemeProvider>
     </SessionProvider>