proper user/session creation and auth integration into UI

src/app/api/ai-event/route.ts

@@ -1,6 +1,16 @@
 import { NextResponse } from "next/server";
+import { auth } from "@/auth";
 
 export async function POST(request: Request) {
+	const session = await auth();
+	
+	if (!session?.user) {
+		return NextResponse.json(
+			{ error: "Authentication required" },
+			{ status: 401 }
+		);
+	}
+
 	const { prompt } = await request.json();
 
 	const systemPrompt = `

src/app/components/sign-in.tsx

@@ -1,37 +1,43 @@
-import { signIn, signOut } from "@/auth"
-import { auth } from "@/auth"
-import { Button } from "@/components/ui/button"
+"use client"
 
-export default async function SignIn() {
-  const session = await auth()
+import { signOut, useSession } from "next-auth/react"
+import { Button } from "@/components/ui/button"
+import { useRouter } from "next/navigation"
+
+export default function SignIn() {
+  const { data: session, status } = useSession()
+  const router = useRouter()
+
+  const handleSignOut = async () => {
+    await signOut({ redirect: false })
+    router.push("/")
+    router.refresh()
+  }
+
+  if (status === "loading") {
+    return <div className="h-8 w-16 bg-muted animate-pulse rounded"></div>
+  }
 
   if (session?.user) {
     return (
       <div className="flex items-center gap-4">
-        <form
-          action={async () => {
-            "use server"
-            await signOut()
-          }}
-        >
-          <Button type="submit" variant="secondary" >
-            Sign Out
-          </Button>
-        </form>
+        <span className="text-sm text-muted-foreground hidden sm:inline">
+          {session.user.name || session.user.email}
+        </span>
+        <Button onClick={handleSignOut} variant="ghost" size="sm">
+          Sign Out
+        </Button>
       </div>
     )
   }
 
   return (
-    <form
-      action={async () => {
-        "use server"
-        await signIn("authentik")
-      }}
+    <Button 
+      onClick={() => router.push("/signin")} 
+      variant="outline" 
+      size="sm"
     >
-      <Button type="submit" variant="default" >
-        Sign In
-      </Button>
-    </form>
+      Sign In
+    </Button>
   )
 }

src/app/page.tsx

@@ -143,6 +143,13 @@ export default function HomePage() {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ prompt: aiPrompt })
       })
+      
+      if (res.status === 401) {
+        alert('Please sign in to use AI features.')
+        setAiLoading(false)
+        return
+      }
+      
       const data = await res.json()
 
       if (Array.isArray(data) && data.length > 0) {
@@ -225,25 +232,32 @@ export default function HomePage() {
         <div className='max-w-fit m-auto'> Drag & Drop *.ics here</div>
       </div>
       {/* AI Toolbar */}
-      <div className="flex flex-row gap-4 mb-4 items-start">
-        {session?.user && (
-          <>
-            <div className='w-full'>
-              <Textarea
-                className="wrap-anywhere min-h-12"
-                placeholder='Describe event for AI to create'
-                value={aiPrompt}
-                onChange={e => setAiPrompt(e.target.value)}
-              />
-            </div>
-            <div className='flex flex-row gap-2 pt-1.5'>
-              <Button onClick={handleAiCreate} disabled={aiLoading}>
-                {aiLoading ? 'Thinking...' : 'AI Create'}
-              </Button>
-            </div>
-          </>
-        )}
-      </div>
+      {session?.user ? (
+        <div className="flex flex-row gap-4 mb-4 items-start">
+          <div className='w-full'>
+            <Textarea
+              className="wrap-anywhere min-h-12"
+              placeholder='Describe event for AI to create'
+              value={aiPrompt}
+              onChange={e => setAiPrompt(e.target.value)}
+            />
+          </div>
+          <div className='flex flex-row gap-2 pt-1.5'>
+            <Button onClick={handleAiCreate} disabled={aiLoading}>
+              {aiLoading ? 'Thinking...' : 'AI Create'}
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <div className="mb-4 p-4 border border-dashed rounded-lg text-center">
+          <div className="text-sm text-muted-foreground mb-2">
+            Sign in to unlock AI-powered calendar features
+          </div>
+          <Button variant="outline" size="sm" asChild>
+            <a href="/signin">Sign In</a>
+          </Button>
+        </div>
+      )}
 
       {/* Summary Panel */}
       {

src/app/signin/page.tsx

@@ -0,0 +1,45 @@
+import { signIn, auth } from "@/auth"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { redirect } from "next/navigation"
+import Link from "next/link"
+
+export default async function SignInPage() {
+  const session = await auth()
+  
+  // If already signed in, redirect to home
+  if (session?.user) {
+    redirect("/")
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          <CardTitle className="text-2xl font-bold">Welcome</CardTitle>
+          <CardDescription>
+            Sign in to access AI-powered calendar features
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <form
+            action={async () => {
+              "use server"
+              await signIn("authentik", { redirectTo: "/" })
+            }}
+          >
+            <Button type="submit" className="w-full" size="lg">
+              Continue with Authentik
+            </Button>
+          </form>
+          
+          <div className="text-center">
+            <Link href="/" className="text-sm text-muted-foreground hover:underline">
+              Continue without signing in
+            </Link>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

src/app/signout/page.tsx

@@ -0,0 +1,49 @@
+import { signOut, auth } from "@/auth"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { redirect } from "next/navigation"
+import Link from "next/link"
+
+export default async function SignOutPage() {
+  const session = await auth()
+  
+  if (!session) {
+    redirect("/")
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          <CardTitle className="text-2xl font-bold">Sign Out</CardTitle>
+          <CardDescription>
+            Are you sure you want to sign out?
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="text-center p-3 bg-muted rounded-lg">
+            <div className="text-sm text-muted-foreground">Currently signed in as</div>
+            <div className="font-medium">{session.user?.name || session.user?.email}</div>
+          </div>
+          
+          <div className="grid grid-cols-2 gap-3">
+            <form
+              action={async () => {
+                "use server"
+                await signOut({ redirectTo: "/" })
+              }}
+            >
+              <Button type="submit" variant="destructive" className="w-full">
+                Sign Out
+              </Button>
+            </form>
+            
+            <Button variant="outline" asChild>
+              <Link href="/">Cancel</Link>
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}