From b1a6ac5e78b58d9d8d4811e963011c74c3ef1acb Mon Sep 17 00:00:00 2001
From: Scott Trinh <scott@scotttrinh.com>
Date: Mon, 6 Nov 2023 11:51:50 -0500
Subject: [PATCH] Add auth config for allowed_redirect_urls

---
 shared/studio/tabs/auth/authAdmin.module.scss |  1 +
 shared/studio/tabs/auth/index.tsx             | 73 +++++++++++++++++++
 .../tabs/auth/loginuipreview.module.scss      |  2 +
 shared/studio/tabs/auth/state/index.tsx       | 27 ++++++-
 4 files changed, 101 insertions(+), 2 deletions(-)

diff --git a/shared/studio/tabs/auth/authAdmin.module.scss b/shared/studio/tabs/auth/authAdmin.module.scss
index 835f0d4f..672eae89 100644
--- a/shared/studio/tabs/auth/authAdmin.module.scss
+++ b/shared/studio/tabs/auth/authAdmin.module.scss
@@ -232,6 +232,7 @@
   min-width: 0;
   max-width: 100%;
 
+  textarea,
   input {
     font-family: inherit;
     line-height: inherit;
diff --git a/shared/studio/tabs/auth/index.tsx b/shared/studio/tabs/auth/index.tsx
index 70bd6265..634d807d 100644
--- a/shared/studio/tabs/auth/index.tsx
+++ b/shared/studio/tabs/auth/index.tsx
@@ -278,6 +278,54 @@ const ConfigPage = observer(function ConfigPage() {
             </div>
           </div>
         </div>
+
+        <div className={styles.gridItem}>
+          <div className={styles.configName}>allowed_redirect_urls</div>
+          <div className={styles.configInputWrapper}>
+            <div className={styles.configInput}>
+              {state.configData ? (
+                <>
+                  <TextArea
+                    value={
+                      state.draftAllowedRedirectUrls.value ??
+                      state.configData.allowed_redirect_urls
+                    }
+                    onChange={(urls) => state.draftAllowedRedirectUrls.setValue(urls)}
+                    error={state.draftAllowedRedirectUrls.error}
+                    size={32.5}
+                  />
+                  {state.draftAllowedRedirectUrls.value != null ? (
+                    <>
+                      <Button
+                        className={styles.button}
+                        label={
+                          state.draftTokenTime.updating ? "Updating" : "Update"
+                        }
+                        disabled={!!state.draftAllowedRedirectUrls.error}
+                        loading={state.draftAllowedRedirectUrls.updating}
+                        onClick={() => state.draftAllowedRedirectUrls.update()}
+                      />
+                      <Button
+                        className={styles.button}
+                        label="Cancel"
+                        onClick={() => state.draftAllowedRedirectUrls.setValue(null)}
+                      />
+                    </>
+                  ) : null}
+                </>
+              ) : (
+                "loading..."
+              )}
+            </div>
+            <div className={styles.configExplain}>
+                New line seperated list of URLs that will be checked against
+                this list to ensure they are going to a trusted domain controlled
+                by the application. URLs are matched based on checking if the
+                candidate redirect URL is a match or a subdirectory of any of
+                these allowed URLs
+            </div>
+          </div>
+        </div>
       </div>
 
       <div className={styles.header}>Providers</div>
@@ -853,3 +901,28 @@ function Input({
     </div>
   );
 }
+
+function TextArea({
+  value,
+  onChange,
+  error,
+  size,
+}: {
+  value: string;
+  onChange: (val: string) => void;
+  error?: string | null;
+  size?: number;
+}) {
+  return (
+    <div className={styles.inputWrapper}>
+      <div className={cn(styles.input, {[styles.error]: !!error})}>
+        <textarea
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          style={{height: 22 * (value?.split("\n").length ?? 1) + 10 + "px", width: size ? `${size}ch` : undefined}}
+        />
+      </div>
+      {error ? <div className={styles.inputErrorMessage}>{error}</div> : null}
+    </div>
+  );
+}
diff --git a/shared/studio/tabs/auth/loginuipreview.module.scss b/shared/studio/tabs/auth/loginuipreview.module.scss
index ef37f224..005504df 100644
--- a/shared/studio/tabs/auth/loginuipreview.module.scss
+++ b/shared/studio/tabs/auth/loginuipreview.module.scss
@@ -64,6 +64,7 @@
     opacity: 0.7;
   }
 
+  form textarea,
   form input {
     border-radius: 8px;
     border: 1px solid #dee2e6;
@@ -196,6 +197,7 @@
       color: #dee2e6;
     }
 
+    form textarea,
     form input {
       border-color: #495057;
       background: #31373d;
diff --git a/shared/studio/tabs/auth/state/index.tsx b/shared/studio/tabs/auth/state/index.tsx
index 61cbe416..a5472aef 100644
--- a/shared/studio/tabs/auth/state/index.tsx
+++ b/shared/studio/tabs/auth/state/index.tsx
@@ -13,6 +13,7 @@ import {AppleIcon, AzureIcon, GithubIcon, GoogleIcon} from "../icons";
 export interface AuthConfigData {
   signing_key_exists: boolean;
   token_time_to_live: string;
+  allowed_redirect_urls: string;
 }
 
 export type OAuthProviderData = {
@@ -107,6 +108,25 @@ export class AuthAdminState extends Model({
       return /^\d+$/.test(dur) ? null : "Invalid duration";
     }
   ),
+  draftAllowedRedirectUrls: createDraftAuthConfig(
+    "allowed_redirect_urls",
+    "std::str",
+    (urls) => {
+      if (urls === null) return null;
+
+      const urlList = urls.split("\n").filter((str) => str.trim() !== "");
+      if (urlList.length > 128) {
+        return "Too many URLs, maximum supported number of URLs is 128."
+      }
+
+      return null;
+    },
+    (urls) => {
+      if (urls === null) return null;
+      const urlList = urls.split("\n").filter((str) => str.trim() !== "");
+      return `{${urlList.map((u) => `'${u}'`).join(", ")}}`;
+    }
+  ),
 
   draftProviderConfig: prop<DraftProviderConfig | null>(null),
   draftUIConfig: prop<DraftUIConfig | null>(null),
@@ -183,6 +203,7 @@ export class AuthAdminState extends Model({
       select cfg::Config.extensions[is AuthConfig] {
         signing_key_exists := signing_key_exists(),
         token_time_to_live_seconds := <str>duration_get(.token_time_to_live, 'totalseconds'),
+        allowed_redirect_urls,
         providers: {
           _typename := .__type__.name,
           name,
@@ -211,6 +232,7 @@ export class AuthAdminState extends Model({
       this.configData = {
         signing_key_exists: data.signing_key_exists,
         token_time_to_live: data.token_time_to_live_seconds,
+        allowed_redirect_urls: data.allowed_redirect_urls.join("\n"),
       };
       this.providers = data.providers;
       this.uiConfig = data.ui ?? false;
@@ -420,7 +442,8 @@ export class DraftProviderConfig extends Model({
 function createDraftAuthConfig(
   name: string,
   type: string,
-  validate: (val: string | null) => string | null
+  validate: (val: string | null) => string | null,
+  transform: (val: string | null) => string | null = JSON.stringify
 ) {
   @model(`DraftAuthConfig/${name}`)
   class DraftAuthConfig extends Model({
@@ -447,7 +470,7 @@ function createDraftAuthConfig(
         await conn.execute(
           `
     configure current database set
-      ext::auth::AuthConfig::${name} := <${type}>${JSON.stringify(this.value)}`
+      ext::auth::AuthConfig::${name} := <${type}>${transform(this.value)}`
         );
         await state.refreshConfig();
         this.setValue(null);