fix: show styled error page instead of raw JSON for login failures

Previously, when the /login route encountered errors (expired auth
request, missing SAML request, unreachable IDP, no request params),
it returned raw JSON like {"error":"Auth request not found or expired"}
directly to the browser. Since this route is reached via browser
navigation (not a fetch() call), users saw unhelpful raw JSON text.

Replace all user-facing NextResponse.json() error responses with
redirects to a new /error page that renders inside the existing boxed
card layout with a clear title and actionable message.

The catch block for getAuthRequest now inspects the ConnectError code
from Zitadel to provide specific guidance: expired sessions (NOT_FOUND),
permission issues, service unavailability, and timeouts each get a
tailored message.

The two JSON responses intentionally left unchanged:
- RSC check: internal Next.js safeguard, never user-facing
- Prompt.NONE: OIDC spec requires no UI for silent auth; the calling
  application handles this programmatically

Made-with: Cursor

Author: mattdjenkinson

apps/login/src/app/(main)/(boxed)/error/page.tsx

@@ -0,0 +1,19 @@
+import { Alert, AlertType } from "@/components/alert";
+
+export default async function Page(props: {
+  searchParams: Promise<Record<string | number | symbol, string | undefined>>;
+}) {
+  const searchParams = await props.searchParams;
+  const title = searchParams.title ?? "Something went wrong";
+  const message =
+    searchParams.error ?? "An unexpected error occurred. Please try again.";
+
+  return (
+    <>
+      <h1 className="text-2xl font-semibold">{title}</h1>
+      <div className="pt-6">
+        <Alert type={AlertType.ALERT}>{message}</Alert>
+      </div>
+    </>
+  );
+}

apps/login/src/app/login/route.ts

@@ -16,7 +16,7 @@ import {
   listSessions,
   startIdentityProviderFlow,
 } from "@/lib/zitadel";
-import { create } from "@zitadel/client";
+import { ConnectError, create } from "@zitadel/client";
 import { Prompt } from "@zitadel/proto/zitadel/oidc/v2/authorization_pb";
 import {
   CreateCallbackRequestSchema,
@@ -32,6 +32,37 @@ import { DEFAULT_CSP } from "../../../constants/csp";
 // NOTE: Route segment configs (dynamic, revalidate, fetchCache) removed for Next.js 15.6+ compatibility
 // With dynamicIO enabled, route handlers are dynamic by default
 
+const gotoError = ({
+  request,
+  title,
+  error,
+}: {
+  request: NextRequest;
+  title: string;
+  error: string;
+}): NextResponse<unknown> => {
+  const errorUrl = constructUrl(request, "/error");
+  errorUrl.searchParams.set("title", title);
+  errorUrl.searchParams.set("error", error);
+  return NextResponse.redirect(errorUrl);
+};
+
+const getAuthRequestErrorMessage = (error: unknown): string => {
+  if (error instanceof ConnectError) {
+    switch (error.code) {
+      case 5: // NOT_FOUND
+        return "Your login session has expired. Please return to the application and try signing in again.";
+      case 7: // PERMISSION_DENIED
+        return "You don't have permission to access this login request. Please contact your administrator.";
+      case 14: // UNAVAILABLE
+        return "The authentication service is temporarily unavailable. Please try again in a few moments.";
+      case 4: // DEADLINE_EXCEEDED
+        return "The authentication service took too long to respond. Please try again.";
+    }
+  }
+  return "Your login request could not be found or has expired. Please return to the application and try signing in again.";
+};
+
 const gotoAccounts = ({
   request,
   requestId,
@@ -142,17 +173,20 @@ export async function GET(request: NextRequest) {
       }));
     } catch (error) {
       console.error("Failed to get auth request:", error);
-      return NextResponse.json(
-        { error: "Auth request not found or expired" },
-        { status: 400 },
-      );
+      return gotoError({
+        request,
+        title: "Login request expired",
+        error: getAuthRequestErrorMessage(error),
+      });
     }
 
     if (!authRequest) {
-      return NextResponse.json(
-        { error: "Auth request not found" },
-        { status: 400 },
-      );
+      return gotoError({
+        request,
+        title: "Login request not found",
+        error:
+          "Your login request could not be found. Please return to the application and try signing in again.",
+      });
     }
 
     let organization = "";
@@ -248,10 +282,12 @@ export async function GET(request: NextRequest) {
           });
 
           if (!url) {
-            return NextResponse.json(
-              { error: "Could not start IDP flow" },
-              { status: 500 },
-            );
+            return gotoError({
+              request,
+              title: "Sign-in unavailable",
+              error:
+                "We couldn't connect to your identity provider. Please try again or contact your administrator.",
+            });
           }
 
           if (url.startsWith("/")) {
@@ -487,10 +523,12 @@ export async function GET(request: NextRequest) {
     });
 
     if (!samlRequest) {
-      return NextResponse.json(
-        { error: "No samlRequest found" },
-        { status: 400 },
-      );
+      return gotoError({
+        request,
+        title: "Login request not found",
+        error:
+          "Your SAML login request could not be found or has expired. Please return to the application and try signing in again.",
+      });
     }
 
     let selectedSession = await findValidSession({
@@ -574,9 +612,11 @@ export async function GET(request: NextRequest) {
   }
   // Device Authorization does not need to start here as it is handled on the /device endpoint
   else {
-    return NextResponse.json(
-      { error: "No authRequest nor samlRequest provided" },
-      { status: 500 },
-    );
+    return gotoError({
+      request,
+      title: "No login request",
+      error:
+        "No authentication request was provided. Please start the sign-in process from your application.",
+    });
   }
 }