Add Clerk authentication and update auth flow for stories and API routes

app/api/generate-comic/route.ts

@@ -1,5 +1,6 @@
 import { type NextRequest, NextResponse } from "next/server";
 import Together from "together-ai";
+import { auth } from "@clerk/nextjs/server";
 import {
   updatePage,
   createStory,
@@ -102,6 +103,15 @@ const STYLE_DESCRIPTIONS: Record<string, string> = {
 
 export async function POST(request: NextRequest) {
   try {
+    const { userId } = await auth();
+
+    if (!userId) {
+      return NextResponse.json(
+        { error: "Authentication required" },
+        { status: 401 }
+      );
+    }
+
     const {
       storyId,
       prompt,
@@ -112,11 +122,7 @@ export async function POST(request: NextRequest) {
       previousContext = "",
     } = await request.json();
 
-    console.log("Received request:", {
-      storyId,
-      prompt: prompt?.substring(0, 50),
-      characterImagesCount: characterImages.length,
-    });
+    console.log("Received request:", { storyId, prompt: prompt?.substring(0, 50), characterImagesCount: characterImages.length, userId });
 
     if (!prompt || !apiKey) {
       return NextResponse.json(
@@ -129,7 +135,7 @@ export async function POST(request: NextRequest) {
     let story;
 
     if (storyId) {
-      // Create next page for existing story
+      // Create page for existing story
       console.log("Creating page for existing story:", storyId);
       const nextPageNumber = await getNextPageNumber(storyId);
       page = await createPage({
@@ -142,11 +148,11 @@ export async function POST(request: NextRequest) {
       console.log("Page created:", page.id);
     } else {
       // Create new story and first page
-      console.log("Creating new story");
+      console.log("Creating new story for user:", userId);
       story = await createStory({
         title: prompt.length > 50 ? prompt.substring(0, 50) + "..." : prompt,
         description: undefined,
-        userId: undefined,
+        userId: userId,
       });
       console.log("Story created:", story.id);
 

app/api/stories/[storySlug]/route.ts

@@ -1,22 +1,33 @@
 import { type NextRequest, NextResponse } from "next/server";
+import { auth } from "@clerk/nextjs/server";
 import { getStoryWithPagesBySlug } from "@/lib/db-actions";
 import { db } from "@/lib/db";
 import { stories } from "@/lib/schema";
+import { eq } from "drizzle-orm";
 
 export async function GET(
   request: NextRequest,
   { params }: { params: Promise<{ storySlug: string }> }
 ) {
   try {
-    const { storySlug: slug } = await params;
-    console.log("API: Fetching story with slug:", slug);
+    const { userId } = await auth();
 
-    // Special case: if slug is "all", return all stories for debugging
+    if (!userId) {
+      return NextResponse.json(
+        { error: "Authentication required" },
+        { status: 401 }
+      );
+    }
+
+    const { storySlug: slug } = await params;
+    console.log("API: Fetching story with slug:", slug, "for user:", userId);
+
+    // Special case: if slug is "all", return user's stories for debugging
     if (slug === "all") {
-      const allStories = await db.select().from(stories);
+      const userStories = await db.select().from(stories).where(eq(stories.userId, userId));
       return NextResponse.json({
-        message: "All stories",
-        stories: allStories.map(s => ({ id: s.id, slug: s.slug, title: s.title }))
+        message: "User stories",
+        stories: userStories.map(s => ({ id: s.id, slug: s.slug, title: s.title }))
       });
     }
 
@@ -28,7 +39,6 @@ export async function GET(
     }
 
     const result = await getStoryWithPagesBySlug(slug);
-    console.log("API: Result found:", !!result);
 
     if (!result) {
       return NextResponse.json(
@@ -37,6 +47,14 @@ export async function GET(
       );
     }
 
+    // Check if the story belongs to the authenticated user
+    if (result.story.userId !== userId) {
+      return NextResponse.json(
+        { error: "Access denied" },
+        { status: 403 }
+      );
+    }
+
     return NextResponse.json(result);
   } catch (error) {
     console.error("Error fetching story:", error);

app/layout.tsx

@@ -1,48 +1,50 @@
-import type React from "react"
-import type { Metadata } from "next"
-import { Inter, Atma, Space_Grotesk, Instrument_Serif } from "next/font/google"
-import { Analytics } from "@vercel/analytics/next"
-import { Toaster } from "@/components/ui/toaster"
-import "./globals.css"
+import type React from "react";
+import type { Metadata } from "next";
+import { Inter, Atma, Space_Grotesk, Instrument_Serif } from "next/font/google";
+import { Analytics } from "@vercel/analytics/next";
+import { Toaster } from "@/components/ui/toaster";
+import { ClerkProvider } from "@clerk/nextjs";
+import "./globals.css";
 
-const inter = Inter({ subsets: ["latin"], variable: "--font-inter" })
+const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
 const atma = Atma({
   weight: ["400", "500", "600", "700"],
   subsets: ["latin"],
   variable: "--font-atma",
-})
+});
 const spaceGrotesk = Space_Grotesk({
   subsets: ["latin"],
   variable: "--font-space-grotesk",
-})
+});
 const instrumentSerif = Instrument_Serif({
   weight: ["400"],
   subsets: ["latin"],
   variable: "--font-instrument-serif",
-})
+});
 
 export const metadata: Metadata = {
   title: "MakeComics - AI Comic Generator",
   description:
     "Create stunning AI-generated comics in seconds. Choose your style, describe your story, and watch the magic happen.",
-    generator: 'v0.app'
-}
+};
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode
+  children: React.ReactNode;
 }>) {
   return (
-    <html
-      lang="en"
-      className={`${inter.variable} ${atma.variable} ${spaceGrotesk.variable} ${instrumentSerif.variable}`}
-    >
-      <body className="font-sans antialiased">
-        {children}
-        <Analytics />
-        <Toaster />
-      </body>
-    </html>
-  )
+    <ClerkProvider>
+      <html
+        lang="en"
+        className={`${inter.variable} ${atma.variable} ${spaceGrotesk.variable} ${instrumentSerif.variable}`}
+      >
+        <body className="font-sans antialiased">
+          {children}
+          <Analytics />
+          <Toaster />
+        </body>
+      </html>
+    </ClerkProvider>
+  );
 }