[V0_FILE]typescriptreact:file="components/notification-popup.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import { X } from "lucide-react" import { cn } from "@/lib/utils" interface NotificationProps { id: string message: string type: "new" | "close" | "refresh" | "error" duration?: number onClose: (id: string) => void } const NotificationPopup: React.FC = ({ id, message, type, duration = 3000, onClose }) => { const [progress, setProgress] = React.useState(100) const timerRef = React.useRef(null) const progressIntervalRef = React.useRef(null) const startTimer = React.useCallback(() => { timerRef.current = setTimeout(() => { onClose(id) }, duration) progressIntervalRef.current = setInterval(() => { setProgress((prev) => { const newProgress = prev - (100 / duration) * 100 // Decrease by 100ms worth of progress return newProgress > 0 ? newProgress : 0 }) }, 100) // Update progress every 100ms }, [duration, id, onClose]) const resetTimer = React.useCallback(() => { if (timerRef.current) clearTimeout(timerRef.current) if (progressIntervalRef.current) clearInterval(progressIntervalRef.current) setProgress(100) startTimer() }, [startTimer]) React.useEffect(() => { startTimer() return () => { if (timerRef.current) clearTimeout(timerRef.current) if (progressIntervalRef.current) clearInterval(progressIntervalRef.current) } }, [startTimer]) const bgColorClass = React.useMemo(() => { switch (type) { case "new": return "bg-green-500" case "close": return "bg-red-500" case "refresh": return "bg-blue-500" case "error": return "bg-orange-500" default: return "bg-gray-800" } }, [type]) const badgeColorClass = React.useMemo(() => { switch (type) { case "new": return "bg-green-600" case "close": return "bg-red-600" case "refresh": return "bg-blue-600" case "error": return "bg-orange-600" default: return "bg-gray-700" } }, [type]) return (

{ if (timerRef.current) clearTimeout(timerRef.current) if (progressIntervalRef.current) clearInterval(progressIntervalRef.current) }} onMouseLeave={resetTimer} >

{type.toUpperCase()} {message}

) } export default NotificationPopup [V0_FILE]typescriptreact:file="hooks/use-notifications.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useState, useCallback, useMemo } from "react" import { v4 as uuidv4 } from "uuid" import NotificationPopup from "@/components/notification-popup" interface Notification { id: string message: string type: "new" | "close" | "refresh" | "error" duration?: number } interface NotificationContextType { showNotification: (message: string, type: "new" | "close" | "refresh" | "error", duration?: number) => void } const NotificationContext = createContext(undefined) export const NotificationProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { const [notifications, setNotifications] = useState([]) const showNotification = useCallback( (message: string, type: "new" | "close" | "refresh" | "error", duration?: number) => { setNotifications((prevNotifications) => { // Clear existing notifications of the same type to prevent stacking const filteredNotifications = prevNotifications.filter((notif) => notif.type !== type) const newNotification: Notification = { id: uuidv4(), message, type, duration, } return [...filteredNotifications, newNotification] }) }, [], ) const handleCloseNotification = useCallback((id: string) => { setNotifications((prevNotifications) => prevNotifications.filter((notif) => notif.id !== id)) }, []) const contextValue = useMemo(() => ({ showNotification }), [showNotification]) return ( {children}

