From d5b163e586a505635f61196aa47ed9da33c3ffc6 Mon Sep 17 00:00:00 2001
From: Riccardo Giorato <riccardoemanuelegiorato@gmail.com>
Date: Thu, 25 Dec 2025 14:21:41 +0100
Subject: [PATCH] Add authentication check and require user ID for story
 creation

---
 components/landing/create-button.tsx | 43 +++++++++++++++++-----------
 lib/db-actions.ts                    |  2 +-
 lib/schema.ts                        |  2 +-
 3 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/components/landing/create-button.tsx b/components/landing/create-button.tsx
index 25c98ee..5aa1838 100644
--- a/components/landing/create-button.tsx
+++ b/components/landing/create-button.tsx
@@ -6,6 +6,7 @@ import { ArrowRight, Loader2 } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { useToast } from "@/hooks/use-toast"
 import { useS3Upload } from "next-s3-upload"
+import { useAuth, SignInButton } from "@clerk/nextjs"
 
 interface CreateButtonProps {
   prompt: string
@@ -19,6 +20,7 @@ export function CreateButton({ prompt, style, characterFiles }: CreateButtonProp
   const [loadingStep, setLoadingStep] = useState(0)
   const { toast } = useToast()
   const { uploadToS3 } = useS3Upload()
+  const { isSignedIn } = useAuth()
 
   useEffect(() => {
     if (!isLoading) return
@@ -98,23 +100,32 @@ export function CreateButton({ prompt, style, characterFiles }: CreateButtonProp
 
   return (
     <div className="pt-2">
-      <Button
-        onClick={handleCreate}
-        disabled={isLoading || !prompt.trim()}
-        className="w-full sm:w-auto sm:min-w-40 bg-white hover:bg-neutral-200 text-black px-8 py-2 rounded-md text-sm font-medium transition-colors flex items-center justify-center gap-3 tracking-tight"
-      >
-        {isLoading ? (
-          <>
-            <Loader2 className="w-4 h-4 animate-spin" />
-            <span className="text-sm font-medium tracking-tight">{loadingSteps[loadingStep]}</span>
-          </>
-        ) : (
-          <>
-            Generate
+      {isSignedIn ? (
+        <Button
+          onClick={handleCreate}
+          disabled={isLoading || !prompt.trim()}
+          className="w-full sm:w-auto sm:min-w-40 bg-white hover:bg-neutral-200 text-black px-8 py-2 rounded-md text-sm font-medium transition-colors flex items-center justify-center gap-3 tracking-tight"
+        >
+          {isLoading ? (
+            <>
+              <Loader2 className="w-4 h-4 animate-spin" />
+              <span className="text-sm font-medium tracking-tight">{loadingSteps[loadingStep]}</span>
+            </>
+          ) : (
+            <>
+              Generate
+              <ArrowRight className="w-4 h-4" />
+            </>
+          )}
+        </Button>
+      ) : (
+        <SignInButton mode="modal">
+          <Button className="w-full sm:w-auto sm:min-w-40 bg-white hover:bg-neutral-200 text-black px-8 py-2 rounded-md text-sm font-medium transition-colors flex items-center justify-center gap-3 tracking-tight">
+            Login to create your comic
             <ArrowRight className="w-4 h-4" />
-          </>
-        )}
-      </Button>
+          </Button>
+        </SignInButton>
+      )}
     </div>
   )
 }
diff --git a/lib/db-actions.ts b/lib/db-actions.ts
index 6714e06..c4c3fa8 100644
--- a/lib/db-actions.ts
+++ b/lib/db-actions.ts
@@ -3,7 +3,7 @@ import { stories, pages, type Story, type Page } from './schema';
 import { eq } from 'drizzle-orm';
 import { generateComicSlug } from './slug-generator';
 
-export async function createStory(data: { title: string; description?: string; userId?: string }): Promise<Story> {
+export async function createStory(data: { title: string; description?: string; userId: string }): Promise<Story> {
   // Generate a unique slug
   let slug = generateComicSlug();
   let attempts = 0;
diff --git a/lib/schema.ts b/lib/schema.ts
index 6827d95..7525db2 100644
--- a/lib/schema.ts
+++ b/lib/schema.ts
@@ -7,7 +7,7 @@ export const stories = pgTable('stories', {
   title: text('title').notNull(),
   slug: text('slug').notNull().unique(),
   description: text('description'),
-  userId: uuid('user_id'), // Optional - for future Clerk auth
+  userId: uuid('user_id').notNull(), // Required Clerk user ID
   createdAt: timestamp('created_at').defaultNow().notNull(),
   updatedAt: timestamp('updated_at').defaultNow().notNull(),
 });