Require admin token for private access

apps/backend/src/app.module.ts

@@ -4,6 +4,7 @@ import { RedisModule } from './common/redis/redis.module';
 import { FileModule } from './file/file.module';
 import { FilesystemModule } from './common/filesystem/filesystem.module';
 import { AdminModule } from './admin/admin.module';
+import { AuthController } from './common/auth.controller';
 
 @Module({
   imports: [
@@ -13,7 +14,7 @@ import { AdminModule } from './admin/admin.module';
     FilesystemModule,
     AdminModule,
   ],
-  controllers: [],
+  controllers: [AuthController],
   providers: [],
 })
 export class AppModule {}

apps/backend/src/clipboard/clipboard.gateway.ts

@@ -29,6 +29,7 @@ interface RoomUserCount {
 export class ClipboardGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
   private readonly logger = new Logger(ClipboardGateway.name);
   private roomUserCount: RoomUserCount = {};
+  private readonly expectedToken = process.env.ADMIN_TOKEN || 'admin-token';
 
   @WebSocketServer()
   server: Server;
@@ -40,6 +41,15 @@ export class ClipboardGateway implements OnGatewayInit, OnGatewayConnection, OnG
   }
 
   async handleConnection(client: Socket) {
+    const token = this.getClientToken(client);
+
+    if (token !== this.expectedToken) {
+      this.logger.warn(`Client ${client.id} attempted to connect with invalid token.`);
+      client.emit('error', { message: 'Unauthorized connection.' });
+      client.disconnect();
+      return;
+    }
+
     const { roomCode } = client.handshake.query;
 
     if (!roomCode || typeof roomCode !== 'string') {
@@ -284,4 +294,15 @@ export class ClipboardGateway implements OnGatewayInit, OnGatewayConnection, OnG
 
     this.logger.log(`File ${fileId} deleted from room ${roomCode}`);
   }
+
+  private getClientToken(client: Socket): string | string[] | undefined {
+    const headerToken = client.handshake.headers['x-admin-token'] || client.handshake.headers['authorization'];
+    const queryToken = client.handshake.query['token'];
+
+    if (typeof headerToken === 'string' && headerToken.startsWith('Bearer ')) {
+      return headerToken.slice(7);
+    }
+
+    return headerToken || queryToken;
+  }
 }

apps/backend/src/common/auth.controller.ts

@@ -0,0 +1,9 @@
+import { Controller, Get } from '@nestjs/common';
+
+@Controller('auth')
+export class AuthController {
+  @Get('verify')
+  verify() {
+    return { status: 'ok' };
+  }
+}

apps/backend/src/main.ts

