feat-4653-keycloak-oauth

src/lib/stores/oauth-providers.ts

@@ -7,6 +7,7 @@ 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 Keycloak from '../../routes/console/project-[project]/auth/keycloakOAuth.svelte';
 import Main from '../../routes/console/project-[project]/auth/mainOAuth.svelte';
 
 export type Provider = Models.Provider & {
@@ -82,6 +83,10 @@ const setProviders = (project: Models.Project): Provider[] => {
                 case 'google':
                     docs = 'https://support.google.com/googleapi/answer/6158849';
                     break;
+                case 'keycloak':
+                    docs = 'https://www.keycloak.org/guides#getting-started';
+                    component = Keycloak;
+                    break;
                 case 'linkedin':
                     docs = 'https://developer.linkedin.com/';
                     break;

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

@@ -0,0 +1,115 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Modal, CopyInput, Alert } from '$lib/components';
+    import { Button, InputPassword, InputText, InputSwitch, FormList } from '$lib/elements/forms';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import type { Provider } from '$lib/stores/oauth-providers';
+    import { addNotification } from '$lib/stores/notifications';
+    import { onMount } from 'svelte';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { trackEvent } from '$lib/actions/analytics';
+
+    export let provider: Provider;
+
+    let appId: string = null;
+    let enabled: boolean = null;
+    let clientSecret: string = null;
+    let keycloakEndpoint: string = null;
+    let keycloakRealm: string = null;
+    let error: string;
+
+    onMount(() => {
+        appId ??= provider.appId;
+        enabled ??= provider.enabled;
+        if (provider.secret)
+            ({ clientSecret, keycloakEndpoint, keycloakRealm } = JSON.parse(provider.secret));
+    });
+
+    const projectId = $page.params.project;
+    const update = async () => {
+        try {
+            await sdkForConsole.projects.updateOAuth2(
+                projectId,
+                provider.name.toLowerCase(),
+                appId,
+                secret,
+                enabled
+            );
+            addNotification({
+                type: 'success',
+                message: `${provider.name} authentication has been ${
+                    provider.enabled ? 'enabled' : 'disabled'
+                }`
+            });
+            trackEvent('submit_provider_update', {
+                provider,
+                enabled
+            });
+            provider = null;
+            invalidate(Dependencies.PROJECT);
+        } catch ({ message }) {
+            error = message;
+        }
+    };
+
+    $: secret =
+        clientSecret && keycloakEndpoint && keycloakRealm
+            ? JSON.stringify({ clientSecret, keycloakEndpoint, keycloakRealm })
+            : provider.secret;
+</script>
+
+<Modal {error} size="big" show on:submit={update} on:close>
+    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <FormList>
+        <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"
+                >visit the docs.</a>
+        </p>
+        <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
+        <InputText
+            id="clientID"
+            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="domain"
+            label="Keycloak Endpoint"
+            placeholder="Your Keycloak endpoint"
+            bind:value={keycloakEndpoint} />
+        <InputText
+            id="domain"
+            label="Keycloak Realm"
+            placeholder="Your Keycloak realm"
+            bind:value={keycloakRealm} />
+        <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={`${
+                    sdkForConsole.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 && clientSecret && keycloakEndpoint && keycloakRealm)}
+            submit>Update</Button>
+    </svelte:fragment>
+</Modal>