fix(frontend): improve waitlist error display for users not on allowlist (#11196)

## Summary

This PR improves the user experience for users who are not on the
waitlist during sign-up. When a user attempts to sign up or log in with
an email that's not on the allowlist, they now see a clear, helpful
modal with a direct call-to-action to join the waitlist.

Fixes
[OPEN-2794](https://linear.app/autogpt/issue/OPEN-2794/display-waitlist-error-for-users-not-on-waitlist-during-sign-up)

## Changes

- ✨ Updated `EmailNotAllowedModal` with improved messaging and a "Join
Waitlist" button
- 🔧 Fixed OAuth provider signup/login to properly display the waitlist
modal
- 📝 Enhanced auth-code-error page to detect and display
waitlist-specific errors
- 💬 Added helpful guidance about checking email address and Discord
support link
- 🎯 Consistent waitlist error handling across all auth flows (regular
signup, OAuth, error pages)

## Test Plan

Tested locally by:
1. Attempting signup with non-allowlisted email - modal appears ✅
2. Attempting Google SSO with non-allowlisted account - modal appears ✅
3. Modal shows "Join Waitlist" button that opens
https://agpt.co/waitlist ✅
4. Help text about checking email and Discord support is visible ✅

## Screenshots

The new waitlist modal includes:
- Clear "Join the Waitlist" title
- Explanation that platform is in closed beta
- "Join Waitlist" button (opens in new tab)
- Help text about checking email address
- Discord support link for users who need help

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Reinier van der Leer <pwuts@agpt.co>

autogpt_platform/frontend/src/app/(platform)/auth/auth-code-error/page.tsx

@@ -2,11 +2,18 @@
 
 import { isServerSide } from "@/lib/utils/is-server-side";
 import { useEffect, useState } from "react";
+import { Button } from "@/components/atoms/Button/Button";
+import { Text } from "@/components/atoms/Text/Text";
+import { Card } from "@/components/atoms/Card/Card";
+import { WaitlistErrorContent } from "@/components/auth/WaitlistErrorContent";
+import { isWaitlistErrorFromParams } from "@/app/api/auth/utils";
+import { useRouter } from "next/navigation";
 
 export default function AuthErrorPage() {
   const [errorType, setErrorType] = useState<string | null>(null);
   const [errorCode, setErrorCode] = useState<string | null>(null);
   const [errorDescription, setErrorDescription] = useState<string | null>(null);
+  const router = useRouter();
 
   useEffect(() => {
     // This code only runs on the client side
@@ -23,15 +30,60 @@ export default function AuthErrorPage() {
   }, []);
 
   if (!errorType && !errorCode && !errorDescription) {
-    return <div>Loading...</div>;
+    return (
+      <div className="flex h-screen items-center justify-center">
+        <Text variant="body">Loading...</Text>
+      </div>
+    );
   }
 
+  // Check if this is a waitlist/not allowed error
+  const isWaitlistError = isWaitlistErrorFromParams(
+    errorCode,
+    errorDescription,
+  );
+
+  if (isWaitlistError) {
+    return (
+      <div className="flex h-screen items-center justify-center">
+        <Card className="w-full max-w-md p-8">
+          <WaitlistErrorContent
+            onClose={() => router.push("/login")}
+            closeButtonText="Back to Login"
+          />
+        </Card>
+      </div>
+    );
+  }
+
+  // Default error display for other types of errors
   return (
-    <div>
-      <h1>Authentication Error</h1>
-      {errorType && <p>Error Type: {errorType}</p>}
-      {errorCode && <p>Error Code: {errorCode}</p>}
-      {errorDescription && <p>Error Description: {errorDescription}</p>}
+    <div className="flex h-screen items-center justify-center">
+      <Card className="w-full max-w-md p-8">
+        <div className="flex flex-col items-center gap-6">
+          <Text variant="h3">Authentication Error</Text>
+          <div className="flex flex-col gap-2 text-center">
+            {errorType && (
+              <Text variant="body">
+                <strong>Error Type:</strong> {errorType}
+              </Text>
+            )}
+            {errorCode && (
+              <Text variant="body">
+                <strong>Error Code:</strong> {errorCode}
+              </Text>
+            )}
+            {errorDescription && (
+              <Text variant="body">
+                <strong>Description:</strong> {errorDescription}
+              </Text>
+            )}
+          </div>
+          <Button variant="primary" onClick={() => router.push("/login")}>
+            Back to Login
+          </Button>
+        </div>
+      </Card>
     </div>
   );
 }

autogpt_platform/frontend/src/app/(platform)/login/useLoginPage.ts

@@ -67,7 +67,7 @@ export function useLoginPage() {
 
       if (!response.ok) {
         const { error } = await response.json();
-        if (typeof error === "string" && error.includes("not_allowed")) {
+        if (error === "not_allowed") {
           setShowNotAllowedModal(true);
         } else {
           setFeedback(error || "Failed to start OAuth flow");

autogpt_platform/frontend/src/app/(platform)/signup/useSignupPage.ts

@@ -70,6 +70,13 @@ export function useSignupPage() {
         const { error } = await response.json();
         setIsGoogleLoading(false);
         resetCaptcha();
+
+        // Check for waitlist error
+        if (error === "not_allowed") {
+          setShowNotAllowedModal(true);
+          return;
+        }
+
         toast({
           title: error || "Failed to start OAuth flow",
           variant: "destructive",

autogpt_platform/frontend/src/app/api/auth/provider/route.ts

@@ -1,6 +1,7 @@
 import { getServerSupabase } from "@/lib/supabase/server/getServerSupabase";
 import { NextResponse } from "next/server";
 import { LoginProvider } from "@/types/auth";
+import { isWaitlistError, logWaitlistError } from "../utils";
 
 export async function POST(request: Request) {
   try {
@@ -31,8 +32,9 @@ export async function POST(request: Request) {
     });
 
     if (error) {
-      // FIXME: supabase doesn't return the correct error message for this case
-      if (error.message.includes("P0001")) {
+      // Check for waitlist/allowlist error
+      if (isWaitlistError(error)) {
+        logWaitlistError("OAuth Provider", error.message);
         return NextResponse.json({ error: "not_allowed" }, { status: 403 });
       }
 

autogpt_platform/frontend/src/app/api/auth/signup/route.ts

@@ -4,6 +4,7 @@ import { getServerSupabase } from "@/lib/supabase/server/getServerSupabase";
 import { verifyTurnstileToken } from "@/lib/turnstile";
 import { signupFormSchema } from "@/types/auth";
 import { shouldShowOnboarding } from "../../helpers";
+import { isWaitlistError, logWaitlistError } from "../utils";
 
 export async function POST(request: Request) {
   try {
@@ -47,16 +48,19 @@ export async function POST(request: Request) {
     const { data, error } = await supabase.auth.signUp(parsed.data);
 
     if (error) {
-      // FIXME: supabase doesn't return the correct error message for this case
-      if (error.message.includes("P0001")) {
+      // Check for waitlist/allowlist error
+      if (isWaitlistError(error)) {
+        logWaitlistError("Signup", error.message);
         return NextResponse.json({ error: "not_allowed" }, { status: 403 });
       }
+
       if ((error as any).code === "user_already_exists") {
         return NextResponse.json(
           { error: "user_already_exists" },
           { status: 409 },
         );
       }
+
       return NextResponse.json({ error: error.message }, { status: 400 });
     }
 

autogpt_platform/frontend/src/app/api/auth/utils.ts

@@ -0,0 +1,60 @@
+/**
+ * Checks if a Supabase auth error is related to the waitlist/allowlist
+ *
+ * The PostgreSQL trigger raises P0001 with message format:
+ * "The email address "email" is not allowed to register. Please contact support for assistance."
+ *
+ * @param error - The error object from Supabase auth operations
+ * @returns true if this is a waitlist/allowlist error
+ */
+export function isWaitlistError(error: any): boolean {
+  if (!error?.message) return false;
+
+  return (
+    error.message.includes("P0001") || // PostgreSQL custom error code
+    error.message.includes("not allowed to register") || // Trigger message
+    error.message.toLowerCase().includes("allowed_users") // Table reference
+  );
+}
+
+/**
+ * Checks if OAuth callback URL parameters indicate a waitlist error
+ *
+ * This is for the auth-code-error page which receives errors via URL hash params
+ * from Supabase OAuth redirects
+ *
+ * @param errorCode - The error_code parameter from the URL
+ * @param errorDescription - The error_description parameter from the URL
+ * @returns true if this appears to be a waitlist/allowlist error
+ */
+export function isWaitlistErrorFromParams(
+  errorCode?: string | null,
+  errorDescription?: string | null,
+): boolean {
+  if (!errorDescription) return false;
+
+  const description = errorDescription.toLowerCase();
+  return (
+    description.includes("p0001") || // PostgreSQL error code might be in description
+    description.includes("not allowed") ||
+    description.includes("waitlist") ||
+    description.includes("allowlist") ||
+    description.includes("allowed_users")
+  );
+}
+
+/**
+ * Logs a waitlist error for debugging purposes
+ * Does not expose user email in logs for privacy
+ *
+ * @param context - Where the error occurred (e.g., "Signup", "OAuth Provider")
+ * @param errorMessage - The full error message
+ */
+export function logWaitlistError(context: string, errorMessage: string): void {
+  // Only log the error code and general message, not the email
+  const sanitizedMessage = errorMessage.replace(
+    /"[^"]+@[^"]+"/g, // Matches email addresses in quotes
+    '"[email]"',
+  );
+  console.log(`[${context}] Waitlist check failed:`, sanitizedMessage);
+}

autogpt_platform/frontend/src/components/auth/EmailNotAllowedModal.tsx

@@ -1,6 +1,5 @@
-import { Button } from "../atoms/Button/Button";
-import { Text } from "../atoms/Text/Text";
 import { Dialog } from "../molecules/Dialog/Dialog";
+import { WaitlistErrorContent } from "./WaitlistErrorContent";
 
 interface Props {
   isOpen: boolean;
@@ -14,18 +13,8 @@ export function EmailNotAllowedModal({ isOpen, onClose }: Props) {
       styling={{ maxWidth: "35rem" }}
     >
       <Dialog.Content>
-        <div className="flex flex-col items-center gap-8 py-4">
-          <Text variant="h3">Access Restricted</Text>
-          <Text variant="large-medium" className="text-center">
-            We&apos;re currently in a limited access phase. Your email address
-            isn&apos;t on our current allowlist for early access. If you believe
-            this is an error or would like to request access, please contact us.
-          </Text>
-          <div className="flex justify-end pt-4">
-            <Button variant="primary" onClick={onClose}>
-              I understand
-            </Button>
-          </div>
+        <div className="py-4">
+          <WaitlistErrorContent onClose={onClose} />
         </div>
       </Dialog.Content>
     </Dialog>

autogpt_platform/frontend/src/components/auth/WaitlistErrorContent.tsx

@@ -0,0 +1,59 @@
+import { Button } from "../atoms/Button/Button";
+import { Text } from "../atoms/Text/Text";
+
+interface WaitlistErrorContentProps {
+  onClose: () => void;
+  closeButtonText?: string;
+  closeButtonVariant?: "primary" | "secondary";
+}
+
+export function WaitlistErrorContent({
+  onClose,
+  closeButtonText = "Close",
+  closeButtonVariant = "primary",
+}: WaitlistErrorContentProps) {
+  return (
+    <div className="flex flex-col items-center gap-6">
+      <Text variant="h3">Join the Waitlist</Text>
+      <div className="flex flex-col gap-4 text-center">
+        <Text variant="large-medium" className="text-center">
+          The AutoGPT Platform is currently in closed beta. Your email address
+          isn&apos;t on our current allowlist for early access.
+        </Text>
+        <Text variant="body" className="text-center">
+          Join our waitlist to get notified when we open up access!
+        </Text>
+      </div>
+      <div className="flex gap-3">
+        <Button
+          variant="secondary"
+          onClick={() => {
+            window.open("https://agpt.co/waitlist", "_blank");
+          }}
+        >
+          Join Waitlist
+        </Button>
+        <Button variant={closeButtonVariant} onClick={onClose}>
+          {closeButtonText}
+        </Button>
+      </div>
+      <div className="flex flex-col gap-2">
+        <Text variant="small" className="text-center text-muted-foreground">
+          Already signed up for the waitlist? Make sure you&apos;re using the
+          exact same email address you used when signing up.
+        </Text>
+        <Text variant="small" className="text-center text-muted-foreground">
+          If you&apos;re not sure which email you used or need help,{" "}
+          <a
+            href="https://discord.gg/autogpt"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="underline hover:text-foreground"
+          >
+            reach out on Discord
+          </a>
+        </Text>
+      </div>
+    </div>
+  );
+}