Fix first user not getting ADMIN role when signing up via OAuth

The createUser event in auth.ts now promotes the first user to ADMIN
if no admin exists yet. The JWT callback also fetches the role from the
database on sign-in to pick up the freshly assigned ADMIN role.

Co-authored-by: xCyanGrizzly <53275238+xCyanGrizzly@users.noreply.github.com>

src/app/(auth)/register/actions.ts

@@ -21,21 +21,27 @@ export async function registerUser(input: unknown): Promise<ActionResult<{ id: s
 
   const hashedPassword = await bcrypt.hash(parsed.data.password, 10);
 
-  const user = await prisma.user.create({
-    data: {
-      name: parsed.data.name,
-      email: parsed.data.email,
-      hashedPassword,
-      role: "USER",
-      settings: {
-        create: {
-          lowStockThreshold: 10,
-          currency: "USD",
-          theme: "dark",
-          units: "metric",
+  // First user to register becomes ADMIN (self-hosted owner)
+  const user = await prisma.$transaction(async (tx) => {
+    const userCount = await tx.user.count();
+    const role = userCount === 0 ? "ADMIN" : "USER";
+
+    return tx.user.create({
+      data: {
+        name: parsed.data.name,
+        email: parsed.data.email,
+        hashedPassword,
+        role,
+        settings: {
+          create: {
+            lowStockThreshold: 10,
+            currency: "USD",
+            theme: "dark",
+            units: "metric",
+          },
         },
       },
-    },
+    });
   });
 
   return { success: true, data: { id: user.id } };

src/components/layout/mobile-sidebar.tsx

@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useSession } from "next-auth/react";
 import {
   LayoutDashboard,
   Cylinder,
@@ -17,27 +18,17 @@ import {
   Flame,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { APP_NAME } from "@/lib/constants";
+import { APP_NAME, NAV_ITEMS } from "@/lib/constants";
 import { SheetHeader, SheetTitle } from "@/components/ui/sheet";
 
 const icons = { LayoutDashboard, Cylinder, Droplets, Paintbrush, Gem, FileBox, Send, ClipboardList, Building2, MapPin, Settings };
 
-const navItems = [
-  { label: "Dashboard", href: "/dashboard", icon: "LayoutDashboard" as const },
-  { label: "Filaments", href: "/filaments", icon: "Cylinder" as const },
-  { label: "Resins", href: "/resins", icon: "Droplets" as const },
-  { label: "Paints", href: "/paints", icon: "Paintbrush" as const },
-  { label: "Supplies", href: "/supplies", icon: "Gem" as const },
-  { label: "STL Files", href: "/stls", icon: "FileBox" as const },
-  { label: "Telegram", href: "/telegram", icon: "Send" as const },
-  { label: "Usage", href: "/usage", icon: "ClipboardList" as const },
-  { label: "Vendors", href: "/vendors", icon: "Building2" as const },
-  { label: "Locations", href: "/locations", icon: "MapPin" as const },
-  { label: "Settings", href: "/settings", icon: "Settings" as const },
-];
-
 export function MobileSidebar() {
   const pathname = usePathname();
+  const { data: session } = useSession();
+  const isAdmin = session?.user?.role === "ADMIN";
+
+  const visibleItems = NAV_ITEMS.filter((item) => !item.adminOnly || isAdmin);
 
   return (
     <div className="flex h-full flex-col">
@@ -48,7 +39,7 @@ export function MobileSidebar() {
         </SheetTitle>
       </SheetHeader>
       <nav className="flex-1 space-y-1 p-2">
-        {navItems.map((item) => {
+        {visibleItems.map((item) => {
           const Icon = icons[item.icon];
           const isActive = pathname.startsWith(item.href);
 

src/components/layout/sidebar.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useSession } from "next-auth/react";
 import {
   LayoutDashboard,
   Cylinder,
@@ -20,7 +21,7 @@ import {
   PanelLeft,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { APP_NAME } from "@/lib/constants";
+import { APP_NAME, NAV_ITEMS } from "@/lib/constants";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 
@@ -38,23 +39,13 @@ const icons = {
   Settings,
 } as const;
 
-const navItems = [
-  { label: "Dashboard", href: "/dashboard", icon: "LayoutDashboard" as const },
-  { label: "Filaments", href: "/filaments", icon: "Cylinder" as const },
-  { label: "Resins", href: "/resins", icon: "Droplets" as const },
-  { label: "Paints", href: "/paints", icon: "Paintbrush" as const },
-  { label: "Supplies", href: "/supplies", icon: "Gem" as const },
-  { label: "STL Files", href: "/stls", icon: "FileBox" as const },
-  { label: "Telegram", href: "/telegram", icon: "Send" as const },
-  { label: "Usage", href: "/usage", icon: "ClipboardList" as const },
-  { label: "Vendors", href: "/vendors", icon: "Building2" as const },
-  { label: "Locations", href: "/locations", icon: "MapPin" as const },
-  { label: "Settings", href: "/settings", icon: "Settings" as const },
-];
-
 export function Sidebar() {
   const pathname = usePathname();
   const [collapsed, setCollapsed] = useState(false);
+  const { data: session } = useSession();
+  const isAdmin = session?.user?.role === "ADMIN";
+
+  const visibleItems = NAV_ITEMS.filter((item) => !item.adminOnly || isAdmin);
 
   return (
     <aside
@@ -73,7 +64,7 @@ export function Sidebar() {
 
       {/* Navigation */}
       <nav className="flex-1 space-y-1 p-2">
-        {navItems.map((item) => {
+        {visibleItems.map((item) => {
           const Icon = icons[item.icon];
           const isActive = pathname.startsWith(item.href);
 

src/lib/auth.ts

@@ -18,7 +18,12 @@ export const { auth, handlers, signIn, signOut } = NextAuth({
     async jwt({ token, user }) {
       if (user) {
         token.id = user.id!;
-        token.role = user.role ?? "USER";
+        // Fetch the role from the database to pick up first-user ADMIN promotion
+        const dbUser = await prisma.user.findUnique({
+          where: { id: user.id! },
+          select: { role: true },
+        });
+        token.role = dbUser?.role ?? user.role ?? "USER";
       }
       return token;
     },
@@ -33,6 +38,18 @@ export const { auth, handlers, signIn, signOut } = NextAuth({
   events: {
     async createUser({ user }) {
       if (user.id) {
+        // First user to register becomes ADMIN (self-hosted owner)
+        const adminExists = await prisma.user.findFirst({
+          where: { role: "ADMIN" },
+          select: { id: true },
+        });
+        if (!adminExists) {
+          await prisma.user.update({
+            where: { id: user.id },
+            data: { role: "ADMIN" },
+          });
+        }
+
         await prisma.userSettings.upsert({
           where: { userId: user.id },
           update: {},

src/lib/constants.ts

@@ -1,17 +1,17 @@
 export const APP_NAME = "Dragon's Stash";
 
 export const NAV_ITEMS = [
-  { label: "Dashboard", href: "/dashboard", icon: "LayoutDashboard" },
-  { label: "Filaments", href: "/filaments", icon: "Cylinder" },
-  { label: "Resins", href: "/resins", icon: "Droplets" },
-  { label: "Paints", href: "/paints", icon: "Paintbrush" },
-  { label: "Supplies", href: "/supplies", icon: "Gem" },
-  { label: "STL Files", href: "/stls", icon: "FileBox" },
-  { label: "Telegram", href: "/telegram", icon: "Send" },
-  { label: "Usage", href: "/usage", icon: "ClipboardList" },
-  { label: "Vendors", href: "/vendors", icon: "Building2" },
-  { label: "Locations", href: "/locations", icon: "MapPin" },
-  { label: "Settings", href: "/settings", icon: "Settings" },
+  { label: "Dashboard", href: "/dashboard", icon: "LayoutDashboard", adminOnly: false },
+  { label: "Filaments", href: "/filaments", icon: "Cylinder", adminOnly: false },
+  { label: "Resins", href: "/resins", icon: "Droplets", adminOnly: false },
+  { label: "Paints", href: "/paints", icon: "Paintbrush", adminOnly: false },
+  { label: "Supplies", href: "/supplies", icon: "Gem", adminOnly: false },
+  { label: "STL Files", href: "/stls", icon: "FileBox", adminOnly: false },
+  { label: "Telegram", href: "/telegram", icon: "Send", adminOnly: true },
+  { label: "Usage", href: "/usage", icon: "ClipboardList", adminOnly: false },
+  { label: "Vendors", href: "/vendors", icon: "Building2", adminOnly: false },
+  { label: "Locations", href: "/locations", icon: "MapPin", adminOnly: false },
+  { label: "Settings", href: "/settings", icon: "Settings", adminOnly: false },
 ] as const;
 
 export const MATERIALS = [