From 369f0060ec974b1fbcd903337072094c5abe98e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Skyler=20M=C3=A4ntysaari?= <samip5@users.noreply.github.com>
Date: Mon, 13 Nov 2023 00:48:51 +0200
Subject: [PATCH] feat: Add Authentik SSO support (#2614)

* feat: Add Authentik SSO support

* Add AuthentikIcon too.

* Forgot one check further down.
---
 .../lib/components/AuthentikSetting.svelte    | 64 +++++++++++++++++++
 .../lib/components/InstanceSettings.svelte    |  6 +-
 .../lib/components/icons/AuthentikIcon.svelte | 27 ++++++++
 frontend/src/lib/components/icons/index.ts    |  7 +-
 4 files changed, 100 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/lib/components/AuthentikSetting.svelte
 create mode 100644 frontend/src/lib/components/icons/AuthentikIcon.svelte

diff --git a/frontend/src/lib/components/AuthentikSetting.svelte b/frontend/src/lib/components/AuthentikSetting.svelte
new file mode 100644
index 0000000000..b5059c5677
--- /dev/null
+++ b/frontend/src/lib/components/AuthentikSetting.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+    import IconedResourceType from './IconedResourceType.svelte'
+    import Toggle from './Toggle.svelte'
+
+    export let value: any
+
+    $: enabled = value != undefined
+
+    let org = ''
+
+    $: changeOrg(org)
+
+    function changeOrg(org) {
+        if (value) {
+            value = {
+                ...value,
+                connect_config: {
+                    auth_url: `${org}/application/o/authorize/`,
+                    token_url: `${org}/application/o/token/`,
+                    scopes: ['openid', 'offline_access']
+                },
+                login_config: {
+                    auth_url: `${org}/application/o/authorize/`,
+                    token_url: `${org}/application/o/token/`,
+                    userinfo_url: `${org}/application/o/userinfo/`,
+                    scopes: ['openid', 'offline_access']
+                }
+            }
+        }
+    }
+</script>
+
+<div class="flex flex-col gap-1">
+    <label class="text-sm font-medium text-primary flex gap-4 items-center"
+    ><div class="w-[120px]"><IconedResourceType name={'authentik'} after={true} /></div><Toggle
+            checked={enabled}
+            on:change={(e) => {
+				if (e.detail) {
+					value = { id: '', secret: '' }
+				} else {
+					value = undefined
+				}
+			}}
+    /></label
+    >
+    {#if enabled}
+        <div class="border rounded p-2">
+            <label class="block pb-2">
+				<span class="text-primary font-semibold text-sm"
+                >Authentik Url ({'AUTHENTIK_HOST/application/o/authorize/'})</span
+                >
+                <input type="text" placeholder="yourorg" bind:value={org} />
+            </label>
+            <label class="block pb-2">
+                <span class="text-primary font-semibold text-sm">Client Id</span>
+                <input type="text" placeholder="Client Id" bind:value={value['id']} />
+            </label>
+            <label class="block pb-2">
+                <span class="text-primary font-semibold text-sm">Client Secret </span>
+                <input type="text" placeholder="Client Secret" bind:value={value['secret']} />
+            </label>
+        </div>
+    {/if}
+</div>
diff --git a/frontend/src/lib/components/InstanceSettings.svelte b/frontend/src/lib/components/InstanceSettings.svelte
index ad4fcdff7e..c8d8f2a83a 100644
--- a/frontend/src/lib/components/InstanceSettings.svelte
+++ b/frontend/src/lib/components/InstanceSettings.svelte
@@ -18,6 +18,7 @@
 	import CustomOauth from './CustomOauth.svelte'
 	import { AlertTriangle, Plus } from 'lucide-svelte'
 	import CustomSso from './CustomSso.svelte'
+	import AuthentikSetting from "$lib/components/AuthentikSetting.svelte";
 
 	export let tab: string = 'Core'
 	export let hideTabs: boolean = false
@@ -213,8 +214,9 @@
 								<OAuthSetting name="gitlab" bind:value={oauths['gitlab']} />
 								<OAuthSetting name="jumpcloud" bind:value={oauths['jumpcloud']} />
 								<KeycloakSetting bind:value={oauths['keycloak']} />
+								<AuthentikSetting bind:value={oauths['authentik']} />
 								{#each Object.keys(oauths) as k}
-									{#if !['google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'keycloak', 'slack'].includes(k) && 'login_config' in oauths[k]}
+									{#if !['authentik','google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'keycloak', 'slack'].includes(k) && 'login_config' in oauths[k]}
 										{#if oauths[k]}
 											<div class="flex flex-col gap-2 pb-4">
 												<div class="flex flex-row items-center gap-2">
@@ -279,7 +281,7 @@
 							<div class="py-1" />
 
 							{#each Object.keys(oauths) as k}
-								{#if !['google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'keycloak', 'slack'].includes(k) && !('login_config' in oauths[k])}
+								{#if !['authentik','google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'keycloak', 'slack'].includes(k) && !('login_config' in oauths[k])}
 									{#if oauths[k]}
 										<div class="flex flex-col gap-2 pb-4">
 											<div class="flex flex-row items-center gap-2">
diff --git a/frontend/src/lib/components/icons/AuthentikIcon.svelte b/frontend/src/lib/components/icons/AuthentikIcon.svelte
new file mode 100644
index 0000000000..ee52fba6af
--- /dev/null
+++ b/frontend/src/lib/components/icons/AuthentikIcon.svelte
@@ -0,0 +1,27 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="24" height="24">
+    <title>authentik-svg</title>
+    <defs>
+        <style>.cls-1 {
+            fill: #fd4b2d;
+        }
+        </style>
+    </defs>
+    <rect class="cls-1" x="546.66" y="275.34" width="34.99" height="99.97"/>
+    <rect class="cls-1" x="637.66" y="271.13" width="34.99" height="78.19"/>
+    <path class="cls-1"
+          d="M127.64,385.31a127.57,127.57,0,0,0-112.13,66.9H74.82c26.27-22.67,64.42-29.28,92,0h62.8C205.11,419.06,168.36,385.31,127.64,385.31Z"/>
+    <path class="cls-1"
+          d="M212.39,512.53C130.55,683.65-12.89,537.81,74.82,452.21H15.51C-31,533.33,33.3,642.73,127.64,640.24c73,0,133.2-108.3,133.2-127.46,0-8.47-11.78-34.33-31.2-60.57h-62.8C187.65,471.08,205.81,498.56,212.39,512.53Zm2.17-5h0Z"/>
+    <path class="cls-1"
+          d="M999.94,274.11V725.89c0,86.58-70.42,157.06-157.05,157.06H776.22V729.12H457.88V883H391.22c-86.64,0-157.06-70.48-157.06-157.06V583.81H738.87V312.11H495.24V464.76H234.16V274.11a151.29,151.29,0,0,1,1.06-18,154.4,154.4,0,0,1,3.88-21.15c.58-2.23,1.23-4.46,1.88-6.64a13.66,13.66,0,0,1,.52-1.64c.36-1.12.71-2.17,1.06-3.23s.76-2.17,1.18-3.23c.47-1.23.88-2.41,1.35-3.58s1-2.35,1.47-3.53a159,159,0,0,1,14.27-26.49c.06-.06.12-.17.17-.23,1.41-2.06,2.88-4.11,4.41-6.17,1.29-1.7,2.58-3.35,3.88-5,1.52-1.82,3.11-3.7,4.69-5.46s3.12-3.47,4.76-5.11l.18-.18a36.53,36.53,0,0,1,2.64-2.64,159.75,159.75,0,0,1,18.68-15.63c1.76-1.29,3.64-2.52,5.52-3.76,2.11-1.35,4.23-2.64,6.4-3.93,4.11-2.41,8.28-4.64,12.63-6.64,1.35-.64,2.76-1.29,4.11-1.88a152.81,152.81,0,0,1,18.38-6.63c2.41-.71,4.82-1.35,7.29-1.94,1.17-.3,2.35-.59,3.58-.82a158.5,158.5,0,0,1,21.26-3.12l3.12-.17c.52,0,1-.06,1.52-.06,2.35-.12,4.76-.18,7.17-.18H842.89c2.4,0,4.81.06,7.16.18.53,0,1,.06,1.53.06l3.11.17A158.26,158.26,0,0,1,876,120.58c1.24.23,2.41.52,3.59.82,2.46.59,4.87,1.23,7.28,1.94A152.81,152.81,0,0,1,905.2,130c1.35.59,2.76,1.24,4.11,1.88,4.35,2,8.52,4.23,12.63,6.64,2.18,1.29,4.29,2.58,6.4,3.93,1.88,1.24,3.76,2.47,5.52,3.76a157.53,157.53,0,0,1,21.5,18.45c1.65,1.64,3.23,3.34,4.76,5.11s3.17,3.64,4.7,5.46c1.29,1.64,2.58,3.29,3.87,5,1.53,2.06,3,4.11,4.41,6.17.06.06.12.17.18.23a159.71,159.71,0,0,1,14.27,26.49c.47,1.18,1,2.35,1.47,3.53s.88,2.35,1.35,3.58c.41,1.06.82,2.11,1.17,3.23s.71,2.11,1.06,3.23a15.74,15.74,0,0,1,.53,1.64c.64,2.18,1.29,4.41,1.88,6.64a155.92,155.92,0,0,1,3.87,21.15A151.29,151.29,0,0,1,999.94,274.11Z"/>
+    <path class="cls-1"
+          d="M973.27,186.59H260.84A157.05,157.05,0,0,1,391.2,117.07H842.9A157.08,157.08,0,0,1,973.27,186.59Z"/>
+    <path class="cls-1"
+          d="M998.94,256.1H235.16a155.35,155.35,0,0,1,25.68-69.51H973.27A155.34,155.34,0,0,1,998.94,256.1Z"/>
+    <path class="cls-1"
+          d="M1000,274.11v51.51H738.87V312.11H495.24v13.51H234.1V274.11a153.41,153.41,0,0,1,1.06-18H998.94A151.29,151.29,0,0,1,1000,274.11Z"/>
+    <rect class="cls-1" x="234.1" y="325.62" width="261.13" height="69.54"/>
+    <rect class="cls-1" x="738.87" y="325.62" width="261.13" height="69.54"/>
+    <rect class="cls-1" x="234.1" y="395.16" width="261.13" height="69.48"/>
+    <rect class="cls-1" x="738.87" y="395.16" width="261.13" height="69.48"/>
+</svg>
diff --git a/frontend/src/lib/components/icons/index.ts b/frontend/src/lib/components/icons/index.ts
index 1f62901e1c..bee278a9d4 100644
--- a/frontend/src/lib/components/icons/index.ts
+++ b/frontend/src/lib/components/icons/index.ts
@@ -66,6 +66,7 @@ import NocoDbIcon from './NocoDbIcon.svelte'
 import AzureIcon from './AzureIcon.svelte'
 import OktaIcon from './OktaIcon.svelte'
 import MsSqlServerIcon from './MSSqlServerIcon.svelte'
+import AuthentikIcon from './AuthentikIcon.svelte';
 
 export const APP_TO_ICON_COMPONENT = {
 	postgresql: PostgresIcon,
@@ -138,7 +139,8 @@ export const APP_TO_ICON_COMPONENT = {
 	graphql: GraphqlIcon,
 	nocodb: NocoDbIcon,
 	azure: AzureIcon,
-	okta: OktaIcon
+	okta: OktaIcon,
+	authentik: AuthentikIcon
 } as const
 
 export {
@@ -204,5 +206,6 @@ export {
 	NocoDbIcon,
 	AzureIcon,
 	MicrosoftIcon,
-	OktaIcon
+	OktaIcon,
+	AuthentikIcon
 }