Better external OAuth callback format

2026-03-24 18:31:16 +01:00 · 2026-03-04 09:10:49 -08:00
parent 30f006401a
commit 0c7051d59c
4 changed files with 131 additions and 105 deletions
--- a/packages/plugin-runtime-types/src/bindings/gen_events.ts
+++ b/packages/plugin-runtime-types/src/bindings/gen_events.ts
@@ -18,12 +18,12 @@ export type CallHttpAuthenticationActionRequest = { index: number, pluginRefId:

 export type CallHttpAuthenticationRequest = { contextId: string, values: { [key in string]?: JsonPrimitive }, method: string, url: string, headers: Array<HttpHeader>, };

-export type CallHttpAuthenticationResponse = { 
+export type CallHttpAuthenticationResponse = {
 /**
 * HTTP headers to add to the request. Existing headers will be replaced, while
 * new headers will be added.
 */
-setHeaders?: Array<HttpHeader>, 
+setHeaders?: Array<HttpHeader>,
 /**
 * Query parameters to add to the request. Existing params will be replaced, while
 * new params will be added.
@@ -78,7 +78,7 @@ export type ExportHttpRequestRequest = { httpRequest: HttpRequest, };

 export type ExportHttpRequestResponse = { content: string, };

-export type FileFilter = { name: string, 
+export type FileFilter = { name: string,
 /**
 * File extensions to require
 */
@@ -100,149 +100,149 @@ export type FormInputAccordion = { label: string, inputs?: Array<FormInput>, hid

 export type FormInputBanner = { inputs?: Array<FormInput>, hidden?: boolean, color?: Color, };

-export type FormInputBase = { 
+export type FormInputBase = {
 /**
 * The name of the input. The value will be stored at this object attribute in the resulting data
 */
-name: string, 
+name: string,
 /**
 * Whether this input is visible for the given configuration. Use this to
 * make branching forms.
 */
-hidden?: boolean, 
+hidden?: boolean,
 /**
 * Whether the user must fill in the argument
 */
-optional?: boolean, 
+optional?: boolean,
 /**
 * The label of the input
 */
-label?: string, 
+label?: string,
 /**
 * Visually hide the label of the input
 */
-hideLabel?: boolean, 
+hideLabel?: boolean,
 /**
 * The default value
 */
-defaultValue?: string, disabled?: boolean, 
+defaultValue?: string, disabled?: boolean,
 /**
 * Longer description of the input, likely shown in a tooltip
 */
 description?: string, };

-export type FormInputCheckbox = { 
+export type FormInputCheckbox = {
 /**
 * The name of the input. The value will be stored at this object attribute in the resulting data
 */
-name: string, 
+name: string,
 /**
 * Whether this input is visible for the given configuration. Use this to
 * make branching forms.
 */
-hidden?: boolean, 
+hidden?: boolean,
 /**
 * Whether the user must fill in the argument
 */
-optional?: boolean, 
+optional?: boolean,
 /**
 * The label of the input
 */
-label?: string, 
+label?: string,
 /**
 * Visually hide the label of the input
 */
-hideLabel?: boolean, 
+hideLabel?: boolean,
 /**
 * The default value
 */
-defaultValue?: string, disabled?: boolean, 
+defaultValue?: string, disabled?: boolean,
 /**
 * Longer description of the input, likely shown in a tooltip
 */
 description?: string, };

-export type FormInputEditor = { 
+export type FormInputEditor = {
 /**
 * Placeholder for the text input
 */
-placeholder?: string | null, 
+placeholder?: string | null,
 /**
 * Don't show the editor gutter (line numbers, folds, etc.)
 */
-hideGutter?: boolean, 
+hideGutter?: boolean,
 /**
 * Language for syntax highlighting
 */
-language?: EditorLanguage, readOnly?: boolean, 
+language?: EditorLanguage, readOnly?: boolean,
 /**
 * Fixed number of visible rows
 */
-rows?: number, completionOptions?: Array<GenericCompletionOption>, 
+rows?: number, completionOptions?: Array<GenericCompletionOption>,
 /**
 * The name of the input. The value will be stored at this object attribute in the resulting data
 */
-name: string, 
+name: string,
 /**
 * Whether this input is visible for the given configuration. Use this to
 * make branching forms.
 */
-hidden?: boolean, 
+hidden?: boolean,
 /**
 * Whether the user must fill in the argument
 */
-optional?: boolean, 
+optional?: boolean,
 /**
 * The label of the input
 */
-label?: string, 
+label?: string,
 /**
 * Visually hide the label of the input
 */
-hideLabel?: boolean, 
+hideLabel?: boolean,
 /**
 * The default value
 */
-defaultValue?: string, disabled?: boolean, 
+defaultValue?: string, disabled?: boolean,
 /**
 * Longer description of the input, likely shown in a tooltip
 */
 description?: string, };

-export type FormInputFile = { 
+export type FormInputFile = {
 /**
 * The title of the file selection window
 */
-title: string, 
+title: string,
 /**
 * Allow selecting multiple files
 */
-multiple?: boolean, directory?: boolean, defaultPath?: string, filters?: Array<FileFilter>, 
+multiple?: boolean, directory?: boolean, defaultPath?: string, filters?: Array<FileFilter>,
 /**
 * The name of the input. The value will be stored at this object attribute in the resulting data
 */
-name: string, 
+name: string,
 /**
 * Whether this input is visible for the given configuration. Use this to
 * make branching forms.
 */
-hidden?: boolean, 
+hidden?: boolean,
 /**
 * Whether the user must fill in the argument
 */
-optional?: boolean, 
+optional?: boolean,
 /**
 * The label of the input
 */
-label?: string, 
+label?: string,
 /**
 * Visually hide the label of the input
 */
-hideLabel?: boolean, 
+hideLabel?: boolean,
 /**
 * The default value
 */
-defaultValue?: string, disabled?: boolean, 
+defaultValue?: string, disabled?: boolean,
 /**
 * Longer description of the input, likely shown in a tooltip
 */
@@ -250,63 +250,63 @@ description?: string, };

 export type FormInputHStack = { inputs?: Array<FormInput>, hidden?: boolean, };

-export type FormInputHttpRequest = { 
+export type FormInputHttpRequest = {
 /**
 * The name of the input. The value will be stored at this object attribute in the resulting data
 */
-name: string, 
+name: string,
 /**
 * Whether this input is visible for the given configuration. Use this to
 * make branching forms.
 */
-hidden?: boolean, 
+hidden?: boolean,
 /**
 * Whether the user must fill in the argument
 */
-optional?: boolean, 
+optional?: boolean,
 /**
 * The label of the input
 */
-label?: string, 
+label?: string,
 /**
 * Visually hide the label of the input
 */
-hideLabel?: boolean, 
+hideLabel?: boolean,
 /**
 * The default value
 */
-defaultValue?: string, disabled?: boolean, 
+defaultValue?: string, disabled?: boolean,
 /**
 * Longer description of the input, likely shown in a tooltip
 */
 description?: string, };

-export type FormInputKeyValue = { 
+export type FormInputKeyValue = {
 /**
 * The name of the input. The value will be stored at this object attribute in the resulting data
 */
-name: string, 
+name: string,
 /**
 * Whether this input is visible for the given configuration. Use this to
 * make branching forms.
 */
-hidden?: boolean, 
+hidden?: boolean,
 /**
 * Whether the user must fill in the argument
 */
-optional?: boolean, 
+optional?: boolean,
 /**
 * The label of the input
 */
-label?: string, 
+label?: string,
 /**
 * Visually hide the label of the input
 */
-hideLabel?: boolean, 
+hideLabel?: boolean,
 /**
 * The default value
 */
-defaultValue?: string, disabled?: boolean, 
+defaultValue?: string, disabled?: boolean,
 /**
 * Longer description of the input, likely shown in a tooltip
 */
@@ -314,36 +314,36 @@ description?: string, };

 export type FormInputMarkdown = { content: string, hidden?: boolean, };

-export type FormInputSelect = { 
+export type FormInputSelect = {
 /**
 * The options that will be available in the select input
 */
-options: Array<FormInputSelectOption>, 
+options: Array<FormInputSelectOption>,
 /**
 * The name of the input. The value will be stored at this object attribute in the resulting data
 */
-name: string, 
+name: string,
 /**
 * Whether this input is visible for the given configuration. Use this to
 * make branching forms.
 */
-hidden?: boolean, 
+hidden?: boolean,
 /**
 * Whether the user must fill in the argument
 */
-optional?: boolean, 
+optional?: boolean,
 /**
 * The label of the input
 */
-label?: string, 
+label?: string,
 /**
 * Visually hide the label of the input
 */
-hideLabel?: boolean, 
+hideLabel?: boolean,
 /**
 * The default value
 */
-defaultValue?: string, disabled?: boolean, 
+defaultValue?: string, disabled?: boolean,
 /**
 * Longer description of the input, likely shown in a tooltip
 */
@@ -351,44 +351,44 @@ description?: string, };

 export type FormInputSelectOption = { label: string, value: string, };

-export type FormInputText = { 
+export type FormInputText = {
 /**
 * Placeholder for the text input
 */
-placeholder?: string | null, 
+placeholder?: string | null,
 /**
 * Placeholder for the text input
 */
-password?: boolean, 
+password?: boolean,
 /**
 * Whether to allow newlines in the input, like a <textarea/>
 */
-multiLine?: boolean, completionOptions?: Array<GenericCompletionOption>, 
+multiLine?: boolean, completionOptions?: Array<GenericCompletionOption>,
 /**
 * The name of the input. The value will be stored at this object attribute in the resulting data
 */
-name: string, 
+name: string,
 /**
 * Whether this input is visible for the given configuration. Use this to
 * make branching forms.
 */
-hidden?: boolean, 
+hidden?: boolean,
 /**
 * Whether the user must fill in the argument
 */
-optional?: boolean, 
+optional?: boolean,
 /**
 * The label of the input
 */
-label?: string, 
+label?: string,
 /**
 * Visually hide the label of the input
 */
-hideLabel?: boolean, 
+hideLabel?: boolean,
 /**
 * The default value
 */
-defaultValue?: string, disabled?: boolean, 
+defaultValue?: string, disabled?: boolean,
 /**
 * Longer description of the input, likely shown in a tooltip
 */
@@ -474,7 +474,7 @@ export type ListOpenWorkspacesResponse = { workspaces: Array<WorkspaceInfo>, };

 export type OpenExternalUrlRequest = { url: string, };

-export type OpenWindowRequest = { url: string, 
+export type OpenWindowRequest = { url: string,
 /**
 * Label for the window. If not provided, a random one will be generated.
 */
@@ -486,15 +486,15 @@ export type PromptFormRequest = { id: string, title: string, description?: strin

 export type PromptFormResponse = { values: { [key in string]?: JsonPrimitive } | null, done?: boolean, };

-export type PromptTextRequest = { id: string, title: string, label: string, description?: string, defaultValue?: string, placeholder?: string, 
+export type PromptTextRequest = { id: string, title: string, label: string, description?: string, defaultValue?: string, placeholder?: string,
 /**
 * Text to add to the confirmation button
 */
-confirmText?: string, password?: boolean, 
+confirmText?: string, password?: boolean,
 /**
 * Text to add to the cancel button
 */
-cancelText?: string, 
+cancelText?: string,
 /**
 * Require the user to enter a non-empty value
 */
@@ -524,12 +524,12 @@ export type SetKeyValueResponse = {};

 export type ShowToastRequest = { message: string, color?: Color, icon?: Icon, timeout?: number, };

-export type TemplateFunction = { name: string, previewType?: TemplateFunctionPreviewType, description?: string, 
+export type TemplateFunction = { name: string, previewType?: TemplateFunctionPreviewType, description?: string,
 /**
 * Also support alternative names. This is useful for not breaking existing
 * tags when changing the `name` property
 */
-aliases?: Array<string>, args: Array<TemplateFunctionArg>, 
+aliases?: Array<string>, args: Array<TemplateFunctionArg>,
 /**
 * A list of arg names to show in the inline preview. If not provided, none will be shown (for privacy reasons).
 */
@@ -546,23 +546,23 @@ export type TemplateRenderRequest = { data: JsonValue, purpose: RenderPurpose, }

 export type TemplateRenderResponse = { data: JsonValue, };

-export type Theme = { 
+export type Theme = {
 /**
 * How the theme is identified. This should never be changed
 */
-id: string, 
+id: string,
 /**
 * The friendly name of the theme to be displayed to the user
 */
-label: string, 
+label: string,
 /**
 * Whether the theme will be used for dark or light appearance
 */
-dark: boolean, 
+dark: boolean,
 /**
 * The default top-level colors for the theme
 */
-base: ThemeComponentColors, 
+base: ThemeComponentColors,
 /**
 * Optionally override theme for individual UI components for more control
 */
--- a/packages/plugin-runtime-types/src/bindings/gen_models.ts
+++ b/packages/plugin-runtime-types/src/bindings/gen_models.ts
@@ -18,7 +18,12 @@ export type EditorKeymap = "default" | "vim" | "vscode" | "emacs";

 export type EncryptedKey = { encryptedKey: string, };

-export type Environment = { model: "environment", id: string, workspaceId: string, createdAt: string, updatedAt: string, name: string, public: boolean, parentModel: string, parentId: string | null, variables: Array<EnvironmentVariable>, color: string | null, sortPriority: number, };
+export type Environment = { model: "environment", id: string, workspaceId: string, createdAt: string, updatedAt: string, name: string, public: boolean, parentModel: string, parentId: string | null, 
+/**
+ * Variables defined in this environment scope.
+ * Child environments override parent variables by name.
+ */
+variables: Array<EnvironmentVariable>, color: string | null, sortPriority: number, };

 export type EnvironmentVariable = { enabled?: boolean, name: string, value: string, id?: string, };

@@ -34,9 +39,17 @@ export type GrpcEvent = { model: "grpc_event", id: string, createdAt: string, up

 export type GrpcEventType = "info" | "error" | "client_message" | "server_message" | "connection_start" | "connection_end";

-export type GrpcRequest = { model: "grpc_request", id: string, createdAt: string, updatedAt: string, workspaceId: string, folderId: string | null, authenticationType: string | null, authentication: Record<string, any>, description: string, message: string, metadata: Array<HttpRequestHeader>, method: string | null, name: string, service: string | null, sortPriority: number, url: string, };
+export type GrpcRequest = { model: "grpc_request", id: string, createdAt: string, updatedAt: string, workspaceId: string, folderId: string | null, authenticationType: string | null, authentication: Record<string, any>, description: string, message: string, metadata: Array<HttpRequestHeader>, method: string | null, name: string, service: string | null, sortPriority: number, 
+/**
+ * Server URL (http for plaintext or https for secure)
+ */
+url: string, };

-export type HttpRequest = { model: "http_request", id: string, createdAt: string, updatedAt: string, workspaceId: string, folderId: string | null, authentication: Record<string, any>, authenticationType: string | null, body: Record<string, any>, bodyType: string | null, description: string, headers: Array<HttpRequestHeader>, method: string, name: string, sortPriority: number, url: string, urlParameters: Array<HttpUrlParameter>, };
+export type HttpRequest = { model: "http_request", id: string, createdAt: string, updatedAt: string, workspaceId: string, folderId: string | null, authentication: Record<string, any>, authenticationType: string | null, body: Record<string, any>, bodyType: string | null, description: string, headers: Array<HttpRequestHeader>, method: string, name: string, sortPriority: number, url: string, 
+/**
+ * URL parameters used for both path placeholders (`:id`) and query string entries.
+ */
+urlParameters: Array<HttpUrlParameter>, };

 export type HttpRequestHeader = { enabled?: boolean, name: string, value: string, id?: string, };

@@ -55,11 +68,18 @@ export type HttpResponseHeader = { name: string, value: string, };

 export type HttpResponseState = "initialized" | "connected" | "closed";

-export type HttpUrlParameter = { enabled?: boolean, name: string, value: string, id?: string, };
+export type HttpUrlParameter = { enabled?: boolean, 
+/**
+ * Colon-prefixed parameters are treated as path parameters if they match, like `/users/:id`
+ * Other entries are appended as query parameters
+ */
+name: string, value: string, id?: string, };

 export type KeyValue = { model: "key_value", id: string, createdAt: string, updatedAt: string, key: string, namespace: string, value: string, };

-export type Plugin = { model: "plugin", id: string, createdAt: string, updatedAt: string, checkedAt: string | null, directory: string, enabled: boolean, url: string | null, };
+export type Plugin = { model: "plugin", id: string, createdAt: string, updatedAt: string, checkedAt: string | null, directory: string, enabled: boolean, url: string | null, source: PluginSource, };
+
+export type PluginSource = "bundled" | "filesystem" | "registry";

 export type ProxySetting = { "type": "enabled", http: string, https: string, auth: ProxySettingAuth | null, bypass: string, disabled: boolean, } | { "type": "disabled" };

@@ -77,7 +97,11 @@ export type WebsocketEvent = { model: "websocket_event", id: string, createdAt:

 export type WebsocketEventType = "binary" | "close" | "frame" | "open" | "ping" | "pong" | "text";

-export type WebsocketRequest = { model: "websocket_request", id: string, createdAt: string, updatedAt: string, workspaceId: string, folderId: string | null, authentication: Record<string, any>, authenticationType: string | null, description: string, headers: Array<HttpRequestHeader>, message: string, name: string, sortPriority: number, url: string, urlParameters: Array<HttpUrlParameter>, };
+export type WebsocketRequest = { model: "websocket_request", id: string, createdAt: string, updatedAt: string, workspaceId: string, folderId: string | null, authentication: Record<string, any>, authenticationType: string | null, description: string, headers: Array<HttpRequestHeader>, message: string, name: string, sortPriority: number, url: string, 
+/**
+ * URL parameters used for both path placeholders (`:id`) and query string entries.
+ */
+urlParameters: Array<HttpUrlParameter>, };

 export type Workspace = { model: "workspace", id: string, createdAt: string, updatedAt: string, authentication: Record<string, any>, authenticationType: string | null, description: string, headers: Array<HttpRequestHeader>, name: string, encryptionKeyChallenge: string | null, settingValidateCertificates: boolean, settingFollowRedirects: boolean, settingRequestTimeout: number, settingDnsOverrides: Array<DnsOverride>, };

--- a/plugins/auth-oauth2/src/callbackServer.ts
+++ b/plugins/auth-oauth2/src/callbackServer.ts
@@ -2,7 +2,7 @@ import type { IncomingMessage, ServerResponse } from 'node:http';
 import http from 'node:http';
 import type { Context } from '@yaakapp/api';

-export const HOSTED_CALLBACK_URL = 'https://oauth.yaak.app/redirect';
+export const HOSTED_CALLBACK_URL_BASE = 'https://oauth.yaak.app/redirect';
 export const DEFAULT_LOCALHOST_PORT = 8765;
 const CALLBACK_TIMEOUT_MS = 5 * 60 * 1000; // 5 minutes

@@ -176,12 +176,15 @@ export function startCallbackServer(options: {

 /**
 * Build the redirect URI for the hosted callback page.
- * The hosted page will redirect to the local server with the OAuth response.
+ * The port is encoded in the URL path so the hosted page can redirect
+ * to the local server without relying on query params (which some OAuth
+ * providers strip). The default port is omitted for a cleaner URL.
 */
-export function buildHostedCallbackRedirectUri(localPort: number, localPath: string): string {
-  const localRedirectUri = `http://127.0.0.1:${localPort}${localPath}`;
-  // The hosted callback page will read params and redirect to the local server
-  return `${HOSTED_CALLBACK_URL}?redirect_to=${encodeURIComponent(localRedirectUri)}`;
+export function buildHostedCallbackRedirectUri(localPort: number): string {
+  if (localPort === DEFAULT_LOCALHOST_PORT) {
+    return HOSTED_CALLBACK_URL_BASE;
+  }
+  return `${HOSTED_CALLBACK_URL_BASE}/${localPort}`;
 }

 /**
@@ -213,14 +216,9 @@ export async function getRedirectUrlViaExternalBrowser(
 ): Promise<{ callbackUrl: string; redirectUri: string }> {
  const { callbackType, callbackPort } = options;

-  // Determine port based on callback type:
-  // - localhost: use specified port or default stable port
-  // - hosted: use random port (0) since hosted page redirects to local
-  const port = callbackType === 'localhost' ? (callbackPort ?? DEFAULT_LOCALHOST_PORT) : 0;
+  const port = callbackPort ?? DEFAULT_LOCALHOST_PORT;

-  console.log(
-    `[oauth2] Starting callback server (type: ${callbackType}, port: ${port || 'random'})`,
-  );
+  console.log(`[oauth2] Starting callback server (type: ${callbackType}, port: ${port})`);

  const server = await startCallbackServer({
    port,
@@ -232,7 +230,7 @@ export async function getRedirectUrlViaExternalBrowser(
    let oauthRedirectUri: string;

    if (callbackType === 'hosted') {
-      oauthRedirectUri = buildHostedCallbackRedirectUri(server.port, '/callback');
+      oauthRedirectUri = buildHostedCallbackRedirectUri(server.port);
      console.log('[oauth2] Using hosted callback redirect:', oauthRedirectUri);
    } else {
      oauthRedirectUri = server.redirectUri;
--- a/plugins/auth-oauth2/src/index.ts
+++ b/plugins/auth-oauth2/src/index.ts
@@ -6,7 +6,12 @@ import type {
  PluginDefinition,
 } from '@yaakapp/api';
 import type { Algorithm } from 'jsonwebtoken';
-import { DEFAULT_LOCALHOST_PORT, HOSTED_CALLBACK_URL, stopActiveServer } from './callbackServer';
+import {
+  buildHostedCallbackRedirectUri,
+  DEFAULT_LOCALHOST_PORT,
+  HOSTED_CALLBACK_URL_BASE,
+  stopActiveServer,
+} from './callbackServer';
 import {
  type CallbackType,
  DEFAULT_PKCE_METHOD,
@@ -300,8 +305,7 @@ export const plugin: PluginDefinition = {
                optional: true,
                dynamic: hiddenIfNot(
                  ['authorization_code', 'implicit'],
-                  ({ useExternalBrowser, callbackType }) =>
-                    !!useExternalBrowser && callbackType === 'localhost',
+                  ({ useExternalBrowser }) => !!useExternalBrowser,
                ),
              },
            ],
@@ -328,11 +332,11 @@ export const plugin: PluginDefinition = {
                  }

                  // Compute the redirect URI based on callback type
+                  const port = intArg(values, 'callbackPort') || DEFAULT_LOCALHOST_PORT;
                  let redirectUri: string;
                  if (callbackType === 'hosted') {
-                    redirectUri = HOSTED_CALLBACK_URL;
+                    redirectUri = buildHostedCallbackRedirectUri(port);
                  } else {
-                    const port = intArg(values, 'callbackPort') || DEFAULT_LOCALHOST_PORT;
                    redirectUri = `http://127.0.0.1:${port}/callback`;
                  }