Add authentication check and require user ID for story creation

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
+      {isSignedIn ? (
-        onClick={handleCreate}
+        <Button
-        disabled={isLoading || !prompt.trim()}
+          onClick={handleCreate}
-        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"
+          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 ? (
+        >
-          <>
+          {isLoading ? (
-            <Loader2 className="w-4 h-4 animate-spin" />
+            <>
-            <span className="text-sm font-medium tracking-tight">{loadingSteps[loadingStep]}</span>
+              <Loader2 className="w-4 h-4 animate-spin" />
-          </>
+              <span className="text-sm font-medium tracking-tight">{loadingSteps[loadingStep]}</span>
-        ) : (
+            </>
-          <>
+          ) : (
-            Generate
+            <>
+              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>
-        )}
+        </SignInButton>
-      </Button>
+      )}
     </div>
   )
 }

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;

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(),
 });