fix: client-side auth check instead of middleware rewrite

app/api/auth/route.ts

@@ -2,20 +2,28 @@ import { NextResponse } from 'next/server'
 import * as crypto from 'crypto'
 
 const SECRET = process.env.APP_SECRET || 'smart-home-default-secret-change-me'
+const PIN = process.env.APP_PIN || '1234'
 
 function makeToken(pin: string): string {
   return crypto.createHmac('sha256', SECRET).update(pin).digest('hex')
 }
 
+export async function GET(req: Request) {
+  const cookieHeader = req.headers.get('cookie') || ''
+  const match = cookieHeader.match(/auth_token=([^;]+)/)
+  const token = match ? match[1] : null
+  const expected = makeToken(PIN)
+  return NextResponse.json({ authenticated: token === expected })
+}
+
 export async function POST(req: Request) {
   const { pin } = await req.json()
-  const correctPin = process.env.APP_PIN || '1234'
 
-  if (pin !== correctPin) {
+  if (pin !== PIN) {
     return NextResponse.json({ error: 'wrong_pin' }, { status: 401 })
   }
 
-  const token = makeToken(correctPin)
+  const token = makeToken(PIN)
   const res = NextResponse.json({ success: true })
 
   res.cookies.set('auth_token', token, {

app/page.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import { useState, useEffect, useCallback, Suspense } from 'react'
-import { useSearchParams } from 'next/navigation'
+import { useState, useEffect, useCallback } from 'react'
 import { Thermometer, Droplets, Wind, Calendar, Lock, Settings as SettingsIcon, LogOut, Delete } from 'lucide-react'
 import Sidebar from '@/components/Sidebar'
 import TopBar from '@/components/TopBar'
@@ -374,9 +373,14 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
 }
 
 function HomePageInner() {
-  const searchParams = useSearchParams()
-  const isLocked = searchParams.get('locked') === '1'
-  const [unlocked, setUnlocked] = useState(!isLocked)
+  const [unlocked, setUnlocked] = useState<boolean | null>(null)
+
+  useEffect(() => {
+    fetch('/api/auth')
+      .then(r => r.json())
+      .then(d => setUnlocked(d.authenticated))
+      .catch(() => setUnlocked(false))
+  }, [])
 
   const [tab, setTab] = useState<Tab>('home')
   const [activeRoom, setActiveRoom] = useState('living')
@@ -431,8 +435,12 @@ function HomePageInner() {
     window.location.reload()
   }
 
+  if (unlocked === null) {
+    return <div style={{ display: 'flex', height: '100dvh', alignItems: 'center', justifyContent: 'center', background: 'var(--bg)' }}><div className="bg-ambient" /></div>
+  }
+
   if (!unlocked) {
-    return <LockScreen onUnlock={() => { setUnlocked(true); window.history.replaceState({}, '', '/') }} />
+    return <LockScreen onUnlock={() => setUnlocked(true)} />
   }
 
   return (
@@ -514,9 +522,5 @@ function HomePageInner() {
 
 
 export default function HomePage() {
-  return (
-    <Suspense>
-      <HomePageInner />
-    </Suspense>
-  )
+  return <HomePageInner />
 }