Show the DCR rejection reason as an inline card, not a toast

When transparent Dynamic Client Registration is rejected with an actionable reason (e.g. a server that refuses our redirect URI), surface the message as an inline error card on the bring-your-own-app recovery view instead of a transient toast, so the reason stays visible while the user registers an app.

Rhys Sullivan committed 4 months ago

Commit a414b711 parent d5ba68f1 file · +26 −4Browse files

Unified · Split

packages/react/src/components/add-account-modal.tsx+26−4

   const [dcrBusy, setDcrBusy] = useState(false);
   const [dcrFailed, setDcrFailed] = useState(false);
   const [oauthFallbackProbe, setOAuthFallbackProbe] = useState<DcrProbeResult | null>(null);
+  // When transparent DCR is rejected with an actionable reason (e.g. the server
+  // refuses our redirect URI), surface it as an inline error card on the
+  // bring-your-own-app recovery view instead of a transient toast.
+  const [dcrFallbackMessage, setDcrFallbackMessage] = useState<string | null>(null);
   // FIX 3 escape hatch: when no registered app matched the integration's
   // endpoints, the unmatched apps are collapsed behind an opt-in expander.
   const [showOtherApps, setShowOtherApps] = useState(false);
     setPickedApp(null);
     setOAuthFallbackProbe(null);
     setDcrFailed(false);
+    setDcrFallbackMessage(null);
   }, [initialState, allMethods, defaultOwner, ownerOptions]);
   useEffect(() => {
     setOnePasswordItemId("");
     setDcrFailed(false);
     setOAuthFallbackProbe(null);
+    setDcrFallbackMessage(null);
   };
   // A just-created custom method joins the in-session list and is auto-selected
     if (outcome.kind === "fallback") {
       setOAuthFallbackProbe("probe" in outcome ? outcome.probe : null);
       setDcrFailed(true);
-      toast.error(
+      // Surface the server's actionable rejection reason on the recovery view as
-        ("message" in outcome ? outcome.message : undefined) ??
+      // an inline error card. Generic fallbacks (no message) fall through to the
-          "Automatic setup unavailable. Register an app instead.",
+      // "register an app" empty state, which already guides the user.
-      );
+      setDcrFallbackMessage("message" in outcome ? (outcome.message ?? null) : null);
     }
   };
                               <p className="text-xs text-muted-foreground">Loading OAuth apps…</p>
                             ) : (
                               <div className="space-y-3">
+                                {dcrFallbackMessage ? (
+                                  <div
+                                    role="alert"
+                                    className="space-y-1 rounded-lg border border-destructive/40 bg-destructive/5 px-3 py-3"
+                                  >
+                                    <p className="text-sm font-medium text-destructive">
+                                      Couldn&apos;t set up {integrationName} automatically
+                                    </p>
+                                    <p className="text-xs text-muted-foreground">
+                                      {dcrFallbackMessage}
+                                    </p>
+                                    <p className="text-xs text-muted-foreground">
+                                      Register an app below to connect.
+                                    </p>
+                                  </div>
+                                ) : null}
                                 {/* No registered app matched the integration's endpoint:
                         empty state + a prominent register CTA, and an opt-in
                         collapsed "use a different registered app" escape hatch. */}