feat(auth): default to single-user mode with enable toggle

backend/prisma/migrations/20260206173000_add_auth_enabled_system_config/migration.sql

@@ -0,0 +1,5 @@
+-- Add authEnabled flag to SystemConfig to support single-user mode by default.
+
+-- SQLite supports simple ADD COLUMN for non-null with default.
+ALTER TABLE "SystemConfig" ADD COLUMN "authEnabled" BOOLEAN NOT NULL DEFAULT false;
+

backend/prisma/schema.prisma

@@ -32,6 +32,7 @@ model User {
 
 model SystemConfig {
   id                  String   @id @default("default")
+  authEnabled         Boolean  @default(false)
   registrationEnabled Boolean  @default(false)
   createdAt           DateTime @default(now())
   updatedAt           DateTime @updatedAt

backend/src/auth.ts

@@ -45,10 +45,26 @@ const ensureSystemConfig = async () => {
   return prisma.systemConfig.upsert({
     where: { id: DEFAULT_SYSTEM_CONFIG_ID },
     update: {},
-    create: { id: DEFAULT_SYSTEM_CONFIG_ID, registrationEnabled: false },
+    create: {
+      id: DEFAULT_SYSTEM_CONFIG_ID,
+      authEnabled: false,
+      registrationEnabled: false,
+    },
   });
 };
 
+const ensureAuthEnabled = async (res: Response): Promise<boolean> => {
+  const systemConfig = await ensureSystemConfig();
+  if (!systemConfig.authEnabled) {
+    res.status(404).json({
+      error: "Not found",
+      message: "Authentication is disabled",
+    });
+    return false;
+  }
+  return true;
+};
+
 // Rate limiting for auth endpoints (stricter than general rate limiting)
 const authRateLimiter = rateLimit({
   windowMs: 15 * 60 * 1000, // 15 minutes
@@ -89,6 +105,10 @@ const adminRoleUpdateSchema = z.object({
   role: z.enum(["ADMIN", "USER"]),
 });
 
+const authEnabledToggleSchema = z.object({
+  enabled: z.boolean(),
+});
+
 const findUserByIdentifier = async (identifier: string) => {
   const trimmed = identifier.trim();
   if (trimmed.length === 0) return null;
@@ -150,6 +170,7 @@ const getRefreshTokenExpiresAt = (): Date =>
  */
 router.post("/register", authRateLimiter, async (req: Request, res: Response) => {
   try {
+    if (!(await ensureAuthEnabled(res))) return;
     const parsed = registerSchema.safeParse(req.body);
 
     if (!parsed.success) {
@@ -380,6 +401,7 @@ router.post("/register", authRateLimiter, async (req: Request, res: Response) =>
  */
 router.post("/login", authRateLimiter, async (req: Request, res: Response) => {
   try {
+    if (!(await ensureAuthEnabled(res))) return;
     const parsed = loginSchema.safeParse(req.body);
 
     if (!parsed.success) {
@@ -507,6 +529,7 @@ router.post("/login", authRateLimiter, async (req: Request, res: Response) => {
  */
 router.post("/refresh", async (req: Request, res: Response) => {
   try {
+    if (!(await ensureAuthEnabled(res))) return;
     const { refreshToken: oldRefreshToken } = req.body;
 
     if (!oldRefreshToken || typeof oldRefreshToken !== "string") {
@@ -639,6 +662,7 @@ router.post("/refresh", async (req: Request, res: Response) => {
  */
 router.get("/me", requireAuth, async (req: Request, res: Response) => {
   try {
+    if (!(await ensureAuthEnabled(res))) return;
     if (!req.user) {
       return res.status(401).json({
         error: "Unauthorized",
@@ -684,16 +708,31 @@ router.get("/me", requireAuth, async (req: Request, res: Response) => {
 router.get("/status", optionalAuth, async (req: Request, res: Response) => {
   try {
     const systemConfig = await ensureSystemConfig();
+    if (!systemConfig.authEnabled) {
+      return res.json({
+        enabled: false,
+        authenticated: false,
+        authEnabled: false,
+        registrationEnabled: false,
+        bootstrapRequired: false,
+        user: null,
+      });
+    }
+
     const bootstrapUser = await prisma.user.findUnique({
       where: { id: BOOTSTRAP_USER_ID },
       select: { id: true, isActive: true },
     });
+    const activeUsers = await prisma.user.count({ where: { isActive: true } });
+    const bootstrapRequired =
+      Boolean(bootstrapUser && bootstrapUser.isActive === false) && activeUsers === 0;
 
     res.json({
       enabled: true,
+      authEnabled: true,
       authenticated: Boolean(req.user),
       registrationEnabled: systemConfig.registrationEnabled,
-      bootstrapRequired: Boolean(bootstrapUser && bootstrapUser.isActive === false),
+      bootstrapRequired,
       user: req.user
         ? {
             id: req.user.id,
@@ -714,12 +753,97 @@ router.get("/status", optionalAuth, async (req: Request, res: Response) => {
   }
 });
 
+/**
+ * POST /auth/auth-enabled
+ * Enable/disable authentication mode.
+ *
+ * - Enabling auth is allowed without login (single-user mode).
+ * - Disabling auth requires an authenticated ADMIN.
+ */
+router.post("/auth-enabled", optionalAuth, async (req: Request, res: Response) => {
+  try {
+    const parsed = authEnabledToggleSchema.safeParse(req.body);
+    if (!parsed.success) {
+      return res
+        .status(400)
+        .json({ error: "Bad request", message: "Invalid toggle payload" });
+    }
+
+    const systemConfig = await ensureSystemConfig();
+    const current = systemConfig.authEnabled;
+    const next = parsed.data.enabled;
+
+    if (current && !next) {
+      if (!req.user) {
+        return res
+          .status(401)
+          .json({ error: "Unauthorized", message: "User not authenticated" });
+      }
+      if (req.user.role !== "ADMIN") {
+        return res
+          .status(403)
+          .json({ error: "Forbidden", message: "Admin access required" });
+      }
+    }
+
+    // Ensure the bootstrap user exists for the bootstrap registration flow.
+    if (!current && next) {
+      const bootstrap = await prisma.user.findUnique({
+        where: { id: BOOTSTRAP_USER_ID },
+        select: { id: true },
+      });
+      if (!bootstrap) {
+        await prisma.user.create({
+          data: {
+            id: BOOTSTRAP_USER_ID,
+            email: "bootstrap@excalidash.local",
+            username: null,
+            passwordHash: "",
+            name: "Bootstrap Admin",
+            role: "ADMIN",
+            mustResetPassword: true,
+            isActive: false,
+          },
+        });
+      }
+    }
+
+    const updated = await prisma.systemConfig.upsert({
+      where: { id: DEFAULT_SYSTEM_CONFIG_ID },
+      update: { authEnabled: next },
+      create: {
+        id: DEFAULT_SYSTEM_CONFIG_ID,
+        authEnabled: next,
+        registrationEnabled: systemConfig.registrationEnabled,
+      },
+    });
+
+    const bootstrapUser = await prisma.user.findUnique({
+      where: { id: BOOTSTRAP_USER_ID },
+      select: { id: true, isActive: true },
+    });
+    const activeUsers = await prisma.user.count({ where: { isActive: true } });
+    const bootstrapRequired =
+      Boolean(updated.authEnabled && bootstrapUser && bootstrapUser.isActive === false) &&
+      activeUsers === 0;
+
+    res.json({ authEnabled: updated.authEnabled, bootstrapRequired });
+  } catch (error) {
+    console.error("Auth enabled toggle error:", error);
+    res.status(500).json({
+      error: "Internal server error",
+      message: "Failed to update authentication mode",
+    });
+  }
+});
+
 /**
  * POST /auth/registration/toggle
  * Enable/disable registration (admin-only)
  */
 router.post("/registration/toggle", requireAuth, async (req: Request, res: Response) => {
   try {
+    if (!(await ensureAuthEnabled(res))) return;
     if (!req.user) {
       return res.status(401).json({ error: "Unauthorized", message: "User not authenticated" });
     }
@@ -754,6 +878,7 @@ router.post("/registration/toggle", requireAuth, async (req: Request, res: Respo
  */
 router.post("/admins", requireAuth, async (req: Request, res: Response) => {
   try {
+    if (!(await ensureAuthEnabled(res))) return;
     if (!req.user) {
       return res.status(401).json({ error: "Unauthorized", message: "User not authenticated" });
     }
@@ -805,6 +930,7 @@ const passwordResetRequestSchema = z.object({
 });
 
 router.post("/password-reset-request", authRateLimiter, async (req: Request, res: Response) => {
+  if (!(await ensureAuthEnabled(res))) return;
   // Check if password reset feature is enabled
   if (!config.enablePasswordReset) {
     return res.status(404).json({
@@ -901,6 +1027,7 @@ const passwordResetConfirmSchema = z.object({
 });
 
 router.post("/password-reset-confirm", authRateLimiter, async (req: Request, res: Response) => {
+  if (!(await ensureAuthEnabled(res))) return;
   // Check if password reset feature is enabled
   if (!config.enablePasswordReset) {
     return res.status(404).json({
@@ -1010,6 +1137,7 @@ const updateProfileSchema = z.object({
 
 router.put("/profile", requireAuth, async (req: Request, res: Response) => {
   try {
+    if (!(await ensureAuthEnabled(res))) return;
     if (!req.user) {
       return res.status(401).json({
         error: "Unauthorized",
@@ -1074,6 +1202,7 @@ const changePasswordSchema = z.object({
 
 router.post("/change-password", requireAuth, authRateLimiter, async (req: Request, res: Response) => {
   try {
+    if (!(await ensureAuthEnabled(res))) return;
     if (!req.user) {
       return res.status(401).json({
         error: "Unauthorized",

backend/src/middleware/auth.ts

@@ -7,6 +7,76 @@ import { config } from "../config";
 import { PrismaClient } from "../generated/client";
 
 const prisma = new PrismaClient();
+const DEFAULT_SYSTEM_CONFIG_ID = "default";
+const BOOTSTRAP_USER_ID = "bootstrap-admin";
+
+type AuthEnabledCache = {
+  value: boolean;
+  fetchedAt: number;
+};
+
+let authEnabledCache: AuthEnabledCache | null = null;
+const AUTH_ENABLED_TTL_MS = 0;
+
+const getAuthEnabled = async (): Promise<boolean> => {
+  const now = Date.now();
+  if (authEnabledCache && now - authEnabledCache.fetchedAt < AUTH_ENABLED_TTL_MS) {
+    return authEnabledCache.value;
+  }
+
+  const systemConfig = await prisma.systemConfig.upsert({
+    where: { id: DEFAULT_SYSTEM_CONFIG_ID },
+    update: {},
+    create: {
+      id: DEFAULT_SYSTEM_CONFIG_ID,
+      authEnabled: false,
+      registrationEnabled: false,
+    },
+    select: { authEnabled: true },
+  });
+
+  authEnabledCache = { value: systemConfig.authEnabled, fetchedAt: now };
+  return systemConfig.authEnabled;
+};
+
+const getBootstrapActingUser = async () => {
+  const user = await prisma.user.findUnique({
+    where: { id: BOOTSTRAP_USER_ID },
+    select: {
+      id: true,
+      username: true,
+      email: true,
+      name: true,
+      role: true,
+      mustResetPassword: true,
+      isActive: true,
+    },
+  });
+
+  if (user) return user;
+
+  return prisma.user.create({
+    data: {
+      id: BOOTSTRAP_USER_ID,
+      email: "bootstrap@excalidash.local",
+      username: null,
+      passwordHash: "",
+      name: "Bootstrap Admin",
+      role: "ADMIN",
+      mustResetPassword: true,
+      isActive: false,
+    },
+    select: {
+      id: true,
+      username: true,
+      email: true,
+      name: true,
+      role: true,
+      mustResetPassword: true,
+      isActive: true,
+    },
+  });
+};
 
 // Extend Express Request type to include user
 declare global {
@@ -87,6 +157,30 @@ export const requireAuth = async (
   res: Response,
   next: NextFunction
 ): Promise<void> => {
+  // Single-user mode: authentication disabled -> treat all requests as the bootstrap user.
+  try {
+    const authEnabled = await getAuthEnabled();
+    if (!authEnabled) {
+      const user = await getBootstrapActingUser();
+      req.user = {
+        id: user.id,
+        username: user.username,
+        email: user.email,
+        name: user.name,
+        role: user.role,
+        mustResetPassword: user.mustResetPassword,
+      };
+      return next();
+    }
+  } catch (error) {
+    console.error("Error reading auth mode:", error);
+    res.status(500).json({
+      error: "Internal server error",
+      message: "Failed to read authentication mode",
+    });
+    return;
+  }
+
   const token = extractToken(req);
 
   if (!token) {
@@ -159,6 +253,16 @@ export const optionalAuth = async (
   res: Response,
   next: NextFunction
 ): Promise<void> => {
+  try {
+    const authEnabled = await getAuthEnabled();
+    if (!authEnabled) {
+      return next();
+    }
+  } catch (error) {
+    console.error("Error reading auth mode:", error);
+    return next();
+  }
+
   const token = extractToken(req);
 
   if (!token) {

frontend/src/components/ProtectedRoute.tsx

@@ -7,9 +7,9 @@ interface ProtectedRouteProps {
 }
 
 export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
-  const { isAuthenticated, loading } = useAuth();
+  const { isAuthenticated, loading, authEnabled, bootstrapRequired } = useAuth();
 
-  if (loading) {
+  if (loading || authEnabled === null) {
     return (
       <div className="min-h-screen flex items-center justify-center">
         <div className="text-gray-600 dark:text-gray-400">Loading...</div>
@@ -17,7 +17,16 @@ export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
     );
   }
 
+  // Single-user mode: auth disabled -> allow access.
+  if (!authEnabled) {
+    return <>{children}</>;
+  }
+
   if (!isAuthenticated) {
+    // If auth is enabled but no admin exists yet, force bootstrap registration.
+    if (bootstrapRequired) {
+      return <Navigate to="/register" replace />;
+    }
     return <Navigate to="/login" replace />;
   }
 

frontend/src/components/Sidebar.tsx

@@ -122,7 +122,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
   onDrop
 }) => {
   const navigate = useNavigate();
-  const { logout, user } = useAuth();
+  const { logout, user, authEnabled } = useAuth();
   const [isCreating, setIsCreating] = useState(false);
   const [newCollectionName, setNewCollectionName] = useState('');
   const [editingId, setEditingId] = useState<string | null>(null);
@@ -286,6 +286,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
             <span className="min-w-0 flex-1 text-left">Trash</span>
           </button>
 
+          {authEnabled && (
             <button
               onClick={() => navigate('/profile')}
               className={clsx(
@@ -298,6 +299,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
               <User size={18} />
               <span className="min-w-0 flex-1 text-left">Profile</span>
             </button>
+          )}
 
           <button
             onClick={() => navigate('/settings')}
@@ -313,6 +315,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
           </button>
 
           {/* User info and logout */}
+          {authEnabled && (
             <div className="mt-auto pt-4 border-t-2 border-slate-200 dark:border-neutral-700">
             {user && (
               <div className="px-3 py-2 text-xs text-slate-500 dark:text-neutral-500 mb-2">
@@ -328,6 +331,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
               <span className="min-w-0 flex-1 text-left">Logout</span>
             </button>
             </div>
+          )}
         </div>
       </div>
 
@@ -402,4 +406,3 @@ export const Sidebar: React.FC<SidebarProps> = ({
     </>
   );
 };
-

frontend/src/context/AuthContext.tsx

@@ -17,6 +17,8 @@ interface User {
 interface AuthContextType {
   user: User | null;
   loading: boolean;
+  authEnabled: boolean | null;
+  bootstrapRequired: boolean;
   login: (email: string, password: string) => Promise<void>;
   register: (email: string, password: string, name: string) => Promise<void>;
   logout: () => void;
@@ -32,12 +34,36 @@ const USER_KEY = 'excalidash-user';
 export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
   const [user, setUser] = useState<User | null>(null);
   const [loading, setLoading] = useState(true);
+  const [authEnabled, setAuthEnabled] = useState<boolean | null>(null);
+  const [bootstrapRequired, setBootstrapRequired] = useState(false);
   const navigate = useNavigate();
 
   // Load user from localStorage on mount
   useEffect(() => {
     const loadUser = async () => {
       try {
+        // Determine auth mode first (single-user mode vs multi-user auth).
+        try {
+          const statusResponse = await axios.get(`${API_URL}/auth/status`);
+          const enabled =
+            typeof statusResponse.data?.authEnabled === "boolean"
+              ? statusResponse.data.authEnabled
+              : typeof statusResponse.data?.enabled === "boolean"
+                ? statusResponse.data.enabled
+                : true;
+          setAuthEnabled(enabled);
+          setBootstrapRequired(Boolean(statusResponse.data?.bootstrapRequired));
+
+          // In single-user mode, do not require login.
+          if (!enabled) {
+            setUser(null);
+            return;
+          }
+        } catch {
+          // If status fails, assume auth is enabled (safer default).
+          setAuthEnabled(true);
+        }
+
         const storedUser = localStorage.getItem(USER_KEY);
         const storedToken = localStorage.getItem(TOKEN_KEY);
 
@@ -101,6 +127,9 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
 
   const login = async (email: string, password: string) => {
     try {
+      if (authEnabled === false) {
+        throw new Error("Authentication is disabled");
+      }
       const response = await axios.post(`${API_URL}/auth/login`, {
         email,
         password,
@@ -130,6 +159,9 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
 
   const register = async (email: string, password: string, name: string) => {
     try {
+      if (authEnabled === false) {
+        throw new Error("Authentication is disabled");
+      }
       const response = await axios.post(`${API_URL}/auth/register`, {
         email,
         password,
@@ -174,6 +206,8 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
       value={{
         user,
         loading,
+        authEnabled,
+        bootstrapRequired,
         login,
         register,
         logout,

frontend/src/pages/Login.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 import { Logo } from '../components/Logo';
@@ -8,9 +8,24 @@ export const Login: React.FC = () => {
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
-  const { login } = useAuth();
+  const { login, authEnabled, bootstrapRequired, isAuthenticated, loading: authLoading } = useAuth();
   const navigate = useNavigate();
 
+  useEffect(() => {
+    if (authLoading || authEnabled === null) return;
+    if (!authEnabled) {
+      navigate('/', { replace: true });
+      return;
+    }
+    if (bootstrapRequired) {
+      navigate('/register', { replace: true });
+      return;
+    }
+    if (isAuthenticated) {
+      navigate('/', { replace: true });
+    }
+  }, [authEnabled, authLoading, bootstrapRequired, isAuthenticated, navigate]);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError('');

frontend/src/pages/Profile.tsx

@@ -7,7 +7,7 @@ import type { Collection } from '../types';
 import { User, Lock, Save, X, Shield } from 'lucide-react';
 
 export const Profile: React.FC = () => {
-    const { user: authUser, logout } = useAuth();
+    const { user: authUser, logout, authEnabled } = useAuth();
     const navigate = useNavigate();
     const isAdmin = authUser?.role === 'ADMIN';
     const [collections, setCollections] = useState<Collection[]>([]);
@@ -28,6 +28,10 @@ export const Profile: React.FC = () => {
     const [showPasswordForm, setShowPasswordForm] = useState(false);
 
     useEffect(() => {
+        if (authEnabled === false) {
+            navigate('/settings', { replace: true });
+            return;
+        }
         const fetchData = async () => {
             try {
                 const collectionsData = await api.getCollections();
@@ -50,7 +54,7 @@ export const Profile: React.FC = () => {
             }
         };
         fetchData();
-    }, [authUser, isAdmin]);
+    }, [authEnabled, authUser, isAdmin, navigate]);
 
     const handleToggleRegistration = async () => {
         if (!isAdmin || registrationEnabled === null) return;

frontend/src/pages/Register.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 import { Logo } from '../components/Logo';
@@ -9,9 +9,20 @@ export const Register: React.FC = () => {
   const [name, setName] = useState('');
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
-  const { register } = useAuth();
+  const { register, authEnabled, bootstrapRequired, isAuthenticated, loading: authLoading } = useAuth();
   const navigate = useNavigate();
 
+  useEffect(() => {
+    if (authLoading || authEnabled === null) return;
+    if (!authEnabled) {
+      navigate('/', { replace: true });
+      return;
+    }
+    if (isAuthenticated) {
+      navigate('/', { replace: true });
+    }
+  }, [authEnabled, authLoading, isAuthenticated, navigate]);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError('');
@@ -40,9 +51,13 @@ export const Register: React.FC = () => {
         <div className="text-center">
           <Logo className="mx-auto h-12 w-auto" />
           <h2 className="mt-6 text-3xl font-extrabold text-gray-900 dark:text-white">
-            Create your account
+            {bootstrapRequired ? 'Set up admin account' : 'Create your account'}
           </h2>
           <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+            {bootstrapRequired ? (
+              <span>This will enable multi-user access for this ExcaliDash instance.</span>
+            ) : (
+              <>
                 Or{' '}
                 <Link
                   to="/login"
@@ -50,6 +65,8 @@ export const Register: React.FC = () => {
                 >
                   sign in to your existing account
                 </Link>
+              </>
+            )}
           </p>
         </div>
         <form className="mt-8 space-y-6" onSubmit={handleSubmit}>

frontend/src/pages/Settings.tsx

@@ -7,15 +7,19 @@ import { Database, FileJson, Upload, Moon, Sun, Info, HardDrive } from 'lucide-r
 import { ConfirmModal } from '../components/ConfirmModal';
 import { importDrawings } from '../utils/importUtils';
 import { useTheme } from '../context/ThemeContext';
+import { useAuth } from '../context/AuthContext';
 
 export const Settings: React.FC = () => {
     const [collections, setCollections] = useState<Collection[]>([]);
     const navigate = useNavigate();
     const { theme, toggleTheme } = useTheme();
+    const { authEnabled, user } = useAuth();
 
     const [importConfirmation, setImportConfirmation] = useState<{ isOpen: boolean; file: File | null }>({ isOpen: false, file: null });
     const [importError, setImportError] = useState<{ isOpen: boolean; message: string }>({ isOpen: false, message: '' });
     const [importSuccess, setImportSuccess] = useState(false);
+    const [authToggleLoading, setAuthToggleLoading] = useState(false);
+    const [authToggleError, setAuthToggleError] = useState<string | null>(null);
 
     const appVersion = import.meta.env.VITE_APP_VERSION || 'Unknown version';
     const buildLabel = import.meta.env.VITE_APP_BUILD_LABEL;
@@ -32,6 +36,39 @@ export const Settings: React.FC = () => {
         fetchCollections();
     }, []);
 
+    const toggleAuthEnabled = async () => {
+        if (authEnabled === null) return;
+        setAuthToggleLoading(true);
+        setAuthToggleError(null);
+        try {
+            const next = !authEnabled;
+            const response = await api.api.post<{ authEnabled: boolean; bootstrapRequired?: boolean }>(
+                '/auth/auth-enabled',
+                { enabled: next },
+            );
+
+            if (response.data.authEnabled) {
+                // Auth enabled -> prompt admin bootstrap via register.
+                window.location.href = '/register';
+                return;
+            }
+
+            // Auth disabled -> reload to drop auth gating.
+            window.location.reload();
+        } catch (err: unknown) {
+            let message = 'Failed to update authentication setting';
+            if (api.isAxiosError(err)) {
+                message =
+                    err.response?.data?.message ||
+                    err.response?.data?.error ||
+                    message;
+            }
+            setAuthToggleError(message);
+        } finally {
+            setAuthToggleLoading(false);
+        }
+    };
+
     const handleCreateCollection = async (name: string) => {
         await api.createCollection(name);
         const newCollections = await api.getCollections();
@@ -69,7 +106,37 @@ export const Settings: React.FC = () => {
                 Settings
             </h1>
 
+            {authToggleError && (
+                <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border-2 border-red-200 dark:border-red-800 rounded-xl">
+                    <p className="text-red-800 dark:text-red-200 font-medium">{authToggleError}</p>
+                </div>
+            )}
+
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <button
+                    onClick={toggleAuthEnabled}
+                    disabled={authEnabled === null || authToggleLoading || (authEnabled === true && user?.role !== 'ADMIN')}
+                    className="flex flex-col items-center justify-center gap-4 p-8 bg-white dark:bg-neutral-900 border-2 border-black dark:border-neutral-700 rounded-2xl shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.2)] hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[6px_6px_0px_0px_rgba(255,255,255,0.2)] hover:-translate-y-1 transition-all duration-200 group disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] disabled:hover:translate-y-0"
+                >
+                    <div className="w-16 h-16 bg-slate-50 dark:bg-neutral-800 rounded-2xl flex items-center justify-center border-2 border-slate-200 dark:border-neutral-700 group-hover:border-slate-300 dark:group-hover:border-neutral-600 transition-colors">
+                        <Info size={32} className="text-slate-700 dark:text-neutral-300" />
+                    </div>
+                    <div className="text-center">
+                        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-1">
+                            {authEnabled ? 'Authentication: On' : 'Authentication: Off'}
+                        </h3>
+                        <p className="text-sm text-slate-500 dark:text-neutral-400 font-medium">
+                            {authEnabled
+                                ? user?.role === 'ADMIN'
+                                    ? (authToggleLoading ? 'Disabling…' : 'Disable multi-user login')
+                                    : 'Only admins can disable'
+                                : authToggleLoading
+                                    ? 'Enabling…'
+                                    : 'Enable multi-user login'}
+                        </p>
+                    </div>
+                </button>
+
                 <button
                     onClick={toggleTheme}
                     className="flex flex-col items-center justify-center gap-4 p-8 bg-white dark:bg-neutral-900 border-2 border-black dark:border-neutral-700 rounded-2xl shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.2)] hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[6px_6px_0px_0px_rgba(255,255,255,0.2)] hover:-translate-y-1 transition-all duration-200 group"