mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
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.
This commit is contained in:
Steven Nguyen
+232
-170
@@ -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<unknown>;
|
||||
component: typeof SvelteComponent<unknown>;
|
||||
};
|
||||
|
||||
export type Providers = {
|
||||
providers: Provider[];
|
||||
export const oAuthProviders: Record<string, Provider> = {
|
||||
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>({
|
||||
providers: setProviders(null)
|
||||
});
|
||||
return {
|
||||
subscribe,
|
||||
set,
|
||||
load: (project: Models.Project) => {
|
||||
const providers = setProviders(project);
|
||||
|
||||
set({ providers });
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export const OAuthProviders = createOAuthProviders();
|
||||
|
||||
@@ -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 @@
|
||||
<p>
|
||||
To use {provider.name} authentication in your application, first fill in this form. For more
|
||||
info you can
|
||||
<a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer">
|
||||
<a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer">
|
||||
visit the docs.
|
||||
</a>
|
||||
</p>
|
||||
|
||||
@@ -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 @@
|
||||
<p>
|
||||
To use {provider.name} authentication in your application, first fill in this form. For more
|
||||
info you can
|
||||
<a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
|
||||
<a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
|
||||
>visit the docs.</a>
|
||||
</p>
|
||||
<InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
|
||||
|
||||
@@ -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 @@
|
||||
<p>
|
||||
To use {provider.name} authentication in your application, first fill in this form. For more
|
||||
info you can
|
||||
<a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
|
||||
<a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
|
||||
>visit the docs.</a>
|
||||
</p>
|
||||
<InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
|
||||
|
||||
@@ -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 @@
|
||||
<p>
|
||||
To use {provider.name} authentication in your application, first fill in this form. For more
|
||||
info you can
|
||||
<a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
|
||||
<a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
|
||||
>visit the docs.</a>
|
||||
</p>
|
||||
<InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
|
||||
|
||||
@@ -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 @@
|
||||
<p>
|
||||
To use {provider.name} authentication in your application, first fill in this form. For more
|
||||
info you can
|
||||
<a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
|
||||
<a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
|
||||
>visit the docs.</a>
|
||||
</p>
|
||||
<InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
|
||||
|
||||
@@ -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 @@
|
||||
<p>
|
||||
To use {provider.name} authentication in your application, first fill in this form. For more
|
||||
info you can
|
||||
<a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
|
||||
<a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
|
||||
>visit the docs.</a>
|
||||
</p>
|
||||
<InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
|
||||
|
||||
@@ -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 @@
|
||||
<p>
|
||||
To use {provider.name} authentication in your application, first fill in this form. For more
|
||||
info you can
|
||||
<a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer">
|
||||
<a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer">
|
||||
visit the docs.
|
||||
</a>
|
||||
</p>
|
||||
|
||||
@@ -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 @@
|
||||
<p>
|
||||
To use {provider.name} authentication in your application, first fill in this form. For more
|
||||
info you can
|
||||
<a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
|
||||
<a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
|
||||
>visit the docs.</a>
|
||||
</p>
|
||||
<InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
|
||||
|
||||
@@ -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 @@
|
||||
<p>
|
||||
To use {provider.name} authentication in your application, first fill in this form. For more
|
||||
info you can
|
||||
<a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
|
||||
<a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
|
||||
>visit the docs.</a>
|
||||
</p>
|
||||
<InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
|
||||
|
||||
@@ -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);
|
||||
</script>
|
||||
|
||||
{#if $authMethods && $OAuthProviders}
|
||||
{#if $authMethods && $project}
|
||||
<Container>
|
||||
<CardGrid>
|
||||
<Heading tag="h2" size="7">Auth methods</Heading>
|
||||
@@ -67,34 +64,37 @@
|
||||
<section class="common-section">
|
||||
<h2 class="heading-level-6 common-section">OAuth2 Providers</h2>
|
||||
<ul class="grid-box common-section">
|
||||
{#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}
|
||||
<li class="grid-box-item">
|
||||
<button
|
||||
class="card u-flex u-flex-vertical u-cross-center u-width-full-line"
|
||||
on:click={() => {
|
||||
selectedProvider = provider;
|
||||
showProvider = true;
|
||||
trackEvent(`click_select_provider`, {
|
||||
provider: provider.key.toLowerCase()
|
||||
});
|
||||
}}>
|
||||
<div class="avatar">
|
||||
<img
|
||||
height="20"
|
||||
width="20"
|
||||
src={`/icons/${$app.themeInUse}/color/${provider.icon}.svg`}
|
||||
alt={provider.name} />
|
||||
</div>
|
||||
<p class="u-margin-block-start-8">{provider.name}</p>
|
||||
<div class="u-margin-block-start-24">
|
||||
<Pill success={provider.enabled}>
|
||||
{provider.enabled ? 'enabled' : 'disabled'}
|
||||
</Pill>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
{@const oAuthProvider = oAuthProviders[provider.key]}
|
||||
{#if oAuthProvider}
|
||||
<li class="grid-box-item">
|
||||
<button
|
||||
class="card u-flex u-flex-vertical u-cross-center u-width-full-line"
|
||||
on:click={() => {
|
||||
selectedProvider = provider;
|
||||
showProvider = true;
|
||||
trackEvent(`click_select_provider`, {
|
||||
provider: provider.key.toLowerCase()
|
||||
});
|
||||
}}>
|
||||
<div class="avatar">
|
||||
<img
|
||||
height="20"
|
||||
width="20"
|
||||
src={`/icons/${$app.themeInUse}/color/${oAuthProvider.icon}.svg`}
|
||||
alt={provider.name} />
|
||||
</div>
|
||||
<p class="u-margin-block-start-8">{provider.name}</p>
|
||||
<div class="u-margin-block-start-24">
|
||||
<Pill success={provider.enabled}>
|
||||
{provider.enabled ? 'enabled' : 'disabled'}
|
||||
</Pill>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
</section>
|
||||
@@ -102,8 +102,9 @@
|
||||
{/if}
|
||||
|
||||
{#if selectedProvider && showProvider}
|
||||
{@const oAuthProvider = oAuthProviders[selectedProvider.key]}
|
||||
<svelte:component
|
||||
this={selectedProvider.component}
|
||||
this={oAuthProvider.component}
|
||||
bind:provider={selectedProvider}
|
||||
bind:show={showProvider}
|
||||
on:close={() => {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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<string, Provider> = {};
|
||||
|
||||
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;
|
||||
}, {});
|
||||
</script>
|
||||
|
||||
<TableScroll>
|
||||
@@ -93,7 +85,7 @@
|
||||
</TableCell>
|
||||
{/key}
|
||||
{:else if column.id === 'provider'}
|
||||
{@const provider = providerLookup[identity[column.id]]}
|
||||
{@const provider = oAuthProviders[identity[column.id]]}
|
||||
<TableCellText title={column.title} width={column.width}>
|
||||
<div class="u-inline-flex u-cross-center u-gap-8">
|
||||
<div class="avatar is-size-small">
|
||||
|
||||
Reference in New Issue
Block a user