mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
Add a generic OIDC OAuth2 provider
This commit is contained in:
Steven Nguyen
@@ -1,14 +1,15 @@
|
||||
import { writable } from 'svelte/store';
|
||||
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/appleOAuth.svelte';
|
||||
import Microsoft from '../../routes/console/project-[project]/auth/microsoftOAuth.svelte';
|
||||
import Okta from '../../routes/console/project-[project]/auth/oktaOAuth.svelte';
|
||||
import Auth0 from '../../routes/console/project-[project]/auth/auth0OAuth.svelte';
|
||||
import Authentik from '../../routes/console/project-[project]/auth/authentikOAuth.svelte';
|
||||
import GitLab from '../../routes/console/project-[project]/auth/gitlabOAuth.svelte';
|
||||
import Google from '../../routes/console/project-[project]/auth/googleOAuth.svelte';
|
||||
import Main from '../../routes/console/project-[project]/auth/mainOAuth.svelte';
|
||||
import Microsoft from '../../routes/console/project-[project]/auth/microsoftOAuth.svelte';
|
||||
import Oidc from '../../routes/console/project-[project]/auth/oidcOAuth.svelte';
|
||||
import Okta from '../../routes/console/project-[project]/auth/oktaOAuth.svelte';
|
||||
|
||||
export type Provider = Models.Provider & {
|
||||
icon: string;
|
||||
@@ -94,6 +95,10 @@ const setProviders = (project: Models.Project): Provider[] => {
|
||||
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;
|
||||
|
||||
@@ -0,0 +1,127 @@
|
||||
<script lang="ts">
|
||||
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';
|
||||
|
||||
const projectId = $page.params.project;
|
||||
|
||||
export let provider: Provider;
|
||||
|
||||
let appId: string = null;
|
||||
let enabled: boolean = null;
|
||||
let clientSecret: string = null;
|
||||
let wellKnownEndpoint: string = null;
|
||||
let authorizationEndpoint: string = null;
|
||||
let tokenEndpoint: string = null;
|
||||
let userinfoEndpoint: string = null;
|
||||
let error: string;
|
||||
|
||||
// secret is valid if clientSecret is set and either wellKnownEndpoint or all of the other endpoints are set
|
||||
$: isValidSecret =
|
||||
clientSecret &&
|
||||
(wellKnownEndpoint || (authorizationEndpoint && tokenEndpoint && userinfoEndpoint));
|
||||
|
||||
onMount(() => {
|
||||
appId ??= provider.appId;
|
||||
enabled ??= provider.enabled;
|
||||
if (provider.secret) {
|
||||
({
|
||||
clientSecret,
|
||||
wellKnownEndpoint,
|
||||
authorizationEndpoint,
|
||||
tokenEndpoint,
|
||||
userinfoEndpoint
|
||||
} = JSON.parse(provider.secret));
|
||||
}
|
||||
});
|
||||
|
||||
const update = async () => {
|
||||
const result = await updateOAuth({ projectId, provider, secret, appId, enabled });
|
||||
|
||||
if (result.status === 'error') {
|
||||
error = result.message;
|
||||
} else {
|
||||
provider = null;
|
||||
}
|
||||
};
|
||||
|
||||
$: secret = isValidSecret
|
||||
? JSON.stringify({
|
||||
clientSecret,
|
||||
wellKnownEndpoint,
|
||||
authorizationEndpoint,
|
||||
tokenEndpoint,
|
||||
userinfoEndpoint
|
||||
})
|
||||
: provider.secret;
|
||||
</script>
|
||||
|
||||
<Modal {error} onSubmit={update} size="big" show on:close>
|
||||
<svelte:fragment slot="header">{provider.name.toUpperCase()} OAuth2 Settings</svelte:fragment>
|
||||
<FormList>
|
||||
<p>
|
||||
To use {provider.name.toUpperCase()} 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"
|
||||
>visit the docs.</a>
|
||||
</p>
|
||||
<InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
|
||||
<InputText
|
||||
id="appID"
|
||||
label="Client ID"
|
||||
autofocus={true}
|
||||
placeholder="Enter ID"
|
||||
bind:value={appId} />
|
||||
<InputPassword
|
||||
id="secret"
|
||||
label="Client Secret"
|
||||
placeholder="Enter Client Secret"
|
||||
minlength={0}
|
||||
showPasswordButton
|
||||
bind:value={clientSecret} />
|
||||
<InputText
|
||||
id="well-known-endpoint"
|
||||
label="Well-Known Endpoint"
|
||||
placeholder="https://example.com/.well-known/openid-configuration"
|
||||
bind:value={wellKnownEndpoint} />
|
||||
<InputText
|
||||
id="authorization-endpoint"
|
||||
label="Authorization Endpoint"
|
||||
placeholder="https://example.com/authorize"
|
||||
bind:value={authorizationEndpoint} />
|
||||
<InputText
|
||||
id="token-endpoint"
|
||||
label="Token Endpoint"
|
||||
placeholder="https://example.com/token"
|
||||
bind:value={tokenEndpoint} />
|
||||
<InputText
|
||||
id="userinfo-endpoint"
|
||||
label="User Info Endpoint"
|
||||
placeholder="https://example.com/userinfo"
|
||||
bind:value={userinfoEndpoint} />
|
||||
|
||||
<Alert type="info">
|
||||
To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
|
||||
</Alert>
|
||||
<div>
|
||||
<p>URI</p>
|
||||
<CopyInput
|
||||
value={`${
|
||||
sdk.forConsole.client.config.endpoint
|
||||
}/account/sessions/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
|
||||
</div>
|
||||
</FormList>
|
||||
<svelte:fragment slot="footer">
|
||||
<Button secondary on:click={() => (provider = null)}>Cancel</Button>
|
||||
<Button
|
||||
disabled={(secret === provider.secret &&
|
||||
enabled === provider.enabled &&
|
||||
appId === provider.appId) ||
|
||||
!(appId && isValidSecret)}
|
||||
submit>Update</Button>
|
||||
</svelte:fragment>
|
||||
</Modal>
|
||||
@@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.4229 10.6237C16.9032 9.6864 14.7814 9.10415 12.4588 9.10415C7.78495 9.10415 4 11.4189 4 14.2734C4 16.8864 7.15412 19.0308 11.2401 19.4V17.8947C8.48746 17.5539 6.42294 16.0627 6.42294 14.2734C6.42294 12.2426 9.11828 10.5811 12.4588 10.5811C14.1219 10.5811 15.6272 10.9929 16.7168 11.6604L15.1685 12.6119H20V9.658L18.4229 10.6237Z" fill="#CCCCCC"/>
|
||||
<path d="M11.2401 6.54793V17.8947V19.4L13.6631 17.8947V5L11.2401 6.54793Z" fill="#FF6200"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 555 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.4229 10.6237C16.9032 9.6864 14.7814 9.10415 12.4588 9.10415C7.78495 9.10415 4 11.4189 4 14.2734C4 16.8864 7.15412 19.0308 11.2401 19.4V17.8947C8.48746 17.5539 6.42294 16.0627 6.42294 14.2734C6.42294 12.2426 9.11828 10.5811 12.4588 10.5811C14.1219 10.5811 15.6272 10.9929 16.7168 11.6604L15.1685 12.6119H20V9.658L18.4229 10.6237Z" fill="#C4C6D7"/>
|
||||
<path d="M11.2401 6.54793V17.8947V19.4L13.6631 17.8947V5L11.2401 6.54793Z" fill="#C4C6D7"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 555 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.4229 10.6237C16.9032 9.6864 14.7814 9.10415 12.4588 9.10415C7.78495 9.10415 4 11.4189 4 14.2734C4 16.8864 7.15412 19.0308 11.2401 19.4V17.8947C8.48746 17.5539 6.42294 16.0627 6.42294 14.2734C6.42294 12.2426 9.11828 10.5811 12.4588 10.5811C14.1219 10.5811 15.6272 10.9929 16.7168 11.6604L15.1685 12.6119H20V9.658L18.4229 10.6237Z" fill="#CCCCCC"/>
|
||||
<path d="M11.2401 6.54793V17.8947V19.4L13.6631 17.8947V5L11.2401 6.54793Z" fill="#FF6200"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 555 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.4229 10.6237C16.9032 9.6864 14.7814 9.10415 12.4588 9.10415C7.78495 9.10415 4 11.4189 4 14.2734C4 16.8864 7.15412 19.0308 11.2401 19.4V17.8947C8.48746 17.5539 6.42294 16.0627 6.42294 14.2734C6.42294 12.2426 9.11828 10.5811 12.4588 10.5811C14.1219 10.5811 15.6272 10.9929 16.7168 11.6604L15.1685 12.6119H20V9.658L18.4229 10.6237Z" fill="#373B4D"/>
|
||||
<path d="M11.2401 6.54793V17.8947V19.4L13.6631 17.8947V5L11.2401 6.54793Z" fill="#373B4D"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 555 B |
Reference in New Issue
Block a user