From 3d8dee9e6ac10a59caf8e1ef9eff077fd78d2e20 Mon Sep 17 00:00:00 2001
From: Rudo Kemper <31662219+rudokemper@users.noreply.github.com>
Date: Sun, 9 Feb 2025 22:54:55 -0500
Subject: [PATCH] fix: Support authentication with auth0 (#5249)

---
 .../src/lib/components/Auth0Setting.svelte    | 102 ++++++++++++++++++
 .../src/lib/components/AuthSettings.svelte    |   4 +-
 frontend/src/lib/components/Login.svelte      |   6 ++
 .../src/lib/components/icons/Auth0Icon.svelte |  18 ++++
 .../lib/components/icons/brands/Auth0.svelte  |  26 +++++
 frontend/src/lib/components/icons/index.ts    |   3 +
 6 files changed, 158 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/lib/components/Auth0Setting.svelte
 create mode 100644 frontend/src/lib/components/icons/Auth0Icon.svelte
 create mode 100644 frontend/src/lib/components/icons/brands/Auth0.svelte

diff --git a/frontend/src/lib/components/Auth0Setting.svelte b/frontend/src/lib/components/Auth0Setting.svelte
new file mode 100644
index 0000000000..5ff0781c72
--- /dev/null
+++ b/frontend/src/lib/components/Auth0Setting.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+	import CollapseLink from './CollapseLink.svelte'
+	import IconedResourceType from './IconedResourceType.svelte'
+	import Toggle from './Toggle.svelte'
+	import Tooltip from './Tooltip.svelte'
+	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
+	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
+
+	export let value: any
+
+	$: enabled = value != undefined
+
+	$: changeDomain(value?.['domain'], value?.['custom'])
+
+	function changeDomain(domain, custom) {
+		if (value) {
+			let baseUrl = custom ? `https://${domain}` : `https://${domain}.auth0.com`
+			value = {
+				...value,
+				login_config: {
+					auth_url: `${baseUrl}/authorize`,
+					token_url: `${baseUrl}/oauth/token`,
+					userinfo_url: `${baseUrl}/userinfo`,
+					scopes: ['openid', 'profile', 'email']
+				},
+				connect_config: {
+					auth_url: `${baseUrl}/authorize`,
+					token_url: `${baseUrl}/oauth/token`,
+					scopes: ['openid', 'profile', 'email']
+				}
+			}
+		}
+	}
+</script>
+
+<div class="flex flex-col gap-1">
+	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<label class="text-sm font-medium text-primary flex gap-4 items-center"
+		><div class="w-[120px]"><IconedResourceType name="auth0" after={true} /></div><Toggle
+			checked={enabled}
+			on:change={(e) => {
+				if (e.detail) {
+					value = { id: '', secret: '', domain: '', custom: false }
+				} else {
+					value = undefined
+				}
+			}}
+		/></label
+	>
+	{#if enabled}
+		<div class="p-2 rounded border">
+			<label class="block pb-2">
+				<div class="flex gap-2 items-end">
+					<div>
+						<ToggleButtonGroup bind:selected={value['custom']}>
+							<ToggleButton value={false} label={'Org'} />
+							<ToggleButton value={true} label="Custom" />
+						</ToggleButtonGroup>
+					</div>
+					<div class="grow">
+						<span class="text-primary font-semibold text-sm"
+							>{#if value['custom']}Custom ({'https://<domain>'}){:else}
+								Org ({'https://<your org>.auth0.com'}){/if}</span
+						>
+						<input type="text" placeholder="yourorg" bind:value={value['domain']} />
+					</div>
+				</div>
+			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Custom Name</span>
+				<input type="text" placeholder="Custom Name" bind:value={value['display_name']} />
+			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm"
+					>Client ID <Tooltip>Client ID credential of the auth0 service configuration</Tooltip
+					></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 <Tooltip>Client Secret of the auth0 service configuration</Tooltip></span
+				>
+				<input type="text" placeholder="Client Secret" bind:value={value['secret']} />
+			</label>
+			<CollapseLink text="Instructions">
+				<div class="text-sm text-secondary border p-2">
+					From your Admin page, setup a Windmill application<br />
+					Create a new application<br />
+					For "application type" select "Regular Web Application"<br />
+					Copy down the "Client ID" and "Client Secret" and paste them into the fields above <br />
+					Under "Application URIs", set the following:<br />
+					a. Application Login URI: `BASE_URL/user/login`<br />
+					b. Allowed Callback URLs: `BASE_URL/user/login_callback/auth0`<br />
+					c. Allowed Logout URLs: `BASE_URL/auth/logout`<br />
+					d. Allowed Web Origins: `BASE_URL`<br />
+					e. Allowed Origins (CORS): `BASE_URL`<br />
+				</div>
+			</CollapseLink>
+		</div>
+	{/if}
+</div>
diff --git a/frontend/src/lib/components/AuthSettings.svelte b/frontend/src/lib/components/AuthSettings.svelte
index 195e760114..f6db65526a 100644
--- a/frontend/src/lib/components/AuthSettings.svelte
+++ b/frontend/src/lib/components/AuthSettings.svelte
@@ -4,6 +4,7 @@
 
 	import OAuthSetting from '$lib/components/OAuthSetting.svelte'
 	import OktaSetting from './OktaSetting.svelte'
+	import Auth0Setting from './Auth0Setting.svelte'
 	import CloseButton from './common/CloseButton.svelte'
 	import KeycloakSetting from './KeycloakSetting.svelte'
 	import CustomSso from './CustomSso.svelte'
@@ -81,6 +82,7 @@
 			<OAuthSetting name="google" bind:value={oauths['google']} />
 			<OAuthSetting name="microsoft" bind:value={oauths['microsoft']} />
 			<OktaSetting bind:value={oauths['okta']} />
+			<Auth0Setting bind:value={oauths['auth0']} />
 			<OAuthSetting name="github" bind:value={oauths['github']} />
 			<OAuthSetting name="gitlab" bind:value={oauths['gitlab']} />
 			<OAuthSetting name="jumpcloud" bind:value={oauths['jumpcloud']} />
@@ -90,7 +92,7 @@
 			<KanidmSetting bind:value={oauths['kanidm']} />
 			<ZitadelSetting bind:value={oauths['zitadel']} />
 			{#each Object.keys(oauths) as k}
-				{#if !['authelia', 'authentik', 'google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'keycloak', 'slack', 'kanidm', 'zitadel'].includes(k) && 'login_config' in oauths[k]}
+				{#if !['authelia', 'authentik', 'google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'auth0', 'keycloak', 'slack', 'kanidm', 'zitadel'].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/Login.svelte b/frontend/src/lib/components/Login.svelte
index 8b073e4d8a..3046afd53c 100644
--- a/frontend/src/lib/components/Login.svelte
+++ b/frontend/src/lib/components/Login.svelte
@@ -5,6 +5,7 @@
 	import Google from '$lib/components/icons/brands/Google.svelte'
 	import Microsoft from '$lib/components/icons/brands/Microsoft.svelte'
 	import Okta from '$lib/components/icons/brands/Okta.svelte'
+	import Auth0 from '$lib/components/icons/brands/Auth0.svelte'
 
 	import { OauthService, UserService, WorkspaceService } from '$lib/gen'
 	import { usersWorkspaceStore, workspaceStore, userStore } from '$lib/stores'
@@ -49,6 +50,11 @@
 			type: 'okta',
 			name: 'Okta',
 			icon: Okta
+		},
+		{
+			type: 'auth0',
+			name: 'Auth0',
+			icon: Auth0
 		}
 	] as const
 
diff --git a/frontend/src/lib/components/icons/Auth0Icon.svelte b/frontend/src/lib/components/icons/Auth0Icon.svelte
new file mode 100644
index 0000000000..bf6ae23b48
--- /dev/null
+++ b/frontend/src/lib/components/icons/Auth0Icon.svelte
@@ -0,0 +1,18 @@
+<svg
+	version="1.2"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 1594 1595"
+	width="24"
+	height="24"
+>
+	<title>auth0ddd-svg</title>
+	<style>
+		.s0 {
+			fill: #000000;
+		}
+	</style>
+	<path
+		class="s0"
+		d="M160.183716,48.171844 C209.065292,32.885063 258.390625,21.436710 308.871613,15.252386 C317.292297,14.220791 325.753601,13.356311 334.222168,12.919684 C346.325989,12.295630 355.267456,21.589764 353.666168,34.529034 C349.868744,65.213501 348.537781,96.246513 341.092957,126.439857 C326.677368,184.904236 298.682648,235.976761 256.968506,279.307343 C213.326065,324.640991 160.987228,355.220551 99.454086,369.350647 C86.185066,372.397675 72.675255,374.468994 59.210712,376.568817 C48.252338,378.277832 37.322960,368.554504 37.025162,357.267883 C36.888950,352.105377 37.000465,346.936340 37.000454,341.770264 C37.000340,275.444489 37.000156,209.118698 37.000484,142.792908 C37.000629,113.734810 53.605553,87.790001 80.711502,77.096191 C106.802269,66.802895 133.414459,57.831257 160.183716,48.171844 z M473.292908,18.782619 C506.484009,23.757580 538.685669,31.232409 570.535767,40.198071 C606.031982,50.190132 640.835815,62.258595 674.995361,76.160843 C703.688293,87.838272 720.524536,113.183640 720.506226,144.306686 C720.465149,214.123505 720.485657,283.940338 720.495422,353.757172 C720.497620,369.678192 710.628052,378.153381 694.790466,376.099304 C645.966858,369.767212 600.276794,354.609619 558.938660,327.513123 C494.944519,285.566010 450.524231,228.198090 425.068176,156.124725 C416.448669,131.720474 411.208069,106.565437 408.906525,80.760696 C407.739166,67.672127 405.700104,54.662220 404.473694,41.577518 C403.999908,36.522667 403.805481,31.137602 405.026886,26.291929 C407.479736,16.560717 413.882874,12.037321 423.787903,12.980925 C440.178345,14.542362 456.506195,16.760437 473.292908,18.782619 z M578.363403,464.347748 C615.531311,446.366882 654.581116,435.908630 694.772705,429.284882 C697.708374,428.801056 700.752136,428.857452 703.745483,428.859894 C714.899902,428.868988 720.458801,434.582397 718.691895,445.492645 C716.009277,462.057404 713.484558,478.739502 709.260254,494.946198 C694.406738,551.932251 666.318115,602.423340 631.191589,649.183105 C575.914368,722.766968 508.061218,783.052307 432.927094,835.552307 C431.018921,836.885681 429.046265,838.127625 427.153870,839.482422 C422.472626,842.833557 417.533234,844.040344 412.248444,841.064758 C406.852631,838.026794 404.090637,833.218079 404.209808,827.096191 C404.527344,810.783264 404.724487,794.456909 405.573883,778.167480 C407.684601,737.688477 413.126068,697.680664 423.966522,658.536804 C436.856445,611.992310 456.846161,569.063904 488.758606,532.264648 C513.768555,503.424927 543.806946,481.217163 578.363403,464.347748 z M100.761627,612.221680 C75.728386,572.424377 56.110188,530.629822 45.663021,484.961426 C42.630875,471.706848 40.741016,458.167358 38.833408,444.686859 C37.390755,434.492065 42.754341,427.939545 52.986912,429.076324 C69.119164,430.868469 85.245743,433.507080 101.069740,437.122314 C140.869492,446.215149 178.476105,460.947479 212.772552,483.436096 C263.321442,516.581604 297.953369,562.429321 320.055481,618.236816 C334.840118,655.568054 343.272247,694.426331 348.081482,734.171936 C351.726166,764.293335 353.368927,794.520508 353.156128,824.854004 C353.142120,826.849976 353.278076,828.905640 352.863708,830.830078 C350.998230,839.494263 340.934357,847.105835 330.938843,839.874878 C313.414551,827.197754 295.720337,814.735718 278.557312,801.583313 C248.662613,778.674316 220.522430,753.696289 193.948929,727.012268 C159.090790,692.009094 127.388931,654.396790 100.761627,612.221680 z"
+	/>
+</svg>
diff --git a/frontend/src/lib/components/icons/brands/Auth0.svelte b/frontend/src/lib/components/icons/brands/Auth0.svelte
new file mode 100644
index 0000000000..43e0a89880
--- /dev/null
+++ b/frontend/src/lib/components/icons/brands/Auth0.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	export let size: number = 16
+	export let style: string = 'fill: white;'
+	let clazz = ''
+	export { clazz as class }
+</script>
+
+<svg
+	version="1.2"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 1594 1595"
+	height={`${size}px`}
+	class={clazz}
+	{style}
+>
+	<title>auth0ddd-svg</title>
+	<style>
+		.s0 {
+			fill: #000000;
+		}
+	</style>
+	<path
+		class="s0"
+		d="M160.183716,48.171844 C209.065292,32.885063 258.390625,21.436710 308.871613,15.252386 C317.292297,14.220791 325.753601,13.356311 334.222168,12.919684 C346.325989,12.295630 355.267456,21.589764 353.666168,34.529034 C349.868744,65.213501 348.537781,96.246513 341.092957,126.439857 C326.677368,184.904236 298.682648,235.976761 256.968506,279.307343 C213.326065,324.640991 160.987228,355.220551 99.454086,369.350647 C86.185066,372.397675 72.675255,374.468994 59.210712,376.568817 C48.252338,378.277832 37.322960,368.554504 37.025162,357.267883 C36.888950,352.105377 37.000465,346.936340 37.000454,341.770264 C37.000340,275.444489 37.000156,209.118698 37.000484,142.792908 C37.000629,113.734810 53.605553,87.790001 80.711502,77.096191 C106.802269,66.802895 133.414459,57.831257 160.183716,48.171844 z M473.292908,18.782619 C506.484009,23.757580 538.685669,31.232409 570.535767,40.198071 C606.031982,50.190132 640.835815,62.258595 674.995361,76.160843 C703.688293,87.838272 720.524536,113.183640 720.506226,144.306686 C720.465149,214.123505 720.485657,283.940338 720.495422,353.757172 C720.497620,369.678192 710.628052,378.153381 694.790466,376.099304 C645.966858,369.767212 600.276794,354.609619 558.938660,327.513123 C494.944519,285.566010 450.524231,228.198090 425.068176,156.124725 C416.448669,131.720474 411.208069,106.565437 408.906525,80.760696 C407.739166,67.672127 405.700104,54.662220 404.473694,41.577518 C403.999908,36.522667 403.805481,31.137602 405.026886,26.291929 C407.479736,16.560717 413.882874,12.037321 423.787903,12.980925 C440.178345,14.542362 456.506195,16.760437 473.292908,18.782619 z M578.363403,464.347748 C615.531311,446.366882 654.581116,435.908630 694.772705,429.284882 C697.708374,428.801056 700.752136,428.857452 703.745483,428.859894 C714.899902,428.868988 720.458801,434.582397 718.691895,445.492645 C716.009277,462.057404 713.484558,478.739502 709.260254,494.946198 C694.406738,551.932251 666.318115,602.423340 631.191589,649.183105 C575.914368,722.766968 508.061218,783.052307 432.927094,835.552307 C431.018921,836.885681 429.046265,838.127625 427.153870,839.482422 C422.472626,842.833557 417.533234,844.040344 412.248444,841.064758 C406.852631,838.026794 404.090637,833.218079 404.209808,827.096191 C404.527344,810.783264 404.724487,794.456909 405.573883,778.167480 C407.684601,737.688477 413.126068,697.680664 423.966522,658.536804 C436.856445,611.992310 456.846161,569.063904 488.758606,532.264648 C513.768555,503.424927 543.806946,481.217163 578.363403,464.347748 z M100.761627,612.221680 C75.728386,572.424377 56.110188,530.629822 45.663021,484.961426 C42.630875,471.706848 40.741016,458.167358 38.833408,444.686859 C37.390755,434.492065 42.754341,427.939545 52.986912,429.076324 C69.119164,430.868469 85.245743,433.507080 101.069740,437.122314 C140.869492,446.215149 178.476105,460.947479 212.772552,483.436096 C263.321442,516.581604 297.953369,562.429321 320.055481,618.236816 C334.840118,655.568054 343.272247,694.426331 348.081482,734.171936 C351.726166,764.293335 353.368927,794.520508 353.156128,824.854004 C353.142120,826.849976 353.278076,828.905640 352.863708,830.830078 C350.998230,839.494263 340.934357,847.105835 330.938843,839.874878 C313.414551,827.197754 295.720337,814.735718 278.557312,801.583313 C248.662613,778.674316 220.522430,753.696289 193.948929,727.012268 C159.090790,692.009094 127.388931,654.396790 100.761627,612.221680 z"
+	/>
+</svg>
diff --git a/frontend/src/lib/components/icons/index.ts b/frontend/src/lib/components/icons/index.ts
index adc460624b..20c541a14c 100644
--- a/frontend/src/lib/components/icons/index.ts
+++ b/frontend/src/lib/components/icons/index.ts
@@ -68,6 +68,7 @@ import GraphqlIcon from './GraphqlIcon.svelte'
 import NocoDbIcon from './NocoDbIcon.svelte'
 import AzureIcon from './AzureIcon.svelte'
 import OktaIcon from './OktaIcon.svelte'
+import Auth0Icon from './Auth0Icon.svelte'
 import MsSqlServerIcon from './MSSqlServerIcon.svelte'
 import AuthentikIcon from './AuthentikIcon.svelte'
 import AutheliaIcon from './AutheliaIcon.svelte'
@@ -170,6 +171,7 @@ export const APP_TO_ICON_COMPONENT = {
 	nocodb: NocoDbIcon,
 	azure: AzureIcon,
 	okta: OktaIcon,
+	auth0: Auth0Icon,
 	authentik: AuthentikIcon,
 	authelia: AutheliaIcon,
 	kanidm: KanidmIcon,
@@ -268,6 +270,7 @@ export {
 	AzureIcon,
 	MicrosoftIcon,
 	OktaIcon,
+	Auth0Icon,
 	AuthentikIcon,
 	AutheliaIcon,
 	KanidmIcon,