From 3e7b145a4884287d1bc91060a3567df3cd6bcec1 Mon Sep 17 00:00:00 2001 From: Steven Nguyen Date: Mon, 4 Mar 2024 17:32:27 -0800 Subject: [PATCH] refactor(auth): refactor OAuth2 providers Build a lookup table of provider information into the Console so that it can be used for user identities and account identities. This is necessary because it's not possible to fetch the console project to get the oAuthProviders. --- src/lib/stores/oauth-providers.ts | 402 ++++++++++-------- .../auth/(providers)/appleOAuth.svelte | 9 +- .../auth/(providers)/auth0OAuth.svelte | 12 +- .../auth/(providers)/authentikOAuth.svelte | 12 +- .../auth/(providers)/gitlabOAuth.svelte | 12 +- .../auth/(providers)/googleOAuth.svelte | 13 +- .../auth/(providers)/mainOAuth.svelte | 13 +- .../auth/(providers)/microsoftOAuth.svelte | 13 +- .../auth/(providers)/oidcOAuth.svelte | 9 +- .../auth/(providers)/oktaOAuth.svelte | 9 +- .../auth/settings/+page.svelte | 71 ++-- .../project-[project]/auth/updateOAuth.ts | 5 +- .../auth/user-[user]/identities/table.svelte | 12 +- 13 files changed, 338 insertions(+), 254 deletions(-) diff --git a/src/lib/stores/oauth-providers.ts b/src/lib/stores/oauth-providers.ts index 8d08dffdb..2cb2ddd3f 100644 --- a/src/lib/stores/oauth-providers.ts +++ b/src/lib/stores/oauth-providers.ts @@ -1,6 +1,4 @@ -import type { Models } from '@appwrite.io/console'; import type { SvelteComponent } from 'svelte'; -import { writable } from 'svelte/store'; import Apple from '../../routes/console/project-[project]/auth/(providers)/appleOAuth.svelte'; import Auth0 from '../../routes/console/project-[project]/auth/(providers)/auth0OAuth.svelte'; import Authentik from '../../routes/console/project-[project]/auth/(providers)/authentikOAuth.svelte'; @@ -11,176 +9,240 @@ import Microsoft from '../../routes/console/project-[project]/auth/(providers)/m import Oidc from '../../routes/console/project-[project]/auth/(providers)/oidcOAuth.svelte'; import Okta from '../../routes/console/project-[project]/auth/(providers)/oktaOAuth.svelte'; -export type Provider = Models.AuthProvider & { +export type Provider = { + name: string; icon: string; docs?: string; - component?: typeof SvelteComponent; + component: typeof SvelteComponent; }; -export type Providers = { - providers: Provider[]; +export const oAuthProviders: Record = { + amazon: { + name: 'Amazon', + icon: 'amazon', + docs: 'https://developer.amazon.com/apps-and-games/services-and-apis', + component: Main + }, + apple: { + name: 'Apple', + icon: 'apple', + docs: 'https://developer.apple.com/', + component: Apple + }, + auth0: { + name: 'Auth0', + icon: 'auth0', + docs: 'https://auth0.com/developers', + component: Auth0 + }, + authentik: { + name: 'Authentik', + icon: 'authentik', + docs: 'https://goauthentik.io/integrations/sources/oauth/', + component: Authentik + }, + autodesk: { + name: 'Autodesk', + icon: 'autodesk', + docs: 'https://forge.autodesk.com/en/docs/oauth/v2/developers_guide/overview/', + component: Main + }, + bitbucket: { + name: 'Bitbucket', + icon: 'bitbucket', + docs: 'https://developer.atlassian.com/bitbucket', + component: Main + }, + bitly: { + name: 'Bitly', + icon: 'bitly', + docs: 'https://dev.bitly.com/v4_documentation.html', + component: Main + }, + box: { + name: 'Box', + icon: 'box', + docs: 'https://developer.box.com/reference/', + component: Main + }, + dailymotion: { + name: 'Dailymotion', + icon: 'dailymotion', + docs: 'https://developers.dailymotion.com/api/', + component: Main + }, + discord: { + name: 'Discord', + icon: 'discord', + docs: 'https://discordapp.com/developers/docs/topics/oauth2', + component: Main + }, + disqus: { + name: 'Disqus', + icon: 'disqus', + docs: 'https://disqus.com/api/docs/auth/', + component: Main + }, + dropbox: { + name: 'Dropbox', + icon: 'dropbox', + docs: 'https://www.dropbox.com/developers/documentation', + component: Main + }, + etsy: { + name: 'Etsy', + icon: 'etsy', + docs: 'https://developers.etsy.com/', + component: Main + }, + facebook: { + name: 'Facebook', + icon: 'facebook', + docs: 'https://developers.facebook.com/', + component: Main + }, + github: { + name: 'GitHub', + icon: 'github', + docs: 'https://developer.github.com', + component: Main + }, + gitlab: { + name: 'GitLab', + icon: 'gitlab', + docs: 'https://docs.gitlab.com/ee/api/', + component: GitLab + }, + google: { + name: 'Google', + icon: 'google', + docs: 'https://support.google.com/googleapi/answer/6158849', + component: Google + }, + linkedin: { + name: 'LinkedIn', + icon: 'linkedin', + docs: 'https://developer.linkedin.com/', + component: Main + }, + microsoft: { + name: 'Microsoft', + icon: 'microsoft', + docs: 'https://developer.microsoft.com/en-us/', + component: Microsoft + }, + notion: { + name: 'Notion', + icon: 'notion', + docs: 'https://developers.notion.com/docs', + component: Main + }, + oidc: { + name: 'OIDC', + icon: 'oidc', + docs: 'https://openid.net/connect/faq/', + component: Oidc + }, + okta: { + name: 'Okta', + icon: 'okta', + docs: 'https://developer.okta.com', + component: Okta + }, + paypal: { + name: 'Paypal', + icon: 'paypal', + docs: 'https://developer.paypal.com/docs/api/overview/', + component: Main + }, + paypalsandbox: { + name: 'Paypal Sandbox', + icon: 'paypal', + docs: 'https://developer.paypal.com/docs/api/overview/', + component: Main + }, + podio: { + name: 'Podio', + icon: 'podio', + docs: 'https://developers.podio.com/doc/oauth-authorization', + component: Main + }, + salesforce: { + name: 'Salesforce', + icon: 'salesforce', + docs: 'https://developer.salesforce.com/docs/', + component: Main + }, + slack: { + name: 'Slack', + icon: 'slack', + docs: 'https://api.slack.com/', + component: Main + }, + spotify: { + name: 'Spotify', + icon: 'spotify', + docs: 'https://developer.spotify.com/documentation/general/guides/authorization-guide/', + component: Main + }, + stripe: { + name: 'Stripe', + icon: 'stripe', + docs: 'https://stripe.com/docs/api', + component: Main + }, + tradeshift: { + name: 'Tradeshift', + icon: 'tradeshift', + docs: 'https://developers.tradeshift.com/docs/api', + component: Main + }, + tradeshiftBox: { + name: 'Tradeshift Sandbox', + icon: 'tradeshift', + docs: 'https://developers.tradeshift.com/docs/api', + component: Main + }, + twitch: { + name: 'Twitch', + icon: 'twitch', + docs: 'https://dev.twitch.tv/docs/auth', + component: Main + }, + wordpress: { + name: 'Wordpress', + icon: 'wordpress', + docs: 'https://developer.wordpress.com/docs/oauth2/', + component: Main + }, + yahoo: { + name: 'Yahoo', + icon: 'yahoo', + docs: 'https://developer.yahoo.com/oauth2/guide/flows_authcode/', + component: Main + }, + yammer: { + name: 'Yammer', + icon: 'yammer', + docs: 'https://developer.yammer.com/docs/oauth-2', + component: Main + }, + yandex: { + name: 'Yandex', + icon: 'yandex', + docs: 'https://tech.yandex.com/oauth/', + component: Main + }, + zoho: { + name: 'Zoho', + icon: 'zoho', + docs: 'https://www.zoho.com/crm/developer/docs/api/oauth-overview.html', + component: Main + }, + zoom: { + name: 'Zoom', + icon: 'zoom', + docs: 'https://marketplace.zoom.us/docs/guides/auth/oauth/', + component: Main + } }; - -const setProviders = (project: Models.Project): Provider[] => { - return ( - project?.oAuthProviders.map((n) => { - let docs: Provider['docs']; - let icon: Provider['icon'] = n.key.toLowerCase(); - let component: Provider['component'] = Main; - - switch (n.key.toLowerCase()) { - case 'amazon': - docs = 'https://developer.amazon.com/apps-and-games/services-and-apis'; - break; - case 'apple': - docs = 'https://developer.apple.com/'; - component = Apple; - break; - case 'auth0': - docs = 'https://auth0.com/developers'; - component = Auth0; - break; - case 'authentik': - docs = 'https://goauthentik.io/integrations/sources/oauth/'; - component = Authentik; - break; - case 'autodesk': - docs = 'https://forge.autodesk.com/en/docs/oauth/v2/developers_guide/overview/'; - break; - case 'bitbucket': - docs = 'https://developer.atlassian.com/bitbucket'; - break; - case 'bitly': - docs = 'https://dev.bitly.com/v4_documentation.html'; - break; - case 'box': - docs = 'https://developer.box.com/reference/'; - break; - case 'dailymotion': - docs = 'https://developers.dailymotion.com/api/'; - break; - case 'discord': - docs = 'https://discordapp.com/developers/docs/topics/oauth2'; - break; - case 'disqus': - docs = 'https://disqus.com/api/docs/auth/'; - break; - case 'dropbox': - docs = 'https://www.dropbox.com/developers/documentation'; - break; - case 'etsy': - docs = 'https://developers.etsy.com/'; - break; - case 'facebook': - docs = 'https://developers.facebook.com/'; - break; - case 'github': - docs = 'https://developer.github.com'; - break; - case 'gitlab': - docs = 'https://docs.gitlab.com/ee/api/'; - component = GitLab; - break; - case 'google': - docs = 'https://support.google.com/googleapi/answer/6158849'; - component = Google; - break; - case 'linkedin': - docs = 'https://developer.linkedin.com/'; - break; - case 'microsoft': - docs = 'https://developer.microsoft.com/en-us/'; - component = Microsoft; - break; - case 'notion': - docs = 'https://developers.notion.com/docs'; - break; - case 'oidc': - docs = 'https://openid.net/connect/faq/'; - component = Oidc; - break; - case 'okta': - docs = 'https://developer.okta.com'; - component = Okta; - break; - case 'paypal': - docs = 'https://developer.paypal.com/docs/api/overview/'; - break; - case 'paypalsandbox': - icon = 'paypal'; - docs = 'https://developer.paypal.com/docs/api/overview/'; - break; - case 'podio': - docs = 'https://developers.podio.com/doc/oauth-authorization'; - break; - case 'salesforce': - docs = 'https://developer.salesforce.com/docs/'; - break; - case 'slack': - docs = 'https://api.slack.com/'; - break; - case 'spotify': - docs = - 'https://developer.spotify.com/documentation/general/guides/authorization-guide/'; - break; - case 'stripe': - docs = 'https://stripe.com/docs/api'; - break; - case 'tradeshift': - docs = 'https://developers.tradeshift.com/docs/api'; - break; - case 'tradeshiftbox': - icon = 'tradeshift'; - docs = 'https://developers.tradeshift.com/docs/api'; - break; - case 'twitch': - docs = 'https://dev.twitch.tv/docs/auth'; - break; - case 'wordpress': - docs = 'https://developer.wordpress.com/docs/oauth2/'; - break; - case 'yahoo': - docs = 'https://developer.yahoo.com/oauth2/guide/flows_authcode/'; - break; - case 'yammer': - docs = 'https://developer.yammer.com/docs/oauth-2'; - break; - case 'yandex': - docs = 'https://tech.yandex.com/oauth/'; - break; - case 'zoho': - docs = 'https://www.zoho.com/accounts/protocol/oauth/sign-in-using-zoho.html'; - break; - case 'zoom': - docs = 'https://marketplace.zoom.us/docs/guides/auth/oauth/'; - break; - default: - break; - } - - return { - ...n, - icon, - docs, - component - }; - }) ?? [] - ); -}; - -function createOAuthProviders() { - const { subscribe, set } = writable({ - providers: setProviders(null) - }); - return { - subscribe, - set, - load: (project: Models.Project) => { - const providers = setProviders(project); - - set({ providers }); - } - }; -} - -export const OAuthProviders = createOAuthProviders(); diff --git a/src/routes/console/project-[project]/auth/(providers)/appleOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/appleOAuth.svelte index 982422b3f..2d34598f5 100644 --- a/src/routes/console/project-[project]/auth/(providers)/appleOAuth.svelte +++ b/src/routes/console/project-[project]/auth/(providers)/appleOAuth.svelte @@ -2,14 +2,15 @@ import { page } from '$app/stores'; import { Alert, CopyInput, Modal } from '$lib/components'; import { Button, FormList, InputSwitch, InputText, InputTextarea } from '$lib/elements/forms'; - import type { Provider } from '$lib/stores/oauth-providers'; + import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers'; import { sdk } from '$lib/stores/sdk'; import { onMount } from 'svelte'; import { updateOAuth } from '../updateOAuth'; + import type { Models } from '@appwrite.io/console'; const projectId = $page.params.project; - export let provider: Provider; + export let provider: Models.AuthProvider; export let show = false; let appId: string = null; @@ -18,11 +19,13 @@ let teamID: string = null; let p8: string = null; let error: string; + let oAuthProvider: Provider; onMount(() => { appId ??= provider.appId; enabled ??= provider.enabled; if (provider.secret) ({ keyID, teamID, p8 } = JSON.parse(provider.secret)); + oAuthProvider = oAuthProviders[provider.key]; }); const update = async () => { @@ -44,7 +47,7 @@

To use {provider.name} authentication in your application, first fill in this form. For more info you can - + visit the docs.

diff --git a/src/routes/console/project-[project]/auth/(providers)/auth0OAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/auth0OAuth.svelte index 0607180a5..26ae7296e 100644 --- a/src/routes/console/project-[project]/auth/(providers)/auth0OAuth.svelte +++ b/src/routes/console/project-[project]/auth/(providers)/auth0OAuth.svelte @@ -2,12 +2,15 @@ import { page } from '$app/stores'; import { Alert, CopyInput, Modal } from '$lib/components'; import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms'; - import type { Provider } from '$lib/stores/oauth-providers'; + import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers'; import { sdk } from '$lib/stores/sdk'; import { onMount } from 'svelte'; import { updateOAuth } from '../updateOAuth'; + import type { Models } from '@appwrite.io/console'; - export let provider: Provider; + const projectId = $page.params.project; + + export let provider: Models.AuthProvider; export let show = false; let appId: string = null; @@ -15,14 +18,15 @@ let clientSecret: string = null; let auth0Domain: string = null; let error: string; + let oAuthProvider: Provider; onMount(() => { appId ??= provider.appId; enabled ??= provider.enabled; if (provider.secret) ({ clientSecret, auth0Domain } = JSON.parse(provider.secret)); + oAuthProvider = oAuthProviders[provider.key]; }); - const projectId = $page.params.project; const update = async () => { const result = await updateOAuth({ projectId, provider, secret, appId, enabled }); @@ -45,7 +49,7 @@

To use {provider.name} authentication in your application, first fill in this form. For more info you can - visit the docs.

diff --git a/src/routes/console/project-[project]/auth/(providers)/authentikOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/authentikOAuth.svelte index f7d6dcd37..e6b99f2b4 100644 --- a/src/routes/console/project-[project]/auth/(providers)/authentikOAuth.svelte +++ b/src/routes/console/project-[project]/auth/(providers)/authentikOAuth.svelte @@ -2,12 +2,15 @@ import { page } from '$app/stores'; import { Alert, CopyInput, Modal } from '$lib/components'; import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms'; - import type { Provider } from '$lib/stores/oauth-providers'; + import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers'; import { sdk } from '$lib/stores/sdk'; import { onMount } from 'svelte'; import { updateOAuth } from '../updateOAuth'; + import type { Models } from '@appwrite.io/console'; - export let provider: Provider; + const projectId = $page.params.project; + + export let provider: Models.AuthProvider; export let show = false; let appId: string = null; @@ -15,14 +18,15 @@ let clientSecret: string = null; let authentikDomain: string = null; let error: string; + let oAuthProvider: Provider; onMount(() => { appId ??= provider.appId; enabled ??= provider.enabled; if (provider.secret) ({ clientSecret, authentikDomain } = JSON.parse(provider.secret)); + oAuthProvider = oAuthProviders[provider.key]; }); - const projectId = $page.params.project; const update = async () => { const result = await updateOAuth({ projectId, provider, secret, appId, enabled }); @@ -45,7 +49,7 @@

To use {provider.name} authentication in your application, first fill in this form. For more info you can - visit the docs.

diff --git a/src/routes/console/project-[project]/auth/(providers)/gitlabOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/gitlabOAuth.svelte index 95f80675e..dc1dd71a4 100644 --- a/src/routes/console/project-[project]/auth/(providers)/gitlabOAuth.svelte +++ b/src/routes/console/project-[project]/auth/(providers)/gitlabOAuth.svelte @@ -2,12 +2,15 @@ import { page } from '$app/stores'; import { Alert, CopyInput, Modal } from '$lib/components'; import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms'; - import type { Provider } from '$lib/stores/oauth-providers'; + import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers'; import { sdk } from '$lib/stores/sdk'; import { onMount } from 'svelte'; import { updateOAuth } from '../updateOAuth'; + import type { Models } from '@appwrite.io/console'; - export let provider: Provider; + const projectId = $page.params.project; + + export let provider: Models.AuthProvider; export let show = false; let appId: string = null; @@ -15,14 +18,15 @@ let clientSecret: string = null; let endpoint: string = null; let error: string; + let oAuthProvider: Provider; onMount(() => { appId ??= provider.appId; enabled ??= provider.enabled; if (provider.secret) ({ clientSecret, endpoint } = JSON.parse(provider.secret)); + oAuthProvider = oAuthProviders[provider.key]; }); - const projectId = $page.params.project; const update = async () => { const result = await updateOAuth({ projectId, provider, secret, appId, enabled }); @@ -43,7 +47,7 @@

To use {provider.name} authentication in your application, first fill in this form. For more info you can - visit the docs.

diff --git a/src/routes/console/project-[project]/auth/(providers)/googleOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/googleOAuth.svelte index defd59038..9ddfdb74f 100644 --- a/src/routes/console/project-[project]/auth/(providers)/googleOAuth.svelte +++ b/src/routes/console/project-[project]/auth/(providers)/googleOAuth.svelte @@ -2,24 +2,27 @@ import { page } from '$app/stores'; import { Alert, CopyInput, Modal } from '$lib/components'; import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms'; - import type { Provider } from '$lib/stores/oauth-providers'; + import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers'; import { sdk } from '$lib/stores/sdk'; import { onMount } from 'svelte'; import { updateOAuth } from '../updateOAuth'; - - export let provider: Provider; - export let show = false; + import type { Models } from '@appwrite.io/console'; const projectId = $page.params.project; + export let provider: Models.AuthProvider; + export let show = false; + let enabled: boolean = null; let appId: string = null; let secret: string = null; + let oAuthProvider: Provider; onMount(() => { enabled ??= provider.enabled; appId ??= provider.appId; secret ??= provider.secret; + oAuthProvider = oAuthProviders[provider.key]; }); let error: string; @@ -41,7 +44,7 @@

To use {provider.name} authentication in your application, first fill in this form. For more info you can - visit the docs.

diff --git a/src/routes/console/project-[project]/auth/(providers)/mainOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/mainOAuth.svelte index 184fcd00c..0e38ff2e6 100644 --- a/src/routes/console/project-[project]/auth/(providers)/mainOAuth.svelte +++ b/src/routes/console/project-[project]/auth/(providers)/mainOAuth.svelte @@ -2,24 +2,27 @@ import { page } from '$app/stores'; import { Alert, CopyInput, Modal } from '$lib/components'; import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms'; - import type { Provider } from '$lib/stores/oauth-providers'; import { sdk } from '$lib/stores/sdk'; import { onMount } from 'svelte'; import { updateOAuth } from '../updateOAuth'; - - export let provider: Provider; - export let show = false; + import type { Models } from '@appwrite.io/console'; + import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers'; const projectId = $page.params.project; + export let provider: Models.AuthProvider; + export let show = false; + let enabled: boolean = null; let appId: string = null; let secret: string = null; + let oAuthProvider: Provider; onMount(() => { enabled ??= provider.enabled; appId ??= provider.appId; secret ??= provider.secret; + oAuthProvider = oAuthProviders[provider.key]; }); let error: string; @@ -41,7 +44,7 @@

To use {provider.name} authentication in your application, first fill in this form. For more info you can - visit the docs.

diff --git a/src/routes/console/project-[project]/auth/(providers)/microsoftOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/microsoftOAuth.svelte index 7fd451af5..8df2259fc 100644 --- a/src/routes/console/project-[project]/auth/(providers)/microsoftOAuth.svelte +++ b/src/routes/console/project-[project]/auth/(providers)/microsoftOAuth.svelte @@ -2,12 +2,15 @@ import { page } from '$app/stores'; import { Alert, CopyInput, Modal } from '$lib/components'; import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms'; - import type { Provider } from '$lib/stores/oauth-providers'; + import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers'; import { sdk } from '$lib/stores/sdk'; import { onMount } from 'svelte'; import { updateOAuth } from '../updateOAuth'; + import type { Models } from '@appwrite.io/console'; - export let provider: Provider; + const projectId = $page.params.project; + + export let provider: Models.AuthProvider; export let show = false; let appId: string = null; @@ -15,15 +18,15 @@ let clientSecret: string = null; let tenantID: string = null; let error: string; + let oAuthProvider: Provider; onMount(() => { appId ??= provider.appId; enabled ??= provider.enabled; if (provider.secret) ({ clientSecret, tenantID } = JSON.parse(provider.secret)); + oAuthProvider = oAuthProviders[provider.key]; }); - const projectId = $page.params.project; - const update = async () => { const result = await updateOAuth({ projectId, provider, secret, appId, enabled }); @@ -44,7 +47,7 @@

To use {provider.name} authentication in your application, first fill in this form. For more info you can - + visit the docs.

diff --git a/src/routes/console/project-[project]/auth/(providers)/oidcOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/oidcOAuth.svelte index f00f07e30..0c6565f19 100644 --- a/src/routes/console/project-[project]/auth/(providers)/oidcOAuth.svelte +++ b/src/routes/console/project-[project]/auth/(providers)/oidcOAuth.svelte @@ -2,14 +2,15 @@ import { page } from '$app/stores'; import { Alert, CopyInput, Modal } from '$lib/components'; import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms'; - import type { Provider } from '$lib/stores/oauth-providers'; + import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers'; import { sdk } from '$lib/stores/sdk'; import { onMount } from 'svelte'; import { updateOAuth } from '../updateOAuth'; + import type { Models } from '@appwrite.io/console'; const projectId = $page.params.project; - export let provider: Provider; + export let provider: Models.AuthProvider; export let show = false; let appId: string = null; @@ -20,6 +21,7 @@ let tokenEndpoint: string = null; let userinfoEndpoint: string = null; let error: string; + let oAuthProvider: Provider; // secret is valid if clientSecret is set and either wellKnownEndpoint or all of the other endpoints are set $: isValidSecret = @@ -38,6 +40,7 @@ userinfoEndpoint } = JSON.parse(provider.secret)); } + oAuthProvider = oAuthProviders[provider.key]; }); const update = async () => { @@ -67,7 +70,7 @@

To use {provider.name} authentication in your application, first fill in this form. For more info you can - visit the docs.

diff --git a/src/routes/console/project-[project]/auth/(providers)/oktaOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/oktaOAuth.svelte index 6e23ca60c..3f73d9d13 100644 --- a/src/routes/console/project-[project]/auth/(providers)/oktaOAuth.svelte +++ b/src/routes/console/project-[project]/auth/(providers)/oktaOAuth.svelte @@ -2,14 +2,15 @@ import { page } from '$app/stores'; import { Alert, CopyInput, Modal } from '$lib/components'; import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms'; - import type { Provider } from '$lib/stores/oauth-providers'; + import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers'; import { sdk } from '$lib/stores/sdk'; import { onMount } from 'svelte'; import { updateOAuth } from '../updateOAuth'; + import type { Models } from '@appwrite.io/console'; const projectId = $page.params.project; - export let provider: Provider; + export let provider: Models.AuthProvider; export let show = false; let appId: string = null; @@ -18,6 +19,7 @@ let oktaDomain: string = null; let authorizationServerId: string = null; let error: string; + let oAuthProvider: Provider; onMount(() => { appId ??= provider.appId; @@ -25,6 +27,7 @@ if (provider.secret) { ({ clientSecret, oktaDomain, authorizationServerId } = JSON.parse(provider.secret)); } + oAuthProvider = oAuthProviders[provider.key]; }); const update = async () => { @@ -49,7 +52,7 @@

To use {provider.name} authentication in your application, first fill in this form. For more info you can - visit the docs.

diff --git a/src/routes/console/project-[project]/auth/settings/+page.svelte b/src/routes/console/project-[project]/auth/settings/+page.svelte index 610733117..50ec182c4 100644 --- a/src/routes/console/project-[project]/auth/settings/+page.svelte +++ b/src/routes/console/project-[project]/auth/settings/+page.svelte @@ -8,18 +8,15 @@ import { app } from '$lib/stores/app'; import { authMethods, type AuthMethod } from '$lib/stores/auth-methods'; import { addNotification } from '$lib/stores/notifications'; - import type { Provider } from '$lib/stores/oauth-providers'; - import { OAuthProviders } from '$lib/stores/oauth-providers'; + import { oAuthProviders } from '$lib/stores/oauth-providers'; import { sdk } from '$lib/stores/sdk'; + import type { Models } from '@appwrite.io/console'; import { project } from '../../store'; const projectId = $page.params.project; let showProvider = false; - $: { - authMethods.load($project); - OAuthProviders.load($project); - } + let selectedProvider: Models.AuthProvider | null = null; async function authUpdate(box: AuthMethod) { try { @@ -42,10 +39,10 @@ } } - let selectedProvider: Provider | null = null; + $: authMethods.load($project); -{#if $authMethods && $OAuthProviders} +{#if $authMethods && $project} Auth methods @@ -67,34 +64,37 @@

OAuth2 Providers

    - {#each $OAuthProviders.providers + {#each $project.oAuthProviders .filter((p) => p.name !== 'Mock') .sort((a, b) => (a.enabled === b.enabled ? 0 : a.enabled ? -1 : 1)) as provider} -
  • - -
    • + {@const oAuthProvider = oAuthProviders[provider.key]} + {#if oAuthProvider} +
  • + +
    • + {/if} {/each}
@@ -102,8 +102,9 @@ {/if} {#if selectedProvider && showProvider} + {@const oAuthProvider = oAuthProviders[selectedProvider.key]} { diff --git a/src/routes/console/project-[project]/auth/updateOAuth.ts b/src/routes/console/project-[project]/auth/updateOAuth.ts index dade0a767..5ada36747 100644 --- a/src/routes/console/project-[project]/auth/updateOAuth.ts +++ b/src/routes/console/project-[project]/auth/updateOAuth.ts @@ -3,13 +3,12 @@ import { Submit, trackError, trackEvent } from '$lib/actions/analytics'; import { Dependencies } from '$lib/constants'; import { isValueOfStringEnum } from '$lib/helpers/types'; import { addNotification } from '$lib/stores/notifications'; -import type { Provider } from '$lib/stores/oauth-providers'; import { sdk } from '$lib/stores/sdk'; -import { OAuthProvider } from '@appwrite.io/console'; +import { OAuthProvider, type Models } from '@appwrite.io/console'; type Args = { projectId: string; - provider: Provider; + provider: Models.AuthProvider; appId: string; secret: string; enabled: boolean; diff --git a/src/routes/console/project-[project]/auth/user-[user]/identities/table.svelte b/src/routes/console/project-[project]/auth/user-[user]/identities/table.svelte index 1d62ab264..841db0487 100644 --- a/src/routes/console/project-[project]/auth/user-[user]/identities/table.svelte +++ b/src/routes/console/project-[project]/auth/user-[user]/identities/table.svelte @@ -20,8 +20,7 @@ import { addNotification } from '$lib/stores/notifications'; import { invalidate } from '$app/navigation'; import type { Column } from '$lib/helpers/types'; - import { OAuthProviders, type Provider } from '$lib/stores/oauth-providers'; - import { project } from '$routes/console/project-[project]/store'; + import { oAuthProviders } from '$lib/stores/oauth-providers'; import { app } from '$lib/stores/app'; export let columns: Column[]; @@ -30,7 +29,6 @@ let selectedIds: string[] = []; let showDelete = false; let deleting = false; - let providerLookup: Record = {}; async function handleDelete() { showDelete = false; @@ -58,12 +56,6 @@ showDelete = false; } } - - $: OAuthProviders.load($project); - $: providerLookup = $OAuthProviders.providers.reduce((acc, provider) => { - acc[provider.key] = provider; - return acc; - }, {}); @@ -93,7 +85,7 @@ {/key} {:else if column.id === 'provider'} - {@const provider = providerLookup[identity[column.id]]} + {@const provider = oAuthProviders[identity[column.id]]}