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,6 +100,7 @@ export function CreateButton({ prompt, style, characterFiles }: CreateButtonProp
 
   return (
     <div className="pt-2">
+      {isSignedIn ? (
         <Button
           onClick={handleCreate}
           disabled={isLoading || !prompt.trim()}
@@ -115,6 +118,14 @@ export function CreateButton({ prompt, style, characterFiles }: CreateButtonProp
             </>
           )}
         </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>
+      )}
     </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(),
 });