@@ -23,6 +23,11 @@ class CustomIoAdapter extends IoAdapter {
 async function bootstrap() {
   const logger = new Logger('Bootstrap');
   const app = await NestFactory.create(AppModule);
+  const expectedToken = process.env.ADMIN_TOKEN || 'admin-token';
+
+  // Set global prefix for REST API early so middleware matches the full path
+  const apiPrefix = 'api';
+  app.setGlobalPrefix(apiPrefix);
 
   // Enable CORS for HTTP requests
   app.enableCors({
@@ -30,6 +35,20 @@ async function bootstrap() {
     methods: ['GET', 'POST', 'DELETE', 'PUT', 'PATCH', 'OPTIONS'],
     credentials: true,
   });
+  app.use(`/${apiPrefix}`, (req: Request, res, next: NextFunction) => {
+    const headerToken = req.headers['x-admin-token'] || req.headers['authorization'];
+    const queryToken = req.query['token'];
+    const token = typeof headerToken === 'string' && headerToken.startsWith('Bearer ')
+      ? headerToken.slice(7)
+      : headerToken || queryToken;
+
+    if (token === expectedToken) {
+      return next();
+    }
+
+    return res.status(401).json({ message: 'Invalid admin token' });
+  });
+
   app.use("*", (req: Request, _, next: NextFunction) => {
     console.log(req.method, req.baseUrl)
     next()
@@ -38,9 +57,6 @@ async function bootstrap() {
   // Use custom adapter for WebSockets
   app.useWebSocketAdapter(new CustomIoAdapter(app));
 
-  // Set global prefix for REST API
-  app.setGlobalPrefix('api');
-
 
   const port = process.env.PORT || 3001;
   await app.listen(port);

apps/frontend/src/app/[roomCode]/components/FileList.tsx

@@ -5,6 +5,7 @@ import { FileIcon, Image, FileText, Download, Trash2, Eye, AlertCircle } from 'l
 import { apiUrl } from '@/lib/constants';
 import FilePreview from './FilePreview';
 import { isPreviewable, formatFileSize } from '@/lib/utils/fileUtils';
+import { appendTokenToUrl } from '@/lib/adminAuth';
 
 interface FileEntry {
   id: string;
@@ -113,7 +114,7 @@ export default function FileList({ files, onDeleteFile, roomCode }: FileListProp
                 )}
                 <a
                   onClick={(e) => e.stopPropagation()}
-                  href={`${apiUrl}/clipboard/${roomCode}/files/${file.id}?filename=${encodeURIComponent(file.filename)}`}
+                  href={appendTokenToUrl(`${apiUrl}/clipboard/${roomCode}/files/${file.id}?filename=${encodeURIComponent(file.filename)}`)}
                   download={file.filename}
                   className="p-1.5 text-text-secondary hover:text-primary rounded-md hover:bg-primary/10 transition-colors"
                   title="Download"

apps/frontend/src/app/[roomCode]/components/FilePreview.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react';
 import { X } from 'lucide-react';
 import { apiUrl } from '@/lib/constants';
+import { appendTokenToUrl, withAdminTokenHeader } from '@/lib/adminAuth';
 
 interface FilePreviewProps {
   fileId: string;
@@ -14,7 +15,7 @@ interface FilePreviewProps {
 
 export default function FilePreview({ fileId, filename, mimetype, roomCode, onClose }: FilePreviewProps) {
   const [loading, setLoading] = useState(true);
-  const fileUrl = `${apiUrl}/clipboard/${roomCode}/files/${fileId}`;
+  const fileUrl = appendTokenToUrl(`${apiUrl}/clipboard/${roomCode}/files/${fileId}`);
 
   // Handle escape key to close preview
   useEffect(() => {
@@ -88,7 +89,7 @@ export default function FilePreview({ fileId, filename, mimetype, roomCode, onCl
             <p className="text-text-primary text-xl mb-4">Preview not available</p>
             <p className="text-text-secondary mb-6">This file type cannot be previewed.</p>
             <a
-              href={`${apiUrl}/clipboard/${roomCode}/files/${fileId}?filename=${encodeURIComponent(filename)}`}
+              href={appendTokenToUrl(`${apiUrl}/clipboard/${roomCode}/files/${fileId}?filename=${encodeURIComponent(filename)}`)}
               target="_blank"
               rel="noopener noreferrer"
               className="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors"
@@ -132,7 +133,7 @@ export default function FilePreview({ fileId, filename, mimetype, roomCode, onCl
         {/* Footer */}
         <div className="p-4 border-t border-surface-hover flex justify-end">
           <a
-            href={`${apiUrl}/clipboard/${roomCode}/files/${fileId}?filename=${encodeURIComponent(filename)}`}
+            href={appendTokenToUrl(`${apiUrl}/clipboard/${roomCode}/files/${fileId}?filename=${encodeURIComponent(filename)}`)}
             download={filename}
             className="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors"
           >
@@ -152,7 +153,7 @@ function TextFilePreview({ fileUrl, setLoading }: { fileUrl: string; setLoading:
   useEffect(() => {
     async function fetchTextContent() {
       try {
-        const response = await fetch(fileUrl);
+        const response = await fetch(fileUrl, { headers: withAdminTokenHeader() });
         if (!response.ok) {
           throw new Error(`Failed to fetch file: ${response.status}`);
         }

apps/frontend/src/app/[roomCode]/components/FileUploadComponent.tsx

@@ -3,6 +3,7 @@
 import { useState, useRef } from 'react';
 import { Upload, X } from 'lucide-react';
 import { apiUrl } from '@/lib/constants';
+import { appendTokenToUrl, getAdminToken } from '@/lib/adminAuth';
 
 interface FileUploadProps {
   roomCode: string;
@@ -58,6 +59,8 @@ export default function FileUploadComponent({ roomCode, clientId, onFileUploaded
 
     try {
       const xhr = new XMLHttpRequest();
+      const token = getAdminToken();
+      const uploadUrl = appendTokenToUrl(`${apiUrl}/clipboard/${roomCode}/files`);
       
       xhr.upload.onprogress = (event) => {
         if (event.lengthComputable) {
@@ -88,7 +91,10 @@ export default function FileUploadComponent({ roomCode, clientId, onFileUploaded
         setIsUploading(false);
       };
       
-      xhr.open('POST', `${apiUrl}/clipboard/${roomCode}/files`, true);
+      xhr.open('POST', uploadUrl, true);
+      if (token) {
+        xhr.setRequestHeader('x-admin-token', token);
+      }
       xhr.send(formData);
       
     } catch (err: any) {

apps/frontend/src/app/[roomCode]/page.tsx

@@ -19,6 +19,7 @@ import { FileEntryType } from './components/FileEntry';
 import { useSocketManager } from '@/lib/hooks/useSocketManager';
 import { useSavedClipboards } from '@/lib/hooks/useSavedClipboards';
 import { apiUrl } from '@/lib/constants';
+import { appendTokenToUrl, withAdminTokenHeader } from '@/lib/adminAuth';
 
 export default function ClipboardRoom() {
   const params = useParams();
@@ -107,7 +108,12 @@ export default function ClipboardRoom() {
   const checkPasswordProtection = async () => {
     try {
       setIsCheckingPassword(true);
-      const response = await fetch(`${apiUrl}/clipboard/${roomCode}/exists`);
+      const response = await fetch(
+        appendTokenToUrl(`${apiUrl}/clipboard/${roomCode}/exists`),
+        {
+          headers: withAdminTokenHeader(),
+        },
+      );
 
       if (!response.ok) {
         throw new Error('Failed to check clipboard');
@@ -144,9 +150,9 @@ export default function ClipboardRoom() {
     try {
       const response = await fetch(`${apiUrl}/clipboard/${roomCode}/verify`, {
         method: 'POST',
-        headers: {
+        headers: withAdminTokenHeader({
           'Content-Type': 'application/json',
-        },
+        }),
         body: JSON.stringify({ password }),
       });
 

apps/frontend/src/app/admin/[roomCode]/page.tsx

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
 import { useParams, useRouter } from 'next/navigation';
 import { apiUrl } from '@/lib/constants';
+import { appendTokenToUrl } from '@/lib/adminAuth';
 
 interface ClipboardEntry {
   id: string;
@@ -303,7 +304,7 @@ export default function ClipboardAdminDetail() {
                         <p className="text-xs text-text-secondary">Uploaded {new Date(file.createdAt).toLocaleString()}</p>
                       </div>
                       <a
-                        href={`${apiUrl}/files/${file.storageKey}`}
+                        href={appendTokenToUrl(`${apiUrl}/files/${file.storageKey}`)}
                         className="btn btn-ghost btn-sm"
                         target="_blank"
                         rel="noopener noreferrer"

apps/frontend/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import '@/styles/globals.css';
 import type { Metadata } from 'next';
 import { ToastProvider } from '@/components/ui/Toast';
+import AdminAccessGate from '@/components/AdminAccessGate';
 
 export const metadata: Metadata = {
   title: 'Clipboard Online',
@@ -50,17 +51,19 @@ export default function RootLayout({
       </head>
       <body>
         <ToastProvider>
-          <div className="relative">
-            {/* Decorative elements */}
-            <div className="fixed inset-0 z-[-1] overflow-hidden">
-              <div className="absolute -top-[10%] -left-[10%] w-[40%] h-[40%] bg-gradient-radial from-primary/5 to-transparent opacity-30 blur-3xl" />
-              <div className="absolute -bottom-[10%] -right-[10%] w-[40%] h-[40%] bg-gradient-radial from-secondary/5 to-transparent opacity-30 blur-3xl" />
-            </div>
+          <AdminAccessGate>
+            <div className="relative">
+              {/* Decorative elements */}
+              <div className="fixed inset-0 z-[-1] overflow-hidden">
+                <div className="absolute -top-[10%] -left-[10%] w-[40%] h-[40%] bg-gradient-radial from-primary/5 to-transparent opacity-30 blur-3xl" />
+                <div className="absolute -bottom-[10%] -right-[10%] w-[40%] h-[40%] bg-gradient-radial from-secondary/5 to-transparent opacity-30 blur-3xl" />
+              </div>
 
-            <main className="flex flex-col min-h-screen">
-              {children}
-            </main>
-          </div>
+              <main className="flex flex-col min-h-screen">
+                {children}
+              </main>
+            </div>
+          </AdminAccessGate>
         </ToastProvider>
       </body>
     </html>

apps/frontend/src/components/AdminAccessGate.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { apiUrl } from '@/lib/constants';
+import { getAdminToken, setAdminToken } from '@/lib/adminAuth';
+
+interface AdminAccessGateProps {
+  children: React.ReactNode;
+}
+
+export default function AdminAccessGate({ children }: AdminAccessGateProps) {
+  const [tokenInput, setTokenInput] = useState('');
+  const [verified, setVerified] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    const saved = getAdminToken();
+    if (saved) {
+      setTokenInput(saved);
+      verifyToken(saved);
+    }
+  }, []);
+
+  const verifyToken = async (tokenToVerify: string) => {
+    if (!tokenToVerify) {
+      setError('请输入 admin token');
+      return;
+    }
+
+    setLoading(true);
+    setError('');
+
+    try {
+      const response = await fetch(`${apiUrl}/auth/verify?token=${encodeURIComponent(tokenToVerify)}`, {
+        headers: { 'x-admin-token': tokenToVerify },
+      });
+
+      if (!response.ok) {
+        setVerified(false);
+        setError('Token 验证失败，请重试');
+        return;
+      }
+
+      setAdminToken(tokenToVerify);
+      setVerified(true);
+      setError('');
+    } catch (err) {
+      console.error('Error verifying token', err);
+      setError('无法验证 token，请稍后再试');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (verified) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background text-text-primary p-6">
+      <div className="w-full max-w-md bg-surface/80 border border-surface-hover rounded-2xl shadow-2xl p-6 space-y-5">
+        <div>
+          <p className="text-sm uppercase tracking-wide text-text-secondary">Private Space Access</p>
+          <h1 className="text-2xl font-bold mt-1">Enter Admin Token</h1>
+          <p className="text-sm text-text-secondary mt-2">
+            这个站点是私有的，访问前需要输入管理员 token。
+          </p>
+        </div>
+
+        <div className="space-y-3">
+          <label className="block text-sm text-text-secondary">Admin token</label>
+          <input
+            type="password"
+            className="input w-full"
+            placeholder="例如：my-secret-token"
+            value={tokenInput}
+            onChange={(e) => setTokenInput(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                verifyToken(tokenInput);
+              }
+            }}
+            disabled={loading}
+          />
+          {error && <p className="text-red-400 text-sm">{error}</p>}
+        </div>
+
+        <button
+          className="btn btn-primary w-full"
+          onClick={() => verifyToken(tokenInput)}
+          disabled={loading}
+        >
+          {loading ? '验证中...' : '进入我的空间'}
+        </button>
+
+        <p className="text-xs text-text-secondary text-center">
+          如需重置或更换 token，请刷新页面重新输入。
+        </p>
+      </div>
+    </div>
+  );
+}

apps/frontend/src/components/CreateClipboardCard.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
 import PasswordModal from './PasswordModal';
 import { useToast } from './ui/Toast';
 import { apiUrl } from '@/lib/constants';
+import { withAdminTokenHeader } from '@/lib/adminAuth';
 
 export default function CreateClipboardCard() {
   const [isLoading, setIsLoading] = useState(false);
@@ -51,9 +52,9 @@ export default function CreateClipboardCard() {
 
       const response = await fetch(`${apiUrl}/clipboard/create`, {
         method: 'POST',
-        headers: {
+        headers: withAdminTokenHeader({
           'Content-Type': 'application/json',
-        },
+        }),
         body: Object.keys(payload).length ? JSON.stringify(payload) : undefined,
       });
 

apps/frontend/src/components/JoinClipboardCard.tsx

@@ -8,6 +8,7 @@ import { useSavedClipboards } from '../lib/hooks/useSavedClipboards';
 import SavedClipboardsButton from './SavedClipboardsButton';
 import { LogIn, AlertCircle, Loader } from 'lucide-react';
 import { apiUrl } from '@/lib/constants';
+import { getAdminToken } from '@/lib/adminAuth';
 
 export default function JoinClipboardCard() {
   const [roomCode, setRoomCode] = useState('');
@@ -65,7 +66,11 @@ export default function JoinClipboardCard() {
 
     try {
       // Check if clipboard exists
-      const response = await axios.get(`${apiUrl}/clipboard/${roomCode}/exists`);
+      const token = getAdminToken();
+      const response = await axios.get(`${apiUrl}/clipboard/${roomCode}/exists`, {
+        headers: token ? { 'x-admin-token': token } : undefined,
+        params: token ? { token } : undefined,
+      });
 
       if (response.data.exists) {
         // Save to recently visited clipboards

apps/frontend/src/components/PasswordModal.tsx

@@ -18,6 +18,7 @@ export default function PasswordModal({
 }: PasswordModalProps) {
   const [password, setPassword] = useState('');
   const [passwordError, setPasswordError] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
 
   const handleSubmit = () => {
     setPasswordError('');
@@ -38,6 +39,7 @@ export default function PasswordModal({
   const handleClose = () => {
     setPassword('');
     setPasswordError('');
+    setShowPassword(false);
     onClose();
   };
 
@@ -54,33 +56,70 @@ export default function PasswordModal({
       title="Set Password"
       icon={passwordIcon}
     >
-      <p className="text-text-secondary mb-4 text-center">
-        Create a password-protected clipboard.
-      </p>
+      <div className="space-y-5">
+        <div className="rounded-lg border border-primary/15 bg-primary/5 px-4 py-3 flex items-start gap-3">
+          <div className="p-2 rounded-full bg-primary/10 text-primary">
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M12 20a8 8 0 100-16 8 8 0 000 16z" />
+            </svg>
+          </div>
+          <div>
+            <p className="text-text-primary font-medium">Add a passcode for extra privacy</p>
+            <p className="text-text-secondary text-sm">Anyone accessing this clipboard will need the code you choose.</p>
+          </div>
+        </div>
 
-      <div className="space-y-4">
-        <div>
+        <div className="space-y-3">
           <div className="relative">
             <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-text-secondary/50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-text-secondary/60" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
               </svg>
             </div>
             <input
-              type="text"
+              type={showPassword ? 'text' : 'password'}
               value={password}
               onChange={(e) => {
                 setPassword(e.target.value);
                 if (passwordError) setPasswordError('');
               }}
-              placeholder="Enter password"
-              className="w-full pl-10 pr-4 py-3 rounded-lg bg-surface/80 border-2 border-surface-hover focus:border-primary focus:outline-none focus:ring-0 transition-colors duration-300 ease-in-out text-text-primary placeholder-text-secondary/50 font-mono"
+              placeholder="Create a passcode"
+              className="w-full pl-10 pr-12 py-3 rounded-lg bg-surface/80 border border-surface-hover focus:border-primary focus:ring-4 focus:ring-primary/20 focus:outline-none transition-colors duration-300 ease-in-out text-text-primary placeholder-text-secondary/50 font-mono shadow-inner"
               autoFocus
               autoComplete="off"
             />
+            <button
+              type="button"
+              onClick={() => setShowPassword((prev) => !prev)}
+              className="absolute inset-y-0 right-0 px-3 flex items-center text-text-secondary/70 hover:text-text-primary transition-colors"
+              aria-label={showPassword ? 'Hide password' : 'Show password'}
+            >
+              {showPassword ? (
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-5 0-9.27-3.11-11-7 1.05-2.38 2.9-4.36 5.1-5.66m4.02-1.09A9.98 9.98 0 0112 5c5 0 9.27 3.11 11 7a11.72 11.72 0 01-1.67 2.63M15 12a3 3 0 00-3-3m0 0a3 3 0 013 3m-3-3c-.64 0-1.26.19-1.77.52m0 0L3 21m7.23-8.48a3 3 0 104.24 4.24" />
+                </svg>
+              ) : (
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                </svg>
+              )}
+            </button>
+          </div>
+
+          <div className="grid grid-cols-2 gap-3 text-xs text-text-secondary">
+            <div className="flex items-center gap-2 rounded-md bg-surface/60 border border-surface-hover px-3 py-2">
+              <span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">4+</span>
+              <span>At least 4 characters</span>
+            </div>
+            <div className="flex items-center gap-2 rounded-md bg-surface/60 border border-surface-hover px-3 py-2">
+              <span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">✦</span>
+              <span>Mix letters & numbers</span>
+            </div>
           </div>
+
           {passwordError && (
-            <div className="mt-2 text-error text-sm flex items-center">
+            <div className="mt-1 text-error text-sm flex items-center">
               <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
               </svg>
@@ -93,7 +132,7 @@ export default function PasswordModal({
           <button
             type="button"
             onClick={handleClose}
-            className="flex-1 py-2 px-4 border border-surface-hover bg-surface hover:bg-surface-hover text-text-primary font-medium rounded-lg transition-colors duration-200"
+            className="flex-1 py-2.5 px-4 border border-surface-hover bg-surface/70 hover:bg-surface-hover text-text-primary font-medium rounded-lg transition-all duration-200 hover:-translate-y-0.5"
           >
             Cancel
           </button>
@@ -101,7 +140,7 @@ export default function PasswordModal({
             type="button"
             onClick={handleSubmit}
             disabled={isLoading}
-            className="flex-1 py-2 px-4 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg flex items-center justify-center transition-all duration-200 shadow-md hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
+            className="flex-1 py-2.5 px-4 bg-gradient-to-r from-primary to-primary-dark hover:brightness-110 text-white font-medium rounded-lg flex items-center justify-center transition-all duration-200 shadow-lg shadow-primary/20 disabled:opacity-50 disabled:cursor-not-allowed"
           >
             {isLoading ? (
               <span className="flex items-center justify-center">
@@ -111,7 +150,14 @@ export default function PasswordModal({
                 </svg>
                 Creating...
               </span>
-            ) : 'Create'}
+            ) : (
+              <span className="flex items-center gap-2">
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                </svg>
+                Create & Lock
+              </span>
+            )}
           </button>
         </div>
       </div>

apps/frontend/src/lib/adminAuth.ts

@@ -0,0 +1,36 @@
+export const ADMIN_TOKEN_STORAGE_KEY = 'adminToken';
+
+export const getAdminToken = (): string | null => {
+  if (typeof window === 'undefined') return null;
+  return localStorage.getItem(ADMIN_TOKEN_STORAGE_KEY);
+};
+
+export const setAdminToken = (token: string) => {
+  if (typeof window === 'undefined') return;
+  localStorage.setItem(ADMIN_TOKEN_STORAGE_KEY, token);
+};
+
+export const clearAdminToken = () => {
+  if (typeof window === 'undefined') return;
+  localStorage.removeItem(ADMIN_TOKEN_STORAGE_KEY);
+};
+
+export const withAdminTokenHeader = (headers: HeadersInit = {}): HeadersInit => {
+  const token = getAdminToken();
+  if (!token) return headers;
+
+  return {
+    ...headers,
+    'x-admin-token': token,
+  };
+};
+
+export const appendTokenToUrl = (url: string): string => {
+  const token = getAdminToken();
+  if (!token) return url;
+
+  const [base, search] = url.split('?');
+  const params = new URLSearchParams(search || '');
+  params.set('token', token);
+  return `${base}?${params.toString()}`;
+};

apps/frontend/src/lib/hooks/useSavedClipboards.ts

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { apiUrl } from '../constants';
+import { appendTokenToUrl, withAdminTokenHeader } from '../adminAuth';
 
 interface SavedClipboard {
   roomCode: string;
@@ -66,9 +67,14 @@ export function useSavedClipboards() {
         if (lastChecked && (now.getTime() - lastChecked.getTime() < ONE_HOUR)) {
           continue;
         }
-        
+
         try {
-          const response = await fetch(`${apiUrl}/clipboard/${clipboard.roomCode}/exists`);
+          const response = await fetch(
+            appendTokenToUrl(`${apiUrl}/clipboard/${clipboard.roomCode}/exists`),
+            {
+              headers: withAdminTokenHeader(),
+            },
+          );
           
           if (response.ok) {
             const data = await response.json();

apps/frontend/src/lib/hooks/useSocketManager.ts

@@ -3,6 +3,7 @@ import io, { Socket } from 'socket.io-client';
 import { ClipboardEntryType } from '@/app/[roomCode]/components/ClipboardEntry';
 import { FileEntryType } from '@/app/[roomCode]/components/FileEntry';
 import { apiUrl, socketUrl } from '../constants';
+import { appendTokenToUrl, getAdminToken, withAdminTokenHeader } from '../adminAuth';
 
 interface UseSocketManagerOptions {
   roomCode: string;
@@ -71,8 +72,9 @@ export function useSocketManager({ roomCode, clientId }: UseSocketManagerOptions
         clientId,
       });
 
-      fetch(`${apiUrl}/clipboard/${roomCode}/files/${fileId}`, {
+      fetch(appendTokenToUrl(`${apiUrl}/clipboard/${roomCode}/files/${fileId}`), {
         method: 'DELETE',
+        headers: withAdminTokenHeader(),
       }).catch(err => {
         console.error('Error deleting file:', err);
       });
@@ -93,9 +95,18 @@ export function useSocketManager({ roomCode, clientId }: UseSocketManagerOptions
       return;
     }
 
+    const adminToken = getAdminToken();
+
+    if (!adminToken) {
+      setError('Admin token missing. Please refresh and enter your token.');
+      setIsLoading(false);
+      return;
+    }
+
     // Connect directly to the Socket.IO server using our dedicated WebSocket port
     socketRef.current = io(socketUrl, {
-      query: { roomCode },
+      query: { roomCode, token: adminToken },
+      extraHeaders: { 'x-admin-token': adminToken },
       transports: ['websocket', 'polling'],
       reconnectionAttempts: 5,
       reconnectionDelay: 1000,