{notifications.map((notif) => ( ))}

) } export const useNotifications = () => { const context = useContext(NotificationContext) if (context === undefined) { throw new Error("useNotifications must be used within a NotificationProvider") } return context } [V0_FILE]typescriptreact:file="utils/cookie-utils.ts" isEdit="true" isMerged="true" export const cookieUtils = { set: (name: string, value: string, days = 7) => { try { const expires = new Date() expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000) // Encode the value to handle special characters const encodedValue = encodeURIComponent(value) document.cookie = `${name}=${encodedValue};expires=${expires.toUTCString()};path=/;SameSite=Strict` } catch (error) { console.error(`Error setting cookie ${name}:`, error) } }, get: (name: string): string | null => { try { const nameEQ = name + "=" const ca = document.cookie.split(";") for (let i = 0; i < ca.length; i++) { let c = ca[i] while (c.charAt(0) === " ") c = c.substring(1, c.length) if (c.indexOf(nameEQ) === 0) { // Decode the value to handle special characters const encodedValue = c.substring(nameEQ.length, c.length) return decodeURIComponent(encodedValue) } } return null } catch (error) { console.error(`Error getting cookie ${name}:`, error) return null } }, delete: (name: string) => { try { document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;` } catch (error) { console.error(`Error deleting cookie ${name}:`, error) } }, exists: (name: string): boolean => { return cookieUtils.get(name) !== null }, // Helper function to safely parse JSON from cookies getJSON: (name: string, defaultValue: any = null): any => { try { const value = cookieUtils.get(name) if (!value) return defaultValue return JSON.parse(value) } catch (error) { console.error(`Error parsing JSON from cookie ${name}:`, error) return defaultValue } }, // Helper function to safely set JSON to cookies setJSON: (name: string, value: any, days = 7) => { try { const jsonString = JSON.stringify(value) cookieUtils.set(name, jsonString, days) } catch (error) { console.error(`Error setting JSON cookie ${name}:`, error) } }, } [V0_FILE]typescriptreact:file="components/two-factor-modal.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Alert, AlertDescription } from "@/components/ui/alert" import { Shield } from "lucide-react" import { useAuth } from "@/hooks/use-auth" export default function TwoFactorModal() { const [passkey, setPasskey] = useState("") const [error, setError] = useState("") const [isLoading, setIsLoading] = useState(false) const { verify2FA } = useAuth() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setError("") setIsLoading(true) try { const success = await verify2FA(passkey) if (!success) { setError("Invalid passkey. Please try again.") } } catch (err) { setError("Verification failed. Please try again.") } finally { setIsLoading(false) } } return ( ) } [V0_FILE]typescriptreact:file="components/ui/skeleton.tsx" isEdit="true" isMerged="true" import type React from "react" import { cn } from "@/lib/utils" function Skeleton({ className, ...props }: React.HTMLAttributes) { return

} export { Skeleton } [V0_FILE]typescriptreact:file="components/dashboard.tsx" isEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { LogOut, Shield, Clock, NotebookTabsIcon as Tabs } from "lucide-react" import { useAuth } from "@/hooks/use-auth" import { useEffect, useState, useCallback } from "react" import { cookieUtils } from "@/utils/cookie-utils" import { Skeleton } from "@/components/ui/skeleton" export default function Dashboard() { const { user, logout, sessionInfo } = useAuth() const [displayedTabIds, setDisplayedTabIds] = useState<{ displayId: string; uniqueId: string; isCurrent: boolean }[]>( [], ) const [totalActiveTabs, setTotalActiveTabs] = useState(0) const [isLoadingTabs, setIsLoadingTabs] = useState(true) const updateTabs = useCallback(() => { setIsLoadingTabs(true) const activeTabs = cookieUtils.getJSON("activeTabs", []) as string[] const tabTimestamps = cookieUtils.getJSON("tabTimestamps", {}) as Record const currentTabUniqueId = sessionStorage.getItem("tabId") // Create an array of objects with unique ID and timestamp const tabsWithTimestamps = activeTabs .map((id) => ({ uniqueId: id, timestamp: tabTimestamps[id] || 0, // Use 0 if timestamp is missing (shouldn't happen with cleanup) })) .filter((tab) => tab.timestamp > 0) // Filter out any entries without a valid timestamp // Sort by timestamp (oldest to newest) tabsWithTimestamps.sort((a, b) => a.timestamp - b.timestamp) // Prepare for display, assigning sequential IDs and marking current tab const newDisplayedTabs = tabsWithTimestamps.slice(0, 2).map((tab, index) => ({ displayId: `id_${index + 1}`, uniqueId: tab.uniqueId, isCurrent: tab.uniqueId === currentTabUniqueId, })) setDisplayedTabIds(newDisplayedTabs) setTotalActiveTabs(activeTabs.length) // Total count remains accurate setIsLoadingTabs(false) }, []) useEffect(() => { updateTabs() const channel = new BroadcastChannel("auth-channel") channel.onmessage = (event) => { setTimeout(updateTabs, 100) // Small delay for cookie sync } const interval = setInterval(updateTabs, 5000) // Periodic update return () => { channel.close() clearInterval(interval) } }, [updateTabs]) return (

Dashboard

Authenticated

Authentication Status Your current session information

Username: {user?.username}

2FA Verified: {sessionInfo?.twoFactorVerified ? "Yes" : "No"}

Session Management Cross-tab session synchronization

Session ID: {sessionInfo?.sessionId?.slice(0, 8)}...

Expires: {sessionInfo?.expiresAt ? new Date(sessionInfo.expiresAt).toLocaleTimeString() : "N/A"}

Active Tabs List of currently active browser tabs {isLoadingTabs ? (

) : ( <>

Total Active Tabs: {totalActiveTabs}

Tab IDs:

{tab.displayId} {tab.isCurrent && "(This Tab)"}
No active tabs found.
{"...and "} {totalActiveTabs - 2} {" more"}

)}

Welcome to Your Dashboard You have successfully logged in and completed two-factor authentication.

This dashboard demonstrates cross-tab session management. Try opening this app in multiple tabs to see how login and 2FA states are synchronized across all tabs. The session will persist for 2 hours or until you close all browser tabs.

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from 'next/font/google' import "./globals.css" import { AuthProvider } from "@/hooks/use-auth" // We'll create this next const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Auction App", description: "Real-time auction application with 2FA and admin monitoring", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescript:file="lib/pusher.ts" isEdit="true" isMerged="true" import PusherServer from 'pusher'; import PusherClient from 'pusher-js'; export const pusherServer = new PusherServer({ appId: process.env.PUSHER_APP_ID!, key: process.env.NEXT_PUBLIC_PUSHER_KEY!, secret: process.env.PUSHER_SECRET!, cluster: process.env.NEXT_PUBLIC_PUSHER_CLUSTER!, useTLS: true, }); export const pusherClient = new PusherClient( process.env.NEXT_PUBLIC_PUSHER_KEY!, { cluster: process.env.NEXT_PUBLIC_PUSHER_CLUSTER!, authEndpoint: '/api/pusher/auth', auth: { headers: { 'Content-Type': 'application/json', }, }, } ); [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useRouter } from "next/navigation" import { useAuth } from "@/hooks/use-auth" import { useEffect } from "react" import { Skeleton } from "@/components/ui/skeleton" // Assuming Skeleton is available export default function HomePage() { const { isAuthenticated, needs2FA } = useAuth() const router = useRouter() useEffect(() => { if (isAuthenticated) { if (needs2FA) { router.replace('/2fa') } else { router.replace('/dashboard') } } else { router.replace('/login') } }, [isAuthenticated, needs2FA, router]) // Show a loading skeleton while authentication status is being determined return (

) } [V0_FILE]typescriptreact:file="app/login/page.tsx" isMerged="true" import LoginForm from "@/components/login-form" export default function LoginPage() { return } [V0_FILE]typescriptreact:file="app/2fa/page.tsx" isMerged="true" import TwoFactorModal from "@/components/two-factor-modal" export default function TwoFactorPage() { return } [V0_FILE]typescriptreact:file="app/auction-floor/page.tsx" isMerged="true" "use client" import { useEffect, useState, useRef, FormEvent } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { ScrollArea } from "@/components/ui/scroll-area" import { useAuth } from "@/hooks/use-auth" import { pusherClient } from "@/lib/pusher" import { addAuctionActivity } from "@/lib/local-storage-data" import { LogOut, MessageSquare, Users } from 'lucide-react' import { useRouter } from "next/navigation" import { Badge } from "@/components/ui/badge" interface Message { id: string userId: string username: string message: string timestamp: string } interface Member { id: string info: { username: string role: string } } export default function AuctionFloor() { const { user, logout, isAuthenticated, needs2FA } = useAuth() const router = useRouter() const [messages, setMessages] = useState([]) const [newMessage, setNewMessage] = useState("") const [onlineMembers, setOnlineMembers] = useState([]) const chatEndRef = useRef(null) const channelRef = useRef(null) const joinTimeRef = useRef(null); useEffect(() => { if (!isAuthenticated || needs2FA) { if (!isAuthenticated) { router.replace('/login'); } else if (needs2FA) { router.replace('/2fa'); } return; } if (!user) return; // Record join time joinTimeRef.current = Date.now(); addAuctionActivity(user.id, 'join_auction_floor'); const channel = pusherClient.subscribe('presence-auction-floor'); channelRef.current = channel; channel.bind('pusher:subscription_succeeded', (members: any) => { const initialMembers: Member[] = []; members.each((member: any) => { initialMembers.push(member); }); setOnlineMembers(initialMembers); }); channel.bind('pusher:member_added', (member: Member) => { setOnlineMembers((prev) => [...prev, member]); }); channel.bind('pusher:member_removed', (member: Member) => { setOnlineMembers((prev) => prev.filter((m) => m.id !== member.id)); }); channel.bind('chat-message', (data: Message) => { setMessages((prev) => [...prev, data]); }); // Cleanup on unmount return () => { if (channelRef.current) { pusherClient.unsubscribe('presence-auction-floor'); channelRef.current = null; } // Record leave time and duration if (user && joinTimeRef.current) { const durationMs = Date.now() - joinTimeRef.current; addAuctionActivity(user.id, 'leave_auction_floor', undefined, durationMs); } }; }, [user, isAuthenticated, needs2FA, router]); useEffect(() => { chatEndRef.current?.scrollIntoView({ behavior: "smooth" }); }, [messages]); const handleSendMessage = async (e: FormEvent) => { e.preventDefault(); if (!newMessage.trim() || !user) return; const messageData = { id: Date.now().toString(), // Simple ID for local display userId: user.id, username: user.username, message: newMessage.trim(), timestamp: new Date().toISOString(), }; try { await fetch('/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(messageData), }); addAuctionActivity(user.id, 'message', newMessage.trim()); setNewMessage(""); } catch (error) { console.error("Failed to send message:", error); // Optionally show an error notification } }; if (!isAuthenticated || needs2FA) { return null; // Or a loading spinner while redirecting } return (

Auction Floor

Live Chat

{user?.role === 'admin' && ( )}

Group Chat All logged-in users can communicate here.

{messages.map((msg) => (

{msg.userId === user?.id ? "You" : msg.username}

{msg.message}

{new Date(msg.timestamp).toLocaleTimeString()}

))}

Online Users {onlineMembers.length} online

{member.info.username} {member.id === user?.id && "(You)"} {member.info.role === 'admin' && Admin}

); } [V0_FILE]typescript:file="app/api/chat/route.ts" isMerged="true" import { pusherServer } from '@/lib/pusher'; import { getUserId, isAuthenticated } from '@/lib/auth'; import { addAuctionActivity } from '@/lib/local-storage-data'; // Import local storage utility export async function POST(request: Request) { const sessionAuthenticated = await isAuthenticated(); const userId = await getUserId(); if (!sessionAuthenticated || !userId) { return new Response('Unauthorized', { status: 401 }); } const { message, username } = await request.json(); if (!message || !username) { return new Response('Missing message or username', { status: 400 }); } const messageData = { id: Date.now().toString(), // Simple ID userId: userId, username: username, message: message, timestamp: new Date().toISOString(), }; try { await pusherServer.trigger('presence-auction-floor', 'chat-message', messageData); addAuctionActivity(userId, 'message', message); // Log message activity return new Response('Message sent', { status: 200 }); } catch (error) { console.error('Pusher error:', error); return new Response('Failed to send message', { status: 500 }); } } [V0_FILE]typescript:file="app/api/auth/login/route.ts" isMerged="true" import { NextResponse } from 'next/server'; import { validateUserCredentialsServer, createSessionCookie } from '@/actions/auth'; import { addAuctionActivity } from '@/lib/local-storage-data'; export async function POST(request: Request) { const { username, password } = await request.json(); const user = await validateUserCredentialsServer(username, password); if (!user) { return NextResponse.json({ success: false, message: 'Invalid credentials' }, { status: 401 }); } await createSessionCookie(user.id); addAuctionActivity(user.id, 'login'); return NextResponse.json({ success: true, user: { id: user.id, username: user.username, role: user.role } }); } [V0_FILE]typescript:file="app/api/auth/logout/route.ts" isMerged="true" import { NextResponse } from 'next/server'; import { deleteSessionCookie } from '@/actions/auth'; import { addAuctionActivity } from '@/lib/local-storage-data'; import { getSessionPayload } from '@/actions/auth'; // To get user ID for activity log export async function POST() { const session = await getSessionPayload(); if (session && session.userId) { addAuctionActivity(session.userId as string, 'logout'); } await deleteSessionCookie(); return NextResponse.json({ success: true }); } [V0_FILE]typescriptreact:file="hooks/use-auth.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { createContext, useContext, useEffect, useState, type ReactNode, useCallback } from "react" import { useRouter } from "next/navigation" import { getTwoFactorMetadata, addAuctionActivity, setCurrentSession, getCurrentSession, clearCurrentSession, getUserByUsername, // Still used for client-side dummy user data } from "@/lib/local-storage-data" interface User { id: string username: string role: string } interface SessionInfo { userId: string expiresAt: string // ISO string } interface AuthContextType { user: User | null isAuthenticated: boolean needs2FA: boolean sessionInfo: SessionInfo | null login: (username: string, password: string) => Promise verify2FA: (passkey: string) => Promise logout: () => void } const AuthContext = createContext(undefined) const TWO_FA_VALIDITY_MS = 72 * 60 * 60 * 1000 // 72 hours for 2FA validity export function AuthProvider({ children }: { children: ReactNode }) { const [user, setUser] = useState(null) const [isAuthenticated, setIsAuthenticated] = useState(false) const [needs2FA, setNeeds2FA] = useState(false) const [sessionInfo, setSessionInfo] = useState(null) const router = useRouter() // Function to check 2FA status from local storage (client-side) const checkLocalTwoFactorStatus = useCallback((userId: string) => { const metadata = getTwoFactorMetadata(userId) if (!metadata) { return true // Needs 2FA if no metadata } const expiresAt = new Date(metadata.expiresAt) return new Date() > expiresAt // Needs 2FA if expired }, []) const logout = useCallback(async () => { try { await fetch('/api/auth/logout', { method: 'POST', }); } catch (error) { console.error("Logout API call failed:", error); } finally { clearCurrentSession(); // Clear local storage session data setUser(null); setIsAuthenticated(false); setNeeds2FA(false); setSessionInfo(null); router.push('/login'); } }, [router]); // Initialize auth state from local storage and verify session with server useEffect(() => { const initializeAuth = async () => { const localSession = getCurrentSession(); // Get session info from local storage if (localSession && localSession.userId) { // Verify if the server still considers the session valid (by trying to fetch user info or a protected route) // For this dummy setup, we'll assume if localSession exists, it's valid until logout. // In a real app, you'd hit an /api/auth/status endpoint here. const currentUser = getUserByUsername(localSession.username); // Get full user object from dummy data if (currentUser) { setUser(currentUser); setIsAuthenticated(true); setSessionInfo(localSession); const twoFaRequired = checkLocalTwoFactorStatus(currentUser.id); setNeeds2FA(twoFaRequired); // Redirect based on authentication state if (!twoFaRequired && window.location.pathname === '/2fa') { router.replace('/dashboard'); } else if (twoFaRequired && window.location.pathname !== '/2fa' && window.location.pathname !== '/login') { router.replace('/2fa'); } else if (!twoFaRequired && window.location.pathname === '/login') { router.replace('/dashboard'); } } else { // User not found in dummy data, clear session logout(); } } else { // No valid session, ensure we are on login page if (window.location.pathname !== '/login') { router.replace('/login'); } logout(); // Clear any stale session data } }; initializeAuth(); }, [router, checkLocalTwoFactorStatus, logout]); const login = async (username: string, password: string): Promise => { try { const response = await fetch('/api/auth/login', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ username, password }), }); const data = await response.json(); if (response.ok && data.success) { const userFound = getUserByUsername(username); // Get full user object from dummy data if (!userFound) { console.error("User not found in local dummy data after successful login API call."); return false; } // Store minimal session info in local storage for client-side access const newSessionInfo: SessionInfo = { userId: userFound.id, expiresAt: new Date(Date.now() + TWO_FA_VALIDITY_MS).toISOString(), // Dummy expiration for local session }; setCurrentSession({ ...newSessionInfo, username: userFound.username, role: userFound.role }); setUser(userFound); setIsAuthenticated(true); const twoFaRequired = checkLocalTwoFactorStatus(userFound.id); setNeeds2FA(twoFaRequired); if (twoFaRequired) { router.push('/2fa'); } else { router.push('/dashboard'); } return true; } else { console.error("Login failed:", data.message); return false; } } catch (error) { console.error("Login API call failed:", error); return false; } }; const verify2FA = async (passkey: string): Promise => { if (!user) return false; try { const response = await fetch('/api/auth/2fa', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ passkey }), }); const data = await response.json(); if (response.ok && data.success) { // Update 2FA metadata in local storage via server action setNeeds2FA(false); router.push('/dashboard'); return true; } else { console.error("2FA verification failed:", data.message); return false; } } catch (error) { console.error("2FA API call failed:", error); return false; } }; return ( {children} ); } export function useAuth() { const context = useContext(AuthContext); if (context === undefined) { throw new Error("useAuth must be used within an AuthProvider"); } return context; } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { LogOut, Shield, Clock, MessageSquare, Users } from 'lucide-react' import { useAuth } from "@/hooks/use-auth" import { useRouter } from "next/navigation" import { useEffect, useState } from "react" import { getAuctionActivity, getUserByUsername, getTwoFactorMetadata } from "@/lib/local-storage-data" export default function Dashboard() { const { user, logout, isAuthenticated, needs2FA } = useAuth() const router = useRouter() const [lastLoginTime, setLastLoginTime] = useState(null); const [twoFaVerifiedTime, setTwoFaVerifiedTime] = useState(null); useEffect(() => { if (!isAuthenticated || needs2FA) { // This should ideally be handled by middleware or initial page redirect, // but as a fallback for client-side routing. if (!isAuthenticated) { router.replace('/login'); } else if (needs2FA) { router.replace('/2fa'); } } // Fetch activity logs to get login and 2FA times const activity = getAuctionActivity(); const userLogin = activity.find((a: any) => a.user_id === user?.id && a.event_type === 'login'); const user2FaVerified = activity.find((a: any) => a.user_id === user?.id && a.event_type === '2fa_verified'); if (userLogin) { setLastLoginTime(new Date(userLogin.timestamp).toLocaleTimeString()); } if (user2FaVerified) { setTwoFaVerifiedTime(new Date(user2FaVerified.timestamp).toLocaleTimeString()); } }, [isAuthenticated, needs2FA, router, user]); if (!isAuthenticated || needs2FA) { return null; // Or a loading spinner while redirecting } return (

Dashboard

Authenticated

{user?.role === 'admin' && ( )}

Authentication Status Your current session information

Username: {user?.username}

Role: {user?.role}

Last Login: {lastLoginTime || "N/A"}

2FA Verified: {twoFaVerifiedTime ? `Yes (${twoFaVerifiedTime})` : "No"}

Session Details Current session validity

Session ID: {user?.id?.slice(0, 8)}...

2FA Expires: {user && getTwoFactorMetadata(user.id)?.expiresAt ? new Date(getTwoFactorMetadata(user.id).expiresAt).toLocaleTimeString() : "N/A"}

Auction Floor Join the real-time group chat

Communicate with other logged-in users in real-time on the auction floor.

Welcome to Your Dashboard You have successfully logged in and completed two-factor authentication.

This is your personal dashboard. From here, you can navigate to the Auction Floor to chat with other users, or if you are an admin, monitor activity.

) } [V0_FILE]typescriptreact:file="app/admin-viewer/page.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState, useRef } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { ScrollArea } from "@/components/ui/scroll-area" import { useAuth } from "@/hooks/use-auth" import { useRouter } from "next/navigation" import { LogOut, Users, MessageSquare, Activity } from 'lucide-react' import { getAuctionActivity, getUserByUsername } from "@/lib/local-storage-data" import { pusherClient } from "@/lib/pusher" import { Badge } from "@/components/ui/badge" interface Member { id: string info: { username: string role: string } } interface ActivityLog { id: string user_id: string event_type: string timestamp: string duration_ms?: number message_content?: string username?: string // Added for display } export default function AdminViewer() { const { user, logout, isAuthenticated, needs2FA } = useAuth() const router = useRouter() const [onlineMembers, setOnlineMembers] = useState([]) const [activityLogs, setActivityLogs] = useState([]) const channelRef = useRef(null) useEffect(() => { if (!isAuthenticated || needs2FA || user?.role !== 'admin') { if (!isAuthenticated) { router.replace('/login'); } else if (needs2FA) { router.replace('/2fa'); } else if (user?.role !== 'admin') { router.replace('/dashboard'); // Redirect non-admins } return; } // Initialize Pusher for presence channel to monitor online users const channel = pusherClient.subscribe('presence-auction-floor'); channelRef.current = channel; channel.bind('pusher:subscription_succeeded', (members: any) => { const initialMembers: Member[] = []; members.each((member: any) => { initialMembers.push(member); }); setOnlineMembers(initialMembers); }); channel.bind('pusher:member_added', (member: Member) => { setOnlineMembers((prev) => [...prev, member]); }); channel.bind('pusher:member_removed', (member: Member) => { setOnlineMembers((prev) => prev.filter((m) => m.id !== member.id)); }); // Load initial activity logs from local storage const storedActivity = getAuctionActivity(); const activityWithUsernames = storedActivity.map((log: any) => ({ ...log, username: getUserByUsername(log.user_id)?.username || 'Unknown User', // Get username from dummy data })); setActivityLogs(activityWithUsernames.reverse()); // Show most recent first // Cleanup on unmount return () => { if (channelRef.current) { pusherClient.unsubscribe('presence-auction-floor'); channelRef.current = null; } }; }, [user, isAuthenticated, needs2FA, router]); if (!isAuthenticated || needs2FA || user?.role !== 'admin') { return null; // Or a loading spinner while redirecting } return (

Admin Viewer

Monitoring

Online Users {onlineMembers.length} currently online

{member.info.username} {member.id === user?.id && "(You)"} {member.info.role === 'admin' && Admin}

Activity Logs Recent user actions on the platform

{log.username} {new Date(log.timestamp).toLocaleString()}

{log.event_type.replace(/_/g, ' ')} {log.message_content && `: "${log.message_content}"`} {log.duration_ms && ` (Duration: ${(log.duration_ms / 1000).toFixed(1)}s)`}

No activity recorded yet.

); } [V0_FILE]typescript:file="lib/local-storage-data.ts" isEdit="true" isMerged="true" import { v4 as uuidv4 } from 'uuid'; // Dummy user data const DUMMY_USERS = [ { id: uuidv4(), username: 'admin', password_hash: 'pass', role: 'admin' }, { id: uuidv4(), username: 'user1', password_hash: 'pass1', role: 'user' }, { id: uuidv4(), username: 'user2', password_hash: 'pass', role: 'user' }, // Keeping user2 for variety ]; const LOCAL_STORAGE_KEYS = { USERS: 'dummyUsers', TWO_FACTOR_METADATA: 'dummyTwoFactorMetadata', AUCTION_ACTIVITY: 'dummyAuctionActivity', CURRENT_SESSION: 'currentSession', // For storing active session details }; // Initialize dummy data in localStorage if not present function initializeDummyData() { // Always re-initialize users to ensure new credentials are used localStorage.setItem(LOCAL_STORAGE_KEYS.USERS, JSON.stringify(DUMMY_USERS)); if (!localStorage.getItem(LOCAL_STORAGE_KEYS.TWO_FACTOR_METADATA)) { localStorage.setItem(LOCAL_STORAGE_KEYS.TWO_FACTOR_METADATA, JSON.stringify({})); } if (!localStorage.getItem(LOCAL_STORAGE_KEYS.AUCTION_ACTIVITY)) { localStorage.setItem(LOCAL_STORAGE_KEYS.AUCTION_ACTIVITY, JSON.stringify([])); } } // User functions export function getUserByUsername(username: string) { initializeDummyData(); const users = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEYS.USERS) || '[]'); return users.find((u: any) => u.username === username); } export function getUserById(id: string) { initializeDummyData(); const users = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEYS.USERS) || '[]'); return users.find((u: any) => u.id === id); } // 2FA Metadata functions export function getTwoFactorMetadata(userId: string) { initializeDummyData(); const metadata = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEYS.TWO_FACTOR_METADATA) || '{}'); return metadata[userId]; } export function setTwoFactorMetadata(userId: string, lastVerifiedAt: Date, expiresAt: Date) { initializeDummyData(); const metadata = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEYS.TWO_FACTOR_METADATA) || '{}'); metadata[userId] = { lastVerifiedAt: lastVerifiedAt.toISOString(), expiresAt: expiresAt.toISOString() }; localStorage.setItem(LOCAL_STORAGE_KEYS.TWO_FACTOR_METADATA, JSON.stringify(metadata)); } // Auction Activity functions export function addAuctionActivity(userId: string, eventType: string, messageContent?: string, durationMs?: number) { initializeDummyData(); const activity = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEYS.AUCTION_ACTIVITY) || '[]'); const newActivity = { id: uuidv4(), user_id: userId, event_type: eventType, timestamp: new Date().toISOString(), duration_ms: durationMs, message_content: messageContent, }; activity.push(newActivity); localStorage.setItem(LOCAL_STORAGE_KEYS.AUCTION_ACTIVITY, JSON.stringify(activity)); } export function getAuctionActivity() { initializeDummyData(); return JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEYS.AUCTION_ACTIVITY) || '[]'); } // Session functions (for client-side tracking, separate from JWT cookie) export function setCurrentSession(session: any) { localStorage.setItem(LOCAL_STORAGE_KEYS.CURRENT_SESSION, JSON.stringify(session)); } export function getCurrentSession() { const session = localStorage.getItem(LOCAL_STORAGE_KEYS.CURRENT_SESSION); return session ? JSON.parse(session) : null; } export function clearCurrentSession() { localStorage.removeItem(LOCAL_STORAGE_KEYS.CURRENT_SESSION); localStorage.removeItem(LOCAL_STORAGE_KEYS.TWO_FACTOR_METADATA); // Clear 2FA for this user on logout } [V0_FILE]typescriptreact:file="components/login-form.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { useAuth } from "@/hooks/use-auth" export default function LoginForm() { const [username, setUsername] = useState("") const [password, setPassword] = useState("") const [error, setError] = useState("") const [isLoading, setIsLoading] = useState(false) const { login } = useAuth() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setError("") setIsLoading(true) try { const success = await login(username, password) if (!success) { setError("Invalid username or password") } } catch (err) { setError("Login failed. Please try again.") } finally { setIsLoading(false) } } return (

