Guide users to manual OAuth registration when automatic (DCR) is rejected (#1176)

* 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.

* Lead with manual entry when a server rejects automatic registration

After transparent DCR is rejected (e.g. a server that only approves loopback
redirect URIs), the recovery "Register an OAuth app" form still led with
"Register automatically", sending the user straight back into the path that just
failed. Pass the rejection reason into OAuthClientForm so it suppresses the auto
path, restates why, and leads with manual client id/secret entry plus the
callback URL to allow-list.

* Label the rejection-recovery CTA "Manually register an app"

Author: RhysSullivan

packages/react/src/components/add-account-modal.tsx

@@ -751,6 +751,10 @@ function AddAccountModalView(props: AddAccountModalProps) {
   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);
@@ -817,6 +821,7 @@ function AddAccountModalView(props: AddAccountModalProps) {
     setPickedApp(null);
     setOAuthFallbackProbe(null);
     setDcrFailed(false);
+    setDcrFallbackMessage(null);
   }, [initialState, allMethods, defaultOwner, ownerOptions]);
 
   useEffect(() => {
@@ -1004,6 +1009,7 @@ function AddAccountModalView(props: AddAccountModalProps) {
     setOnePasswordItemId("");
     setDcrFailed(false);
     setOAuthFallbackProbe(null);
+    setDcrFallbackMessage(null);
   };
 
   // A just-created custom method joins the in-session list and is auto-selected
@@ -1267,10 +1273,10 @@ function AddAccountModalView(props: AddAccountModalProps) {
     if (outcome.kind === "fallback") {
       setOAuthFallbackProbe("probe" in outcome ? outcome.probe : null);
       setDcrFailed(true);
-      toast.error(
-        ("message" in outcome ? outcome.message : undefined) ??
-          "Automatic setup unavailable. Register an app instead.",
-      );
+      // Surface the server's actionable rejection reason on the recovery view as
+      // an inline error card. Generic fallbacks (no message) fall through to the
+      // "register an app" empty state, which already guides the user.
+      setDcrFallbackMessage("message" in outcome ? (outcome.message ?? null) : null);
     }
   };
 
@@ -1342,6 +1348,7 @@ function AddAccountModalView(props: AddAccountModalProps) {
                 existingSlugs={[...oauthApps, ...oauthOtherApps].map((app: OAuthClientOption) =>
                   String(app.slug),
                 )}
+                autoRegisterRejectedReason={dcrFallbackMessage}
                 prefill={{
                   authorizationUrl:
                     oauthHandoffPrefill?.authorizationUrl ??
@@ -1511,6 +1518,22 @@ function AddAccountModalView(props: AddAccountModalProps) {
                               <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. */}
@@ -1529,7 +1552,9 @@ function AddAccountModalView(props: AddAccountModalProps) {
                                         size="sm"
                                         onClick={() => setRegisteringOAuthClient(true)}
                                       >
-                                        Register app
+                                        {dcrFallbackMessage
+                                          ? "Manually register an app"
+                                          : "Register app"}
                                       </Button>
                                       {oauthOtherApps.length > 0 && !showOtherApps ? (
                                         <Button

packages/react/src/components/oauth-client-form.tsx

@@ -88,6 +88,11 @@ export function OAuthClientForm(props: {
   readonly onCreated: (result: { readonly owner: Owner; readonly slug: OAuthClientSlug }) => void;
   readonly onCancel?: () => void;
   readonly surface?: "card" | "plain";
+  /** When set, the server's automatic (DCR) registration is known to be rejected
+   *  for this host (e.g. it refused our redirect URI). The form then suppresses
+   *  the "Register automatically" path and leads with manual client entry; the
+   *  string is the actionable reason shown to the user. */
+  readonly autoRegisterRejectedReason?: string | null;
 }) {
   const {
     integrationName,
@@ -98,6 +103,7 @@ export function OAuthClientForm(props: {
     onCreated,
     onCancel,
     surface = "card",
+    autoRegisterRejectedReason = null,
   } = props;
   // Non-org hosts (local/desktop) have one local workspace. Offer only Local,
   // so the owner dropdown (which hides on a single option) disappears.
@@ -178,6 +184,11 @@ export function OAuthClientForm(props: {
     tokenUrl.trim().length > 0 &&
     grant === "authorization_code";
 
+  // When the server already rejected automatic registration for this host (e.g.
+  // it refused our non-loopback redirect URI), don't lead the user back into the
+  // path that just failed: suppress the auto CTA and lead with manual entry.
+  const showAutoRegister = canRegisterDynamic && autoRegisterRejectedReason === null;
+
   const handleDiscover = async () => {
     const url = issuerUrl.trim();
     if (url.length === 0) {
@@ -283,12 +294,19 @@ export function OAuthClientForm(props: {
       <div className="space-y-1">
         <p className="text-sm font-medium">Register an OAuth app</p>
         <p className="text-xs text-muted-foreground">
-          {canRegisterDynamic
+          {showAutoRegister
             ? "Register automatically below, or enter a client id/secret manually."
             : "Paste a client id/secret. We only ask for endpoints when they aren't already known."}
         </p>
       </div>
 
+      {autoRegisterRejectedReason ? (
+        <div className="space-y-1 rounded-lg border border-destructive/40 bg-destructive/5 p-3">
+          <p className="text-sm font-medium text-destructive">Automatic registration unavailable</p>
+          <p className="text-xs text-muted-foreground">{autoRegisterRejectedReason}</p>
+        </div>
+      ) : null}
+
       {/* app name */}
       <div className="space-y-1.5">
         <Label htmlFor="oauth-app-name" className="text-xs text-muted-foreground">
@@ -305,7 +323,7 @@ export function OAuthClientForm(props: {
 
       {/* register automatically (RFC 7591 DCR) — the primary path when the
           server advertises a registration endpoint: no client id/secret needed */}
-      {canRegisterDynamic ? (
+      {showAutoRegister ? (
         <div className="space-y-2 rounded-lg border border-ring/40 bg-accent/30 p-3">
           <p className="text-sm font-medium">No client ID needed</p>
           <p className="text-xs text-muted-foreground">
@@ -365,7 +383,7 @@ export function OAuthClientForm(props: {
       </div>
 
       {/* divider before the manual (secondary) path when DCR is available */}
-      {canRegisterDynamic ? (
+      {showAutoRegister ? (
         <div className="flex items-center gap-2 text-xs text-muted-foreground">
           <span className="h-px flex-1 bg-border/60" />
           or enter a client ID manually