Add a generic OIDC OAuth2 provider

Author: stnguyen90

CONTRIBUTING.md

@@ -40,12 +40,15 @@ git clone https://github.com/appwrite/console.git appwrite-console
 ```
 
 ### 2. Install dependencies with npm
+
 Navigate to the Appwrite Console repository and install dependencies.
+
 ```bash
 cd appwrite-console && npm install
 ```
 
 ### 3. Install and run Appwrite locally
+
 When you run the Appwrite Console locally, it needs to point to a backend as well. The easiest way to do this is to run an Appwrite instance locally.
 
 Follow the [install instructions](https://appwrite.io/docs/installation) in the Appwrite docs.

src/lib/stores/oauth-providers.ts

@@ -1,13 +1,14 @@
-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 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;
@@ -92,6 +93,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;

src/routes/console/project-[project]/auth/oidcOAuth.svelte

@@ -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>