From f83cafcbacd520933cc07819985fa484e481f178 Mon Sep 17 00:00:00 2001 From: Devdatta Talele <50290838+devdattatalele@users.noreply.github.com> Date: Fri, 30 Jan 2026 22:57:44 +0530 Subject: [PATCH] feat: add PocketID OAuth provider support (#7318) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(oauth): add Pocket-ID OAuth provider component - Implements PocketIdSetting.svelte following Keycloak pattern - Configures OIDC endpoints for Pocket-ID (/authorize, /api/oidc/*) - Supports standard OIDC scopes (openid, profile, email) - Uses passkey-only authentication via Pocket-ID Refs #5678 * feat(oauth): register Pocket-ID in SSO provider list - Import PocketIdSetting component - Add Pocket-ID to provider list in SSO tab - Update exclusion filter to prevent duplicate custom entries Refs #5678 * fix(oauth): add missing PocketID icon and fix component integration - Create PocketIdIcon.svelte component with user profile icon - Register pocket-id in APP_TO_ICON_COMPONENT mapping - Fix PocketIdSetting to use IconedResourceType pattern matching other OAuth providers This resolves the issue where PocketID toggle was not appearing in SSO settings. Refs #5678 * refactor: migrate PocketIdSetting to Svelte 5 runes syntax - Use $props() with $bindable() for reactive prop binding - Use $state() for local reactive state - Use $derived() for computed values - Use $effect() for reactive side effects - Replace on:change with onchange event handler - Pre-populate base URL from existing config when editing - Clean up bracket notation to dot notation for value properties Addresses reviewer feedback * fix: rename pocket-id to pocketid for naming convention compliance Change identifier from 'pocket-id' to 'pocketid' to match Windmill's naming convention. No OAuth provider uses hyphens - all custom SSO providers (keycloak, authentik, authelia, kanidm, zitadel) use no separator. Changes: - AuthSettings.svelte: oauths['pocket-id'] → oauths['pocketid'] (2 locations) - PocketIdSetting.svelte: name={'pocket-id'} → name={'pocketid'} - icons/index.ts: 'pocket-id': PocketIdIcon → pocketid: PocketIdIcon Note: PocketID does not need oauth_connect.json entry as it's a custom SSO provider with user-configured endpoints, similar to Keycloak/Authentik. Addresses reviewer feedback * fix: use TextInput component for consistency --------- Co-authored-by: hugocasa --- .../src/lib/components/AuthSettings.svelte | 4 +- .../src/lib/components/PocketIdSetting.svelte | 80 +++++++++++++++++++ .../lib/components/icons/PocketIdIcon.svelte | 12 +++ frontend/src/lib/components/icons/index.ts | 4 +- 4 files changed, 98 insertions(+), 2 deletions(-) create mode 100644 frontend/src/lib/components/PocketIdSetting.svelte create mode 100644 frontend/src/lib/components/icons/PocketIdIcon.svelte diff --git a/frontend/src/lib/components/AuthSettings.svelte b/frontend/src/lib/components/AuthSettings.svelte index f63590858b..8d9d90ff2b 100644 --- a/frontend/src/lib/components/AuthSettings.svelte +++ b/frontend/src/lib/components/AuthSettings.svelte @@ -9,6 +9,7 @@ import CustomSso from './CustomSso.svelte' import AuthentikSetting from '$lib/components/AuthentikSetting.svelte' import AutheliaSetting from '$lib/components/AutheliaSetting.svelte' + import PocketIdSetting from '$lib/components/PocketIdSetting.svelte' import KanidmSetting from '$lib/components/KanidmSetting.svelte' import ZitadelSetting from '$lib/components/ZitadelSetting.svelte' import NextcloudSetting from '$lib/components/NextcloudSetting.svelte' @@ -258,11 +259,12 @@ + {#each Object.keys(oauths) as k} - {#if !['authelia', 'authentik', 'google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'auth0', 'keycloak', 'slack', 'kanidm', 'zitadel', 'nextcloud'].includes(k) && oauths[k] && 'login_config' in oauths[k]} + {#if !['authelia', 'authentik', 'google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'auth0', 'keycloak', 'slack', 'kanidm', 'zitadel', 'nextcloud', 'pocketid'].includes(k) && oauths[k] && 'login_config' in oauths[k]} {#if oauths[k]}
diff --git a/frontend/src/lib/components/PocketIdSetting.svelte b/frontend/src/lib/components/PocketIdSetting.svelte new file mode 100644 index 0000000000..76d308b786 --- /dev/null +++ b/frontend/src/lib/components/PocketIdSetting.svelte @@ -0,0 +1,80 @@ + + +
+ + + {#if enabled} +
+ + + + +
+ {/if} +
diff --git a/frontend/src/lib/components/icons/PocketIdIcon.svelte b/frontend/src/lib/components/icons/PocketIdIcon.svelte new file mode 100644 index 0000000000..c1d98755ce --- /dev/null +++ b/frontend/src/lib/components/icons/PocketIdIcon.svelte @@ -0,0 +1,12 @@ + + + + + diff --git a/frontend/src/lib/components/icons/index.ts b/frontend/src/lib/components/icons/index.ts index 37cebf804c..07f74d477f 100644 --- a/frontend/src/lib/components/icons/index.ts +++ b/frontend/src/lib/components/icons/index.ts @@ -103,6 +103,7 @@ import ApifyIcon from './ApifyIcon.svelte' import McpIcon from './McpIcon.svelte' import SageIcon from './SageIcon.svelte' import ZohoIcon from './ZohoIcon.svelte' +import PocketIdIcon from './PocketIdIcon.svelte' import type { Component } from 'svelte' export const APP_TO_ICON_COMPONENT = { postgresql: PostgresIcon, @@ -211,7 +212,8 @@ export const APP_TO_ICON_COMPONENT = { mqtt: MqttIcon, apify: ApifyIcon, mcp: McpIcon, - zoho: ZohoIcon + zoho: ZohoIcon, + pocketid: PocketIdIcon } as unknown as Record // to generate correct svelte package types export {