auth provider

app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Poppins } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "@/components/shared/providers/themeprovider";
+import AuthProvider from "@/components/shared/providers/AuthProvider";
 
 const poppins = Poppins({
   weight: ["400", "600", "700", "900"],
@@ -27,7 +28,7 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          {children}
+          <AuthProvider>{children}</AuthProvider>
         </ThemeProvider>
       </body>
     </html>

app/login/page.tsx

@@ -3,13 +3,28 @@ import React, { useState } from "react";
 import { signIn } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
+import { useSession } from "next-auth/react";
 
 const LoginPage = () => {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
   const router = useRouter();
+  const { data: session, status } = useSession();
 
+  if (status === "loading") {
+    return (
+      <>
+        <main className="h-screen w-full flex-center">
+          <p className="animate-pulse text-xl">Loading</p>
+        </main>
+      </>
+    );
+  }
+
+  if (session) {
+    router.push("/admin");
+  }
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
     const res = await signIn("credentials", {

components/shared/providers/AuthProvider.tsx

@@ -0,0 +1,10 @@
+"use client";
+import { SessionProvider } from "next-auth/react";
+
+export default function AuthProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <SessionProvider>{children}</SessionProvider>;
+}