Add Better Auth admin authentication

components/dashboard-sidebar.tsx

@@ -4,14 +4,18 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { LogOut } from "lucide-react";
 
-import { signOutMock } from "@/app/actions/auth";
+import { authClient } from "@/lib/auth-client";
 import { Button } from "@/components/ui/button";
 import { dashboardNavigation } from "@/lib/dashboard-navigation";
-import type { MockSession } from "@/lib/mock-auth";
+import { useState } from "react";
 import { cn } from "@/lib/utils";
+import { useRouter } from "next/navigation";
 
-export function DashboardSidebar({ session }: { session: MockSession }) {
+export function DashboardSidebar() {
   const pathname = usePathname();
+  const router = useRouter();
+  const [isSigningOut, setIsSigningOut] = useState(false);
+  const { data: session, isPending } = authClient.useSession();
 
   return (
     <aside className="flex w-full shrink-0 flex-col border-b bg-sidebar text-sidebar-foreground md:sticky md:top-0 md:min-h-dvh md:w-72 md:border-b-0 md:border-r">
@@ -59,17 +63,27 @@ export function DashboardSidebar({ session }: { session: MockSession }) {
 
       <div className="border-t p-3 md:mt-auto">
         <div className="mb-3 rounded-lg border bg-background p-3 md:block">
-          <p className="truncate text-sm font-medium">{session.name}</p>
+          <p className="truncate text-sm font-medium">
+            {isPending ? "Lade..." : session?.user?.name ?? "Admin"}
+          </p>
           <p className="truncate text-xs text-muted-foreground">
-            {session.email}
+            {session?.user?.email ?? "admin@local"}
           </p>
         </div>
-        <form action={signOutMock}>
-          <Button className="w-full justify-start" variant="outline">
-            <LogOut />
-            Sign out
-          </Button>
-        </form>
+        <Button
+          className="w-full justify-start"
+          variant="outline"
+          onClick={async () => {
+            setIsSigningOut(true);
+            await authClient.signOut();
+            router.replace("/login");
+            router.refresh();
+          }}
+          disabled={isSigningOut}
+        >
+          <LogOut />
+          {isSigningOut ? "Abmeldung..." : "Abmelden"}
+        </Button>
       </div>
     </aside>
   );