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"

Rhys Sullivan committed 4 months ago

Commit b38df801 parent edc44112 files · +51 −8Browse files

Unified · Split

2 files

packages/react/src/components/add-account-modal.tsx +30 −5
packages/react/src/components/oauth-client-form.tsx +21 −3

packages/react/src/components/add-account-modal.tsx+30−5

   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);
     }
   };
                 existingSlugs={[...oauthApps, ...oauthOtherApps].map((app: OAuthClientOption) =>
                   String(app.slug),
                 )}
+                autoRegisterRejectedReason={dcrFallbackMessage}
                 prefill={{
                   authorizationUrl:
                     oauthHandoffPrefill?.authorizationUrl ??
                               <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. */}
                                         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+21−3

   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,
     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.
     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) {
       <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">
       {/* 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">
       </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