Demo credentials:

Admin: admin / pass

User: user1 / pass1

User: user2 / pass

) } [V0_FILE]typescript:file="actions/auth.ts" isEdit="true" import 'server-only'; import { SignJWT, jwtVerify } from 'jose'; import { cookies } from 'next/headers'; import { redirect } from 'next/navigation'; import { getTwoFactorMetadata, setTwoFactorMetadata, getUserByUsername, getUserById } from '@/lib/local-storage-data'; // Import local storage utilities // Do NOT throw at module level. Handle secret key validity within functions. const secretKey = process.env.AUTH_SECRET; // Helper to get the encoded key, throwing if not available function getEncodedKey(): Uint8Array { if (!secretKey || secretKey.length < 32) { throw new Error('AUTH_SECRET environment variable is not set or is too short. It must be a string of at least 32 characters.'); } return new TextEncoder().encode(secretKey); } const SESSION_DURATION_MS = 2 * 60 * 60 * 1000; // 2 hours for JWT session const TWO_FA_VALIDITY_MS = 72 * 60 * 60 * 1000; // 72 hours for 2FA validity export async function encrypt(payload: any) { try { const encodedKey = getEncodedKey(); // Get key here, will throw if invalid return new SignJWT(payload) .setProtectedHeader({ alg: 'HS256' }) .setIssuedAt() .setExpirationTime('2h') // JWT session expires in 2 hours .sign(encodedKey); } catch (error) { console.error('Encryption failed:', error); throw error; // Re-throw to be caught by API route's try-catch } } export async function decrypt(session: string | undefined = '') { try { const encodedKey = getEncodedKey(); // Get key here, will throw if invalid const { payload } = await jwtVerify(session, encodedKey, { algorithms: ['HS256'], }); return payload; } catch (error) { console.error('Failed to verify session (JWT decryption error):', error); return null; } } export async function createSessionCookie(userId: string) { const expiresAt = new Date(Date.now() + SESSION_DURATION_MS); const session = await encrypt({ userId, expiresAt: expiresAt.toISOString() }); cookies().set('session', session, { httpOnly: true, secure: process.env.NODE_ENV === 'production', expires: expiresAt, sameSite: 'lax', path: '/', }); console.log('Session cookie created successfully.'); } export async function deleteSessionCookie() { cookies().delete('session'); console.log('Session cookie deleted.'); } export async function getSessionPayload() { const session = cookies().get('session')?.value; if (!session) { console.log('getSessionPayload: No session cookie found.'); return null; } const payload = await decrypt(session); if (!payload) { console.log('getSessionPayload: Decryption failed or payload is null.'); return null; } if (new Date(payload.expiresAt as string) < new Date()) { console.log('getSessionPayload: Session expired.'); return null; // Session expired } console.log('getSessionPayload: Session payload successfully retrieved and valid.'); return payload; } export async function checkTwoFactorStatusServer(userId: string) { const metadata = getTwoFactorMetadata(userId); if (!metadata) { return { needs2FA: true, lastVerifiedAt: null, expiresAt: null }; } const expiresAt = new Date(metadata.expiresAt); const needs2FA = new Date() > expiresAt; return { needs2FA, lastVerifiedAt: new Date(metadata.lastVerifiedAt), expiresAt }; } export async function verifyTwoFactorServer(userId: string) { const lastVerifiedAt = new Date(); const expiresAt = new Date(lastVerifiedAt.getTime() + TWO_FA_VALIDITY_MS); setTwoFactorMetadata(userId, lastVerifiedAt, expiresAt); } export async function validateUserCredentialsServer(username: string, password_hash: string) { const user = getUserByUsername(username); if (user && user.password_hash === password_hash) { return user; } return null; } export async function getUserByIdServer(userId: string) { return getUserById(userId); } [V0_FILE]typescript:file="app/api/auth/2fa/route.ts" isEdit="true" import { NextResponse } from 'next/server'; import { getSessionPayload, verifyTwoFactorServer } from '@/actions/auth'; import { addAuctionActivity } from '@/lib/local-storage-data'; const DEMO_PASSKEY = "72"; // Hardcoded for dummy 2FA export async function POST(request: Request) { try { // --- IMPORTANT DEBUGGING LOGS --- console.log('2FA API: Incoming Headers:', request.headers); console.log('2FA API: Cookie Header:', request.headers.get('Cookie')); console.log('2FA API: AUTH_SECRET value:', process.env.AUTH_SECRET ? 'SET' : 'NOT SET'); // Check if AUTH_SECRET is seen here // --- END DEBUGGING LOGS --- const session = await getSessionPayload(); console.log('2FA API: Session Payload:', session); // Log the session payload if (!session || !session.userId) { return NextResponse.json({ success: false, message: 'Unauthorized: No valid session found.' }, { status: 401 }); } const { passkey } = await request.json(); if (passkey === DEMO_PASSKEY) { await verifyTwoFactorServer(session.userId as string); addAuctionActivity(session.userId as string, '2fa_verified'); return NextResponse.json({ success: true }); } else { return NextResponse.json({ success: false, message: 'Invalid passkey. Please try again.' }, { status: 400 }); } } catch (error: any) { console.error('2FA API: Server error during 2FA verification:', error); // Return a JSON error response for any unexpected server-side errors return NextResponse.json( { success: false, message: `Internal server error during 2FA: ${error.message || 'Unknown error'}` }, { status: 500 } ); } } [V0_FILE]typescript:file="app/api/pusher/auth/route.ts" isEdit="true" import { pusherServer } from '@/lib/pusher'; import { getSessionPayload, getUserByIdServer } from '@/actions/auth'; // Use getSessionPayload and getUserByIdServer import { NextResponse } from 'next/server'; // Import NextResponse export async function POST(request: Request) { try { // Log incoming headers to check for the 'Cookie' header console.log('Pusher Auth API: Incoming Headers:', request.headers); console.log('Pusher Auth API: Cookie Header:', request.headers.get('Cookie')); console.log('Pusher Auth API: AUTH_SECRET value:', process.env.AUTH_SECRET ? 'SET' : 'NOT SET'); // Check if AUTH_SECRET is seen here const session = await getSessionPayload(); console.log('Pusher Auth API: Session Payload:', session); // Log the session payload if (!session || !session.userId) { return new Response('Unauthorized', { status: 401 }); // Pusher expects plain text for auth failures } const user = await getUserByIdServer(session.userId as string); // Use server-side user retrieval if (!user) { return new Response('User not found', { status: 404 }); // Pusher expects plain text for auth failures } const data = await request.text(); const socketId = data.split('&')[0].split('=')[1]; const channelName = data.split('&')[1].split('=')[1]; const auth = pusherServer.authorizeChannel(socketId, channelName, { user_id: user.id, user_info: { username: user.username, role: user.role, }, }); return new Response(JSON.stringify(auth), { headers: { 'Content-Type': 'application/json' }, }); } catch (error: any) { console.error('Pusher Auth API: Server error during authentication:', error); // Pusher expects a 403 or 401 plain text response for auth failures, not JSON return new Response(`Authentication failed: ${error.message || 'Unknown error'}`, { status: 403 }); } }