Add authentication checks to StoryEditorClient and ComicCreationForm

app/story/[storySlug]/story-editor-client.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import { useParams } from "next/navigation";
 import { useToast } from "@/hooks/use-toast";
 import { useApiKey } from "@/hooks/use-api-key";
+import { useAuth } from "@clerk/nextjs";
 import { EditorToolbar } from "@/components/editor/editor-toolbar";
 import { PageSidebar } from "@/components/editor/page-sidebar";
 import { ComicCanvas } from "@/components/editor/comic-canvas";
@@ -45,6 +46,7 @@ interface StoryData {
 export function StoryEditorClient() {
   const params = useParams();
   const slug = params.storySlug as string;
+  const { isSignedIn, isLoaded } = useAuth();
 
   const [story, setStory] = useState<StoryData | null>(null);
   const [isOwner, setIsOwner] = useState<boolean>(false);
@@ -161,6 +163,9 @@ export function StoryEditorClient() {
   }, [pages.length]);
 
   const handleAddPage = () => {
+    if (!isLoaded || !isSignedIn) {
+      return;
+    }
     if (!apiKey && pages.length >= 1) {
       setShowApiModal(true);
       return;
@@ -169,6 +174,9 @@ export function StoryEditorClient() {
   };
 
   const handleRedrawPage = () => {
+    if (!isLoaded || !isSignedIn) {
+      return;
+    }
     if (!apiKey) {
       setShowApiModal(true);
       return;

components/landing/comic-creation-form.tsx

@@ -6,7 +6,7 @@ import { Upload, X, Check, 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";
+import { useAuth, SignInButton, useClerk } from "@clerk/nextjs";
 import { COMIC_STYLES } from "@/lib/constants";
 import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut";
 import { useApiKey } from "@/hooks/use-api-key";
@@ -38,6 +38,7 @@ export function ComicCreationForm({
   const { toast } = useToast();
   const { uploadToS3 } = useS3Upload();
   const { isSignedIn, isLoaded } = useAuth();
+  const { openSignIn } = useClerk();
   const [apiKey] = useApiKey();
   const hasApiKey = !!apiKey;
   const [previews, setPreviews] = useState<string[]>([]);
@@ -46,6 +47,8 @@ export function ComicCreationForm({
   const fileInputRef = useRef<HTMLInputElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
+  const PROMPT_STORAGE_KEY = 'comic-prompt-draft';
+
 
   useEffect(() => {
     if (isLoading) {
@@ -60,12 +63,31 @@ export function ComicCreationForm({
     }
   }, []);
 
+  // Persist prompt to localStorage
+  useEffect(() => {
+    if (prompt) {
+      localStorage.setItem(PROMPT_STORAGE_KEY, prompt);
+    }
+  }, [prompt]);
+
+  // Restore prompt from localStorage only once on mount
+  useEffect(() => {
+    const saved = localStorage.getItem(PROMPT_STORAGE_KEY);
+    if (saved && !prompt) {
+      setPrompt(saved);
+    }
+  }, []); // Run only on mount
+
   // Keyboard shortcut for form submission
   useKeyboardShortcut(() => {
     if (!isLoading && prompt.trim()) {
+      if (!isSignedIn) {
+        openSignIn();
+      } else {
         handleCreate();
       }
-  }, { disabled: isLoading });
+    }
+  }, { disabled: isLoading || !isLoaded });
 
   const handleFiles = (newFiles: FileList | null) => {
     if (!newFiles) return;
@@ -168,6 +190,8 @@ export function ComicCreationForm({
 
       const result = await response.json();
 
+      // Clear the draft since submission was successful
+      localStorage.removeItem(PROMPT_STORAGE_KEY);
       // Redirect to the story editor using slug
       router.push(`/story/${result.storySlug}`);
     } catch (error) {