set admin behind a cookie and check role on profile

2025-12-26 17:19:11 -05:00
parent 5401f6464d
commit c8bf032f7a
6 changed files with 226 additions and 175 deletions
@@ -1,7 +1,10 @@
 "use client";
+
 import type React from "react";
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { usePathname, useRouter } from "next/navigation";
 import AdminLeftNavigation from "@/components/AdminLeftNavigation";
+import { useAuth } from "@/context/AuthContext";
 import {
  LayoutDashboard,
  Download,
@@ -15,113 +18,96 @@ import {
 } from "lucide-react";

 const navItems = [
-  {
-    label: "Dashboard",
-    href: "/admin",
-    icon: <LayoutDashboard className="h-4 w-4" />,
-  },
-  {
-    label: "Imports",
-    href: "/admin/import-status",
-    icon: <Download className="h-4 w-4" />,
-  },
-  {
-    label: "Mappings",
-    href: "/admin/mapping",
-    icon: <Layers className="h-4 w-4" />,
-  },
-  {
-    label: "Products",
-    href: "/admin/products",
-    icon: <Boxes className="h-4 w-4" />,
-  },
-  {
-    label: "Merchants",
-    href: "/admin/merchants",
-    icon: <Store className="h-4 w-4" />,
-  },
-  {
-    label: "Platforms",
-    href: "/admin/platforms",
-    icon: <Layers className="h-4 w-4" />,
-  },
-  {
-    label: "Enrichment",
-    href: "/admin/enrichment",
-    icon: <Wand2 className="h-4 w-4" />,
-  },
-  {
-    label: "Users",
-    href: "/admin/users",
-    icon: <Users className="h-4 w-4" />,
-  },
-  {
-    label: "Settings",
-    href: "/admin/settings",
-    icon: <Settings className="h-4 w-4" />,
-  },
-  {
-    label: "List Emails",
-    href: "/admin/email",
-    icon: <LucideMail className="h-4 w-4" />,
-  },
-  {
-    label: "Send a Email",
-    href: "/admin/email/send",
-    icon: <LucideMail className="h-4 w-4" />,
-  },
-  
+  { label: "Dashboard", href: "/admin", icon: <LayoutDashboard className="h-4 w-4" /> },
+  { label: "Imports", href: "/admin/import-status", icon: <Download className="h-4 w-4" /> },
+  { label: "Mappings", href: "/admin/mapping", icon: <Layers className="h-4 w-4" /> },
+  { label: "Products", href: "/admin/products", icon: <Boxes className="h-4 w-4" /> },
+  { label: "Merchants", href: "/admin/merchants", icon: <Store className="h-4 w-4" /> },
+  { label: "Platforms", href: "/admin/platforms", icon: <Layers className="h-4 w-4" /> },
+  { label: "Enrichment", href: "/admin/enrichment", icon: <Wand2 className="h-4 w-4" /> },
+  { label: "Users", href: "/admin/users", icon: <Users className="h-4 w-4" /> },
+  { label: "Settings", href: "/admin/settings", icon: <Settings className="h-4 w-4" /> },
+  { label: "List Emails", href: "/admin/email", icon: <LucideMail className="h-4 w-4" /> },
+  { label: "Send an Email", href: "/admin/email/send", icon: <LucideMail className="h-4 w-4" /> },
 ];

-// ... existing code ...
-// ADMIN CHECK FOR LOGIN
-// const { user, loading } = useAuth();
-
-// if (!loading && user?.role !== "ADMIN") {
-//   redirect("/"); // or /login
-// }
-
 export default function AdminLayout({
-                                      children,
-                                    }: {
+  children,
+}: {
  children: React.ReactNode;
 }) {
  const [collapsed, setCollapsed] = useState(false);
+  const { user, loading } = useAuth();
+
+  const router = useRouter();
+  const pathname = usePathname();
+
+  // Where to send people back after login
+  const next = useMemo(
+    () => encodeURIComponent(pathname || "/admin"),
+    [pathname]
+  );
+
+  /**
+   * ✅ AUTH GUARD
+   * Redirects happen in useEffect (NOT during render)
+   */
+  useEffect(() => {
+    if (loading) return;
+
+    // Not logged in
+    if (!user) {
+      router.replace(`/login?next=${next}`);
+      return;
+    }
+
+    // Logged in but not admin
+    if (user.role !== "ADMIN") {
+      router.replace("/");
+    }
+  }, [loading, user, router, next]);
+
+  // While loading OR redirecting, render nothing
+  if (loading) return null;
+  if (!user) return null;
+  if (user.role !== "ADMIN") return null;

  return (
-      <div className="flex min-h-screen bg-black text-zinc-50">
-        <AdminLeftNavigation
-            collapsed={collapsed}
-            onToggleCollapsed={() => setCollapsed((v) => !v)}
-        />
+    <div className="flex min-h-screen bg-black text-zinc-50">
+      <AdminLeftNavigation
+        collapsed={collapsed}
+        onToggleCollapsed={() => setCollapsed((v) => !v)}
+        items={navItems}
+      />

-        {/* Main column */}
-        <div className="flex min-h-screen flex-1 flex-col">
-          {/* Top bar */}
-          <header className="flex items-center justify-between border-b border-zinc-900 bg-zinc-950/70 px-4 py-3">
-            <div>
-              <p className="text-xs uppercase tracking-[0.18em] text-zinc-500">
-                Admin
-              </p>
-              <p className="text-sm text-zinc-200">
-                Battl Builders Control Panel
-              </p>
-            </div>
-            <div className="flex items-center gap-3">
+      {/* Main column */}
+      <div className="flex min-h-screen flex-1 flex-col">
+        {/* Top bar */}
+        <header className="flex items-center justify-between border-b border-zinc-900 bg-zinc-950/70 px-4 py-3">
+          <div>
+            <p className="text-xs uppercase tracking-[0.18em] text-zinc-500">
+              Admin
+            </p>
+            <p className="text-sm text-zinc-200">
+              Battl Builders Control Panel
+            </p>
+          </div>
+
+          <div className="flex items-center gap-3">
            <span className="rounded-full border border-amber-500/30 bg-amber-500/10 px-3 py-1 text-[11px] font-medium text-amber-300">
              Internal • v0.1
            </span>
-              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-zinc-900 text-[11px] text-zinc-300">
-                ADMIN
-              </div>
+            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-zinc-900 text-[11px] text-zinc-300">
+              ADMIN
            </div>
-          </header>
+          </div>
+        </header>

-          {/* Content */}
-          <main className="mx-auto flex w-full max-w-6xl flex-1 flex-col px-4 py-6">
-            {children}
-          </main>
-        </div>
+        {/* Content */}
+        <main className="mx-auto flex w-full max-w-6xl flex-1 flex-col px-4 py-6">
+          {children}
+        </main>
      </div>
+    </div>
  );
 }
@@ -0,0 +1,38 @@
+import { NextResponse } from "next/server";
+
+export async function POST(req: Request) {
+  const { token, role } = await req.json();
+
+  if (!token) {
+    return NextResponse.json({ ok: false }, { status: 400 });
+  }
+
+  const res = NextResponse.json({ ok: true });
+
+  // Server-readable, JS-unreadable
+  res.cookies.set("bb_access_token", token, {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === "production",
+    sameSite: "lax",
+    path: "/",
+  });
+
+  // Optional: for quick middleware role checks (not “secure” by itself)
+  if (role) {
+    res.cookies.set("bb_role", role, {
+      httpOnly: false,
+      secure: process.env.NODE_ENV === "production",
+      sameSite: "lax",
+      path: "/",
+    });
+  }
+
+  return res;
+}
+
+export async function DELETE() {
+  const res = NextResponse.json({ ok: true });
+  res.cookies.set("bb_access_token", "", { path: "/", maxAge: 0 });
+  res.cookies.set("bb_role", "", { path: "/", maxAge: 0 });
+  return res;
+}
@@ -1,6 +1,8 @@
 // app/layout.tsx
 import "./globals.css";
 import type { ReactNode } from "react";
+import Script from "next/script";
+
 import { AuthProvider } from "@/context/AuthContext";
 import { Banner } from "@/components/Banner";

@@ -38,6 +40,9 @@ export default function RootLayout({ children }: { children: ReactNode }) {

      <body className="bg-dark text-zinc-950 dark:bg-black dark:text-zinc-50">
        {" "}
+        <Script src="https://umami.ash.gofwd.group/script.js" data-website-id="ad310b4a-aa5e-471a-938b-47a6c0f4108d"
+        strategy="lazyOnload"
+        />
        <AuthProvider>
          <Banner />
          {children}