fix(frontend): fix publish agent behavior when user is logged out (#11159)

When a user clicks the “Become a Creator” button on the marketplace
page, we send an unauthorised request to the server to get a list of
agents. In this PR, I’ve fixed this by checking if the user is logged
in. If they’re not, I’ll show them a UI to log in or create an account.
 
<img width="967" height="605" alt="Screenshot 2025-10-14 at 12 04 52 PM"
src="https://github.com/user-attachments/assets/95079d9c-e6ef-4d75-9422-ce4fb138e584"
/>

### Changes
- Modify the publish agent test to detect the correct text even when the
user is logged out.
- Use Supabase helpers to check if the user is logged in. If not,
display the appropriate UI.

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] The login UI is correctly displayed when the user is logged out.
- [x] The login UI is also correctly displayed when the user is logged
in.
  - [x] The login and signup buttons are working perfectly.

autogpt_platform/frontend/src/components/contextual/PublishAgentModal/PublishAgentModal.tsx

@@ -8,6 +8,11 @@ import { Dialog } from "@/components/molecules/Dialog/Dialog";
 import { Skeleton } from "@/components/__legacy__/ui/skeleton";
 import { Button } from "@/components/atoms/Button/Button";
 import { Props, usePublishAgentModal } from "./usePublishAgentModal";
+import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
+import {
+  PublishAuthPrompt,
+  PublishAuthPromptSkeleton,
+} from "./components/PublishAuthPrompt";
 
 export function PublishAgentModal({
   trigger,
@@ -31,7 +36,17 @@ export function PublishAgentModal({
     handleBack,
   } = usePublishAgentModal({ targetState, onStateChange });
 
+  const { user, isUserLoading } = useSupabase();
+
   function renderContent() {
+    if (isUserLoading) {
+      return <PublishAuthPromptSkeleton />;
+    }
+
+    if (!user) {
+      return <PublishAuthPrompt />;
+    }
+
     switch (currentState.step) {
       case "select":
         return (

autogpt_platform/frontend/src/components/contextual/PublishAgentModal/components/PublishAuthPrompt.tsx

@@ -0,0 +1,50 @@
+import { Skeleton } from "@/components/__legacy__/ui/skeleton";
+import { Button } from "@/components/atoms/Button/Button";
+import { Text } from "@/components/atoms/Text/Text";
+import { useRouter } from "next/navigation";
+
+export const PublishAuthPrompt = () => {
+  const router = useRouter();
+  return (
+    <div>
+      <div className="mx-auto inline-flex h-[370px] w-full flex-col items-center justify-center gap-6 px-4 py-5 sm:px-6">
+        <div className="flex flex-col items-center gap-4 text-center">
+          <Text variant="h3" className="font-semibold">
+            Share your AI creations
+          </Text>
+          <Text
+            variant="lead"
+            className="max-w-[80%] text-neutral-600 dark:text-neutral-400"
+          >
+            Log in or create an account to publish your agents to the
+            marketplace and join a community of creators
+          </Text>
+        </div>
+        <div className="flex flex-col items-center gap-3 sm:flex-row">
+          <Button
+            onClick={() => router.push("/login")}
+            className="bg-neutral-800 text-white hover:bg-neutral-900"
+          >
+            Log in
+          </Button>
+          <Button onClick={() => router.push("/signup")} variant="secondary">
+            Create account
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const PublishAuthPromptSkeleton = () => {
+  return (
+    <div className="mx-auto inline-flex h-[370px] w-full flex-col items-center justify-center gap-6 px-4 py-5 sm:px-6">
+      <Skeleton className="h-8 w-64" />
+      <Skeleton className="h-20 w-96" />
+      <div className="flex flex-col items-center gap-3 sm:flex-row">
+        <Skeleton className="h-10 w-24" />
+        <Skeleton className="h-10 w-32" />
+      </div>
+    </div>
+  );
+};

autogpt_platform/frontend/src/tests/publish-agent.spec.ts

@@ -82,7 +82,9 @@ test("should display appropriate content in agent creation modal when user is lo
   await getButton("Become a creator").click();
 
   await isVisible(
-    getText("Uh-oh.. It seems like you don't have any agents in your library."),
+    getText(
+      "Log in or create an account to publish your agents to the marketplace and join a community of creators",
+    ),
   );
 });