From 53abcbe90f1f77deb9b9b22d5aee039599f6f32a Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Thu, 27 Apr 2023 19:06:12 -0700
Subject: [PATCH] Add a generic OIDC OAuth2 provider

---
 src/lib/stores/oauth-providers.ts             |  11 +-
 .../project-[project]/auth/oidcOAuth.svelte   | 127 ++++++++++++++++++
 static/icons/dark/color/oidc.svg              |   4 +
 static/icons/dark/grayscale/oidc.svg          |   4 +
 static/icons/light/color/oidc.svg             |   4 +
 static/icons/light/grayscale/oidc.svg         |   4 +
 6 files changed, 151 insertions(+), 3 deletions(-)
 create mode 100644 src/routes/console/project-[project]/auth/oidcOAuth.svelte
 create mode 100644 static/icons/dark/color/oidc.svg
 create mode 100644 static/icons/dark/grayscale/oidc.svg
 create mode 100644 static/icons/light/color/oidc.svg
 create mode 100644 static/icons/light/grayscale/oidc.svg

diff --git a/src/lib/stores/oauth-providers.ts b/src/lib/stores/oauth-providers.ts
index 40bcff26a..fbdd710cb 100644
--- a/src/lib/stores/oauth-providers.ts
+++ b/src/lib/stores/oauth-providers.ts
@@ -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;
diff --git a/src/routes/console/project-[project]/auth/oidcOAuth.svelte b/src/routes/console/project-[project]/auth/oidcOAuth.svelte
new file mode 100644
index 000000000..8c3db7df6
--- /dev/null
+++ b/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>
diff --git a/static/icons/dark/color/oidc.svg b/static/icons/dark/color/oidc.svg
new file mode 100644
index 000000000..0eb22aad2
--- /dev/null
+++ b/static/icons/dark/color/oidc.svg
@@ -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>
diff --git a/static/icons/dark/grayscale/oidc.svg b/static/icons/dark/grayscale/oidc.svg
new file mode 100644
index 000000000..f3a6a0937
--- /dev/null
+++ b/static/icons/dark/grayscale/oidc.svg
@@ -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>
diff --git a/static/icons/light/color/oidc.svg b/static/icons/light/color/oidc.svg
new file mode 100644
index 000000000..0eb22aad2
--- /dev/null
+++ b/static/icons/light/color/oidc.svg
@@ -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>
diff --git a/static/icons/light/grayscale/oidc.svg b/static/icons/light/grayscale/oidc.svg
new file mode 100644
index 000000000..84da2cb78
--- /dev/null
+++ b/static/icons/light/grayscale/oidc.svg
@@ -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>