From d9619ffea41a45a5bfd5428bb04bcb7597b3cff4 Mon Sep 17 00:00:00 2001
From: James Clarke <james@edgedb.com>
Date: Thu, 8 Feb 2024 22:02:34 +0000
Subject: [PATCH] Abstract app config to handle old and new schema + remove
 individual update buttons for core config ui

---
 shared/studio/tabs/auth/authAdmin.module.scss |   1 +
 shared/studio/tabs/auth/index.tsx             | 490 +++++++----------
 shared/studio/tabs/auth/loginUIPreview.tsx    |  14 +-
 shared/studio/tabs/auth/state/index.tsx       | 495 ++++++++++++------
 4 files changed, 514 insertions(+), 486 deletions(-)

diff --git a/shared/studio/tabs/auth/authAdmin.module.scss b/shared/studio/tabs/auth/authAdmin.module.scss
index f1bf5faf..0bac4903 100644
--- a/shared/studio/tabs/auth/authAdmin.module.scss
+++ b/shared/studio/tabs/auth/authAdmin.module.scss
@@ -288,6 +288,7 @@
   input {
     font-family: inherit;
     line-height: inherit;
+    font-size: 14px;
     border: 0;
     outline: 0;
     background: none;
diff --git a/shared/studio/tabs/auth/index.tsx b/shared/studio/tabs/auth/index.tsx
index 9087feb0..d0a3959d 100644
--- a/shared/studio/tabs/auth/index.tsx
+++ b/shared/studio/tabs/auth/index.tsx
@@ -31,6 +31,8 @@ import {
   LocalEmailPasswordProviderData,
   SMTPSecurity,
   smtpSecurity,
+  DraftAppConfig,
+  AbstractDraftConfig,
 } from "./state";
 
 import {encodeB64} from "edgedb/dist/primitives/buffer";
@@ -191,6 +193,8 @@ function CopyUrl({url}: {url: string}) {
 const ConfigPage = observer(function ConfigPage() {
   const state = useTabState(AuthAdminState);
 
+  const coreConfig = state.draftCoreConfig;
+
   return (
     <div className={styles.tabContent}>
       <div className={styles.docsNote}>
@@ -209,243 +213,17 @@ const ConfigPage = observer(function ConfigPage() {
 
       <div className={styles.header}>Auth Configuration</div>
       <div className={styles.configGrid}>
-        <div className={styles.gridItem}>
-          <div className={styles.configName}>app_name</div>
-          <div className={styles.configInputWrapper}>
-            <div className={styles.configInput}>
-              {state.configData ? (
-                <>
-                  <Input
-                    size={32}
-                    value={
-                      state.draftAppName.value ??
-                      state.configData.app_name ??
-                      ""
-                    }
-                    onChange={(appName) =>
-                      state.draftAppName.setValue(
-                        appName.trim() === "" ? null : appName
-                      )
-                    }
-                    error={state.draftAppName.error}
-                  />
-                  {state.draftAppName.value != null ? (
-                    <>
-                      <Button
-                        className={styles.button}
-                        label={
-                          state.draftAppName.updating ? "Updating" : "Update"
-                        }
-                        disabled={!!state.draftAppName.error}
-                        loading={state.draftAppName.updating}
-                        onClick={() => state.draftAppName.update()}
-                      />
-                      <Button
-                        className={styles.button}
-                        label="Cancel"
-                        onClick={() => state.draftAppName.setValue(null)}
-                      />
-                    </>
-                  ) : null}
-                </>
-              ) : (
-                "loading..."
-              )}
-            </div>
-            <div className={styles.configExplain}>
-              The name of your application.
-            </div>
-          </div>
-        </div>
-
-        <div className={styles.gridItem}>
-          <div className={styles.configName}>logo_url</div>
-          <div className={styles.configInputWrapper}>
-            <div className={styles.configInput}>
-              {state.configData ? (
-                <>
-                  <Input
-                    size={32}
-                    value={
-                      state.draftLogoUrl.value ??
-                      state.configData.logo_url ??
-                      ""
-                    }
-                    onChange={(logoUrl) =>
-                      state.draftLogoUrl.setValue(
-                        logoUrl.trim() === "" ? null : logoUrl
-                      )
-                    }
-                    error={state.draftLogoUrl.error}
-                  />
-                  {state.draftLogoUrl.value != null ? (
-                    <>
-                      <Button
-                        className={styles.button}
-                        label={
-                          state.draftLogoUrl.updating ? "Updating" : "Update"
-                        }
-                        disabled={!!state.draftLogoUrl.error}
-                        loading={state.draftLogoUrl.updating}
-                        onClick={() => state.draftLogoUrl.update()}
-                      />
-                      <Button
-                        className={styles.button}
-                        label="Cancel"
-                        onClick={() => state.draftLogoUrl.setValue(null)}
-                      />
-                    </>
-                  ) : null}
-                </>
-              ) : (
-                "loading..."
-              )}
-            </div>
-            <div className={styles.configExplain}>
-              A url to an image of your application's logo.
-            </div>
-          </div>
-        </div>
-
-        <div className={styles.gridItem}>
-          <div className={styles.configName}>dark_logo_url</div>
-          <div className={styles.configInputWrapper}>
-            <div className={styles.configInput}>
-              {state.configData ? (
-                <>
-                  <Input
-                    size={32}
-                    value={
-                      state.draftDarkLogoUrl.value ??
-                      state.configData.dark_logo_url ??
-                      ""
-                    }
-                    onChange={(logoUrl) =>
-                      state.draftDarkLogoUrl.setValue(
-                        logoUrl.trim() === "" ? null : logoUrl
-                      )
-                    }
-                    error={state.draftDarkLogoUrl.error}
-                  />
-                  {state.draftDarkLogoUrl.value != null ? (
-                    <>
-                      <Button
-                        className={styles.button}
-                        label={
-                          state.draftDarkLogoUrl.updating ? "Updating" : "Update"
-                        }
-                        disabled={!!state.draftDarkLogoUrl.error}
-                        loading={state.draftDarkLogoUrl.updating}
-                        onClick={() => state.draftDarkLogoUrl.update()}
-                      />
-                      <Button
-                        className={styles.button}
-                        label="Cancel"
-                        onClick={() => state.draftDarkLogoUrl.setValue(null)}
-                      />
-                    </>
-                  ) : null}
-                </>
-              ) : (
-                "loading..."
-              )}
-            </div>
-            <div className={styles.configExplain}>
-              A url to an image of your application's logo to be used with
-              the dark theme.
-            </div>
-          </div>
-        </div>
+        {state.newAppAuthSchema ? (
+          <AppConfigForm draft={coreConfig?.appConfig ?? null} />
+        ) : null}
 
-        <div className={styles.gridItem}>
-          <div className={styles.configName}>brand_color</div>
-          <div className={styles.configInputWrapper}>
-            <div className={styles.configInput}>
-              {state.configData ? (
-                <>
-                  <div className={styles.inputWrapper}>
-                    <ColorPickerInput
-                      color={
-                        state.draftBrandColor.value ??
-                        state.configData.brand_color ??
-                        ""
-                      }
-                      onChange={(color) =>
-                        state.draftBrandColor.setValue(color.slice(1))
-                      }
-                    />
-                  </div>
-                  <ColorPickerPopup
-                    color={
-                      state.draftBrandColor.value ??
-                      state.configData.brand_color ??
-                      ""
-                    }
-                    onChange={(color) =>
-                      state.draftBrandColor.setValue(color.slice(1))
-                    }
-                  />
-                  {state.draftBrandColor.value != null ? (
-                    <>
-                      <Button
-                        className={styles.button}
-                        label={
-                          state.draftBrandColor.updating ? "Updating" : "Update"
-                        }
-                        disabled={!!state.draftBrandColor.error}
-                        loading={state.draftBrandColor.updating}
-                        onClick={() => state.draftBrandColor.update()}
-                      />
-                      <Button
-                        className={styles.button}
-                        label="Cancel"
-                        onClick={() => state.draftBrandColor.setValue(null)}
-                      />
-                    </>
-                  ) : null}
-                </>
-              ) : (
-                "loading..."
-              )}
-            </div>
-            <div className={styles.configExplain}>
-              The brand color of your application as a hex string.
-            </div>
-          </div>
-        </div>
         <div className={styles.gridItem}>
           <div className={styles.configName}>auth_signing_key</div>
           <div className={styles.configInputWrapper}>
             <div className={styles.configInput}>
-              {state.configData ? (
-                state.draftSigningKey.value !== null ||
-                !state.configData.signing_key_exists ? (
-                  <>
-                    <Input
-                      value={state.draftSigningKey.value ?? ""}
-                      onChange={(key) => state.draftSigningKey.setValue(key)}
-                      error={state.draftSigningKey.error}
-                      size={32.5}
-                      showGenerateKey
-                    />
-                    <Button
-                      className={styles.button}
-                      label={
-                        state.draftSigningKey.updating ? "Updating" : "Update"
-                      }
-                      disabled={!!state.draftSigningKey.error}
-                      loading={state.draftSigningKey.updating}
-                      onClick={() => state.draftSigningKey.update()}
-                    />
-                    {state.configData.signing_key_exists ? (
-                      <Button
-                        className={styles.button}
-                        label="Cancel"
-                        onClick={() => state.draftSigningKey.setValue(null)}
-                      />
-                    ) : null}
-                  </>
-                ) : (
+              {coreConfig ? (
+                coreConfig._auth_signing_key == null &&
+                state.configData!.signing_key_exists ? (
                   <>
                     <div
                       className={cn(
@@ -459,9 +237,21 @@ const ConfigPage = observer(function ConfigPage() {
                     <Button
                       className={styles.button}
                       label="Change"
-                      onClick={() => state.draftSigningKey.setValue("")}
+                      onClick={() =>
+                        coreConfig.setConfigValue("auth_signing_key", "")
+                      }
                     />
                   </>
+                ) : (
+                  <Input
+                    value={coreConfig._auth_signing_key ?? ""}
+                    onChange={(key) =>
+                      coreConfig.setConfigValue("auth_signing_key", key)
+                    }
+                    error={coreConfig.signingKeyError}
+                    size={32.5}
+                    showGenerateKey
+                  />
                 )
               ) : (
                 "loading..."
@@ -478,38 +268,18 @@ const ConfigPage = observer(function ConfigPage() {
           <div className={styles.configName}>token_time_to_live</div>
           <div className={styles.configInputWrapper}>
             <div className={styles.configInput}>
-              {state.configData ? (
-                <>
-                  <Input
-                    size={16}
-                    value={
-                      state.draftTokenTime.value ??
-                      state.configData.token_time_to_live
-                    }
-                    onChange={(dur) =>
-                      state.draftTokenTime.setValue(dur.toUpperCase())
-                    }
-                    error={state.draftTokenTime.error}
-                  />
-                  {state.draftTokenTime.value != null ? (
-                    <>
-                      <Button
-                        className={styles.button}
-                        label={
-                          state.draftTokenTime.updating ? "Updating" : "Update"
-                        }
-                        disabled={!!state.draftTokenTime.error}
-                        loading={state.draftTokenTime.updating}
-                        onClick={() => state.draftTokenTime.update()}
-                      />
-                      <Button
-                        className={styles.button}
-                        label="Cancel"
-                        onClick={() => state.draftTokenTime.setValue(null)}
-                      />
-                    </>
-                  ) : null}
-                </>
+              {coreConfig ? (
+                <Input
+                  size={16}
+                  value={coreConfig.getConfigValue("token_time_to_live")}
+                  onChange={(dur) =>
+                    coreConfig.setConfigValue(
+                      "token_time_to_live",
+                      dur.toUpperCase()
+                    )
+                  }
+                  error={coreConfig.tokenTimeToLiveError}
+                />
               ) : (
                 "loading..."
               )}
@@ -525,41 +295,16 @@ const ConfigPage = observer(function ConfigPage() {
           <div className={styles.configName}>allowed_redirect_urls</div>
           <div className={styles.configInputWrapper}>
             <div className={styles.configInput}>
-              {state.configData ? (
+              {coreConfig ? (
                 <>
                   <TextArea
-                    value={
-                      state.draftAllowedRedirectUrls.value ??
-                      state.configData.allowed_redirect_urls
-                    }
+                    value={coreConfig.getConfigValue("allowed_redirect_urls")}
                     onChange={(urls) =>
-                      state.draftAllowedRedirectUrls.setValue(urls)
+                      coreConfig.setConfigValue("allowed_redirect_urls", urls)
                     }
-                    error={state.draftAllowedRedirectUrls.error}
+                    error={coreConfig.allowedRedirectUrlsError}
                     size={32.5}
                   />
-                  {state.draftAllowedRedirectUrls.value != null ? (
-                    <>
-                      <Button
-                        className={styles.button}
-                        label={
-                          state.draftAllowedRedirectUrls.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..."
@@ -575,10 +320,114 @@ const ConfigPage = observer(function ConfigPage() {
           </div>
         </div>
       </div>
+
+      {coreConfig ? <StickyBottomBar draft={coreConfig} /> : null}
     </div>
   );
 });
 
+const AppConfigForm = observer(function AppConfigForm({
+  draft,
+}: {
+  draft: DraftAppConfig | null;
+}) {
+  return (
+    <>
+      <div className={styles.gridItem}>
+        <div className={styles.configName}>app_name</div>
+        <div className={styles.configInputWrapper}>
+          <div className={styles.configInput}>
+            {draft ? (
+              <Input
+                size={32}
+                value={draft.getConfigValue("app_name")}
+                onChange={(val) => draft.setConfigValue("app_name", val)}
+              />
+            ) : (
+              "loading..."
+            )}
+          </div>
+          <div className={styles.configExplain}>
+            The name of your application to be shown on the login screen.
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.gridItem}>
+        <div className={styles.configName}>logo_url</div>
+        <div className={styles.configInputWrapper}>
+          <div className={styles.configInput}>
+            {draft ? (
+              <Input
+                size={32}
+                value={draft.getConfigValue("logo_url")}
+                onChange={(val) => draft.setConfigValue("logo_url", val)}
+              />
+            ) : (
+              "loading..."
+            )}
+          </div>
+          <div className={styles.configExplain}>
+            A url to an image of your application's logo.
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.gridItem}>
+        <div className={styles.configName}>dark_logo_url</div>
+        <div className={styles.configInputWrapper}>
+          <div className={styles.configInput}>
+            {draft ? (
+              <Input
+                size={32}
+                value={draft.getConfigValue("dark_logo_url")}
+                onChange={(val) => draft.setConfigValue("dark_logo_url", val)}
+              />
+            ) : (
+              "loading..."
+            )}
+          </div>
+          <div className={styles.configExplain}>
+            A url to an image of your application's logo to be used with the
+            dark theme.
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.gridItem}>
+        <div className={styles.configName}>brand_color</div>
+        <div className={styles.configInputWrapper}>
+          <div className={styles.configInput}>
+            {draft ? (
+              <>
+                <div className={styles.inputWrapper}>
+                  <ColorPickerInput
+                    color={draft.getConfigValue("brand_color")}
+                    onChange={(color) =>
+                      draft.setConfigValue("brand_color", color.slice(1))
+                    }
+                  />
+                </div>
+                <ColorPickerPopup
+                  color={draft.getConfigValue("brand_color")}
+                  onChange={(color) =>
+                    draft.setConfigValue("brand_color", color.slice(1))
+                  }
+                />
+              </>
+            ) : (
+              "loading..."
+            )}
+          </div>
+          <div className={styles.configExplain}>
+            The brand color of your application as a hex string.
+          </div>
+        </div>
+      </div>
+    </>
+  );
+});
+
 const ProvidersPage = observer(function ProvidersPage() {
   const state = useTabState(AuthAdminState);
 
@@ -626,6 +475,33 @@ const ProvidersPage = observer(function ProvidersPage() {
   );
 });
 
+const StickyBottomBar = observer(function StickyBottomBar({
+  draft,
+}: {
+  draft: AbstractDraftConfig;
+}) {
+  return (
+    <div className={styles.stickyBottomBar}>
+      <div className={styles.formButtons}>
+        <Button
+          className={styles.button}
+          label="Update"
+          onClick={() => draft.update()}
+          disabled={draft.formError || !draft.formChanged || draft.updating}
+          loading={draft.updating}
+        />
+        {draft.formChanged ? (
+          <Button
+            className={styles.button}
+            label="Clear Changes"
+            onClick={() => draft.clearForm()}
+          />
+        ) : null}
+      </div>
+    </div>
+  );
+});
+
 const SMTPConfigPage = observer(function SMTPConfigPage() {
   const state = useTabState(AuthAdminState);
 
@@ -814,24 +690,7 @@ const SMTPConfigPage = observer(function SMTPConfigPage() {
         </div>
       </div>
 
-      <div className={styles.stickyBottomBar}>
-        <div className={styles.formButtons}>
-          <Button
-            className={styles.button}
-            label="Update"
-            onClick={() => smtp.update()}
-            disabled={smtp.formError || !smtp.formChanged || smtp.updating}
-            loading={smtp.updating}
-          />
-          {smtp.formChanged ? (
-            <Button
-              className={styles.button}
-              label="Clear Changes"
-              onClick={() => smtp.clearForm()}
-            />
-          ) : null}
-        </div>
-      </div>
+      <StickyBottomBar draft={smtp} />
     </div>
   );
 });
@@ -886,6 +745,7 @@ const UIConfigForm = observer(function UIConfig({
             </div>
           </div>
 
+          {draft.appConfig ? <AppConfigForm draft={draft.appConfig} /> : null}
         </div>
 
         <div className={styles.stickyBottomBar}>
@@ -944,7 +804,11 @@ const UIConfigForm = observer(function UIConfig({
           </div>
         </div>
         <LoginUIPreview
-          authAdminState={state}
+          draft={
+            state.newAppAuthSchema
+              ? state.draftCoreConfig!.appConfig!
+              : draft.appConfig!
+          }
           providers={state.providers ?? []}
           darkTheme={draft.showDarkTheme ?? theme == Theme.dark}
         />
diff --git a/shared/studio/tabs/auth/loginUIPreview.tsx b/shared/studio/tabs/auth/loginUIPreview.tsx
index cc0e2a03..e8e0b838 100644
--- a/shared/studio/tabs/auth/loginUIPreview.tsx
+++ b/shared/studio/tabs/auth/loginUIPreview.tsx
@@ -4,7 +4,7 @@ import cn from "@edgedb/common/utils/classNames";
 
 import {
   AuthProviderData,
-  AuthAdminState,
+  DraftAppConfig,
   providers as providersInfo,
 } from "./state";
 
@@ -12,18 +12,18 @@ import styles from "./loginuipreview.module.scss";
 import {getColourVariables, normaliseHexColor} from "./colourUtils";
 
 export function LoginUIPreview({
-  authAdminState,
+  draft,
   providers,
   darkTheme,
 }: {
-  authAdminState: AuthAdminState;
+  draft: DraftAppConfig;
   providers: AuthProviderData[];
   darkTheme: boolean;
 }) {
-  const appName = authAdminState.configData?.app_name ?? null;
-  const brandColor = authAdminState.configData?.brand_color ?? "1f8aed";
-  const logoUrl = authAdminState.configData?.logo_url ?? null;
-  const darkLogoUrl = authAdminState.configData?.dark_logo_url ?? null;
+  const appName = draft.getConfigValue("app_name");
+  const brandColor = draft.getConfigValue("brand_color") || "1f8aed";
+  const logoUrl = draft.getConfigValue("logo_url");
+  const darkLogoUrl = draft.getConfigValue("dark_logo_url");
 
   const colorVariables = getColourVariables(normaliseHexColor(brandColor));
 
diff --git a/shared/studio/tabs/auth/state/index.tsx b/shared/studio/tabs/auth/state/index.tsx
index 8f322d78..592d304a 100644
--- a/shared/studio/tabs/auth/state/index.tsx
+++ b/shared/studio/tabs/auth/state/index.tsx
@@ -1,5 +1,6 @@
 import {action, computed, observable, runInAction} from "mobx";
 import {
+  findParent,
   getParent,
   Model,
   model,
@@ -11,16 +12,19 @@ import {parsers} from "../../../components/dataEditor/parsers";
 import {connCtx, dbCtx} from "../../../state";
 import {AppleIcon, AzureIcon, GithubIcon, GoogleIcon} from "../icons";
 
-export interface AuthConfigData {
-  signing_key_exists: boolean;
-  token_time_to_live: string;
-  allowed_redirect_urls: string;
+interface AuthAppData {
   app_name: string | null;
   logo_url: string | null;
   dark_logo_url: string | null;
   brand_color: string | null;
 }
 
+export interface AuthConfigData extends AuthAppData {
+  signing_key_exists: boolean;
+  token_time_to_live: string;
+  allowed_redirect_urls: string;
+}
+
 export type OAuthProviderData = {
   name: string;
   _typename:
@@ -112,89 +116,7 @@ export const providerTypenames = Object.keys(providers) as ProviderTypename[];
 export class AuthAdminState extends Model({
   selectedTab: prop<"config" | "providers" | "smtp">("config").withSetter(),
 
-  draftSigningKey: createDraftAuthConfig(
-    "auth_signing_key",
-    "std::str",
-    (key) =>
-      (key ?? "") === ""
-        ? "Signing key is required"
-        : (key ?? "").length < 32
-        ? "Signing key too short"
-        : null
-  ),
-  draftTokenTime: createDraftAuthConfig(
-    "token_time_to_live",
-    "std::duration",
-    (dur) => {
-      if (dur === null) return null;
-      dur = dur.trim();
-      if (!dur.length) {
-        return `Duration is required`;
-      }
-      try {
-        if (/^\d+$/.test(dur)) return null;
-        parsers["std::duration"](dur, null);
-      } catch {
-        return `Invalid duration`;
-      }
-      return null;
-    }
-  ),
-  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.";
-      }
-
-      const invalidUrls = urlList.filter((u) => {
-        try {
-          new URL(u);
-          return false;
-        } catch (e) {
-          return true;
-        }
-      });
-
-      if (invalidUrls.length > 0) {
-        return `List contained the following invalid URLs:\n${invalidUrls.join(
-          ",\n"
-        )}`;
-      }
-
-      return null;
-    },
-    (urls) => {
-      if (urls === null) return "{}";
-      const urlList = urls.split("\n").filter((str) => str.trim() !== "");
-      return `{${urlList.map((u) => JSON.stringify(u)).join(", ")}}`;
-    }
-  ),
-  draftAppName: createDraftAuthConfig(
-    "app_name",
-    "std::str",
-    () => null,
-  ),
-  draftLogoUrl: createDraftAuthConfig(
-    "logo_url",
-    "std::str",
-    () => null,
-  ),
-  draftDarkLogoUrl: createDraftAuthConfig(
-    "dark_logo_url",
-    "std::str",
-    () => null,
-  ),
-  draftBrandColor: createDraftAuthConfig(
-    "brand_color",
-    "std::str",
-    () => null,
-  ),
-
+  draftCoreConfig: prop<DraftCoreConfig | null>(null),
   draftProviderConfig: prop<DraftProviderConfig | null>(null),
   draftUIConfig: prop<DraftUIConfig | null>(null),
   draftSMTPConfig: prop(() => new DraftSMTPConfig({})),
@@ -207,6 +129,13 @@ export class AuthAdminState extends Model({
         .schemaData?.extensions.some((ext) => ext.name === "auth") ?? null
     );
   }
+  @computed
+  get newAppAuthSchema() {
+    return (
+      dbCtx.get(this)!.schemaData?.objectsByName.get("ext::auth::AuthConfig")
+        ?.properties["app_name"] != null
+    );
+  }
 
   @modelAction
   addDraftProvider() {
@@ -232,10 +161,21 @@ export class AuthAdminState extends Model({
     await this.refreshConfig();
   }
 
+  @modelAction
+  _createDraftCoreConfig() {
+    if (!this.draftCoreConfig) {
+      this.draftCoreConfig = new DraftCoreConfig({
+        appConfig: this.newAppAuthSchema ? new DraftAppConfig({}) : null,
+      });
+    }
+  }
+
   @modelAction
   enableUI() {
     if (!this.draftUIConfig) {
-      this.draftUIConfig = new DraftUIConfig({});
+      this.draftUIConfig = new DraftUIConfig({
+        appConfig: !this.newAppAuthSchema ? new DraftAppConfig({}) : null,
+      });
     }
   }
 
@@ -268,6 +208,14 @@ export class AuthAdminState extends Model({
 
   async refreshConfig() {
     const conn = connCtx.get(this)!;
+    const {newAppAuthSchema} = this;
+
+    const appConfigQuery = `
+    app_name,
+    logo_url,
+    dark_logo_url,
+    brand_color,
+    `;
 
     const {result} = await conn.query(
       `with module ext::auth
@@ -275,10 +223,7 @@ export class AuthAdminState extends Model({
         auth := assert_single(cfg::Config.extensions[is AuthConfig] {
           signing_key_exists := signing_key_exists(),
           token_time_to_live_seconds := <str>duration_get(.token_time_to_live, 'totalseconds'),
-          app_name,
-          logo_url,
-          dark_logo_url,
-          brand_color,
+          ${newAppAuthSchema ? appConfigQuery : ""}
           allowed_redirect_urls,
           providers: {
             _typename := .__type__.name,
@@ -290,6 +235,7 @@ export class AuthAdminState extends Model({
           ui: {
             redirect_to,
             redirect_to_on_signup,
+            ${newAppAuthSchema ? "" : appConfigQuery}
           }
         }),
         smtp := assert_single(cfg::Config.extensions[is SMTPConfig] {
@@ -316,13 +262,14 @@ export class AuthAdminState extends Model({
         signing_key_exists: auth.signing_key_exists,
         token_time_to_live: auth.token_time_to_live_seconds,
         allowed_redirect_urls: auth.allowed_redirect_urls.join("\n"),
-        app_name: auth.app_name,
-        logo_url: auth.logo_url,
-        dark_logo_url: auth.dark_logo_url,
-        brand_color: auth.brand_color,
+        app_name: auth.app_name ?? auth.ui?.app_name ?? null,
+        logo_url: auth.logo_url ?? auth.ui?.logo_url ?? null,
+        dark_logo_url: auth.dark_logo_url ?? auth.ui?.dark_logo_url ?? null,
+        brand_color: auth.brand_color ?? auth.ui?.brand_color ?? null,
       };
       this.providers = auth.providers;
       this.uiConfig = auth.ui ?? false;
+      this._createDraftCoreConfig();
       if (auth.ui) {
         this.enableUI();
       }
@@ -336,10 +283,267 @@ export class AuthAdminState extends Model({
   }
 }
 
-@model("AdminDraftUIConfig")
+export interface AbstractDraftConfig {
+  updating: boolean;
+  formChanged: boolean;
+  formError: boolean;
+  update: () => void;
+  clearForm: () => void;
+}
+
+type AuthCoreConfigName =
+  | "auth_signing_key"
+  | "token_time_to_live"
+  | "allowed_redirect_urls";
+
+@model("AuthAdmin/DraftCoreConfig")
+export class DraftCoreConfig
+  extends Model({
+    _auth_signing_key: prop<string | null>(null),
+    _token_time_to_live: prop<string | null>(null),
+    _allowed_redirect_urls: prop<string | null>(null),
+    appConfig: prop<DraftAppConfig | null>(),
+  })
+  implements AbstractDraftConfig
+{
+  getConfigValue(name: Exclude<AuthCoreConfigName, "auth_signing_key">) {
+    return (
+      this[`_${name}`] ??
+      (getParent<AuthAdminState>(this)?.configData || null)?.[name] ??
+      ""
+    );
+  }
+
+  @modelAction
+  setConfigValue(name: AuthCoreConfigName, val: string) {
+    this[`_${name}`] = val;
+  }
+
+  @computed
+  get signingKeyError() {
+    if (
+      this._auth_signing_key === null &&
+      getParent<AuthAdminState>(this)?.configData?.signing_key_exists
+    ) {
+      return null;
+    }
+    const key = this._auth_signing_key ?? "";
+    return key === ""
+      ? "Signing key is required"
+      : key.length < 32
+      ? "Signing key too short"
+      : null;
+  }
+
+  @computed
+  get tokenTimeToLiveError() {
+    let dur = this._token_time_to_live;
+    if (dur === null) return null;
+    dur = dur.trim();
+    if (!dur.length) {
+      return `Duration is required`;
+    }
+    try {
+      if (/^\d+$/.test(dur)) return null;
+      parsers["std::duration"](dur, null);
+    } catch {
+      return `Invalid duration`;
+    }
+    return null;
+  }
+
+  @computed
+  get allowedRedirectUrlsError() {
+    const urls = this._allowed_redirect_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.";
+    }
+
+    const invalidUrls = urlList.filter((u) => {
+      try {
+        new URL(u);
+        return false;
+      } catch (e) {
+        return true;
+      }
+    });
+
+    if (invalidUrls.length > 0) {
+      return `List contained the following invalid URLs:\n${invalidUrls.join(
+        ",\n"
+      )}`;
+    }
+
+    return null;
+  }
+
+  @computed
+  get formError() {
+    return (
+      !!this.signingKeyError ||
+      !!this.tokenTimeToLiveError ||
+      !!this.allowedRedirectUrlsError
+    );
+  }
+
+  @computed
+  get formChanged() {
+    return (
+      this._auth_signing_key != null ||
+      this._token_time_to_live != null ||
+      this._allowed_redirect_urls != null ||
+      (this.appConfig?.changed ?? false)
+    );
+  }
+
+  @modelAction
+  clearForm() {
+    this._auth_signing_key = null;
+    this._token_time_to_live = null;
+    this._allowed_redirect_urls = null;
+    this.appConfig?.clear();
+  }
+
+  @observable
+  updating = false;
+
+  @observable
+  error: string | null = null;
+
+  @action
+  async update() {
+    if (this.formError || !this.formChanged) return;
+
+    const conn = connCtx.get(this)!;
+    const state = getParent<AuthAdminState>(this)!;
+
+    this.updating = true;
+    this.error = null;
+
+    const query = (
+      [
+        {name: "auth_signing_key", cast: null, transform: null},
+        {name: "token_time_to_live", cast: "std::duration", transform: null},
+        {
+          name: "allowed_redirect_urls",
+          cast: null,
+          transform: (urls: string) => {
+            const urlList = urls
+              .split("\n")
+              .filter((str) => str.trim() !== "");
+            return `{${urlList.map((u) => JSON.stringify(u)).join(", ")}}`;
+          },
+        },
+      ] as const
+    )
+      .map(({name, cast, transform}) => {
+        const val = this[`_${name}`];
+        if (val == null) return null;
+        if (val.trim() === "") {
+          return `configure current database reset ext::auth::AuthConfig::${name};`;
+        }
+        return `configure current database set ext::auth::AuthConfig::${name} := ${
+          cast ? `<${cast}>` : ""
+        }${(transform ?? JSON.stringify)(val)};`;
+      })
+      .filter((s) => s != null) as string[];
+
+    if (this.appConfig) {
+      query.push(...this.appConfig.getUpdateQuery(true));
+    }
+
+    try {
+      await conn.execute(query.join("\n"));
+      await state.refreshConfig();
+      this.clearForm();
+    } catch (e) {
+      console.log(e);
+      runInAction(
+        () => (this.error = e instanceof Error ? e.message : String(e))
+      );
+    } finally {
+      runInAction(() => (this.updating = false));
+    }
+  }
+}
+
+@model("AuthAdmin/DraftAppConfig")
+export class DraftAppConfig extends Model({
+  _app_name: prop<string | null>(null),
+  _logo_url: prop<string | null>(null),
+  _dark_logo_url: prop<string | null>(null),
+  _brand_color: prop<string | null>(null),
+}) {
+  getConfigValue(name: keyof AuthAppData) {
+    return (
+      this[`_${name}`] ??
+      (findParent<AuthAdminState>(
+        this,
+        (parent) => parent instanceof AuthAdminState
+      )?.configData || null)?.[name] ??
+      ""
+    );
+  }
+
+  @modelAction
+  setConfigValue<Name extends keyof AuthAppData>(
+    name: Name,
+    val: AuthAppData[Name]
+  ) {
+    (this as any)[`_${name}`] = val;
+  }
+
+  @computed
+  get changed() {
+    return (
+      this._app_name != null ||
+      this._logo_url != null ||
+      this._dark_logo_url != null ||
+      this._brand_color != null
+    );
+  }
+
+  @modelAction
+  clear() {
+    this._app_name = null;
+    this._logo_url = null;
+    this._dark_logo_url = null;
+    this._brand_color = null;
+  }
+
+  getUpdateQuery(newSchema: boolean) {
+    if (!this.changed) return [];
+
+    return (["app_name", "logo_url", "dark_logo_url", "brand_color"] as const)
+      .map(
+        newSchema
+          ? (name) => {
+              const val = this[`_${name}`];
+              if (val == null) return null;
+              if (typeof val === "string" && val.trim() === "") {
+                return `configure current database reset ext::auth::AuthConfig::${name};`;
+              }
+              return `configure current database set ext::auth::AuthConfig::${name} := ${JSON.stringify(
+                val
+              )};`;
+            }
+          : (name) => {
+              const val = this.getConfigValue(name);
+              return val ? `${name} := ${JSON.stringify(val)}` : null;
+            }
+      )
+      .filter((s) => s != null) as string[];
+  }
+}
+
+@model("AuthAdmin/DraftUIConfig")
 export class DraftUIConfig extends Model({
   _redirect_to: prop<string | null>(null),
   _redirect_to_on_signup: prop<string | null>(null),
+  appConfig: prop<DraftAppConfig | null>(),
 
   showDarkTheme: prop<boolean | null>(null).withSetter(),
 }) {
@@ -372,7 +576,8 @@ export class DraftUIConfig extends Model({
   get formChanged() {
     return (
       this._redirect_to != null ||
-      this._redirect_to_on_signup != null
+      this._redirect_to_on_signup != null ||
+      (this.appConfig?.changed ?? false)
     );
   }
 
@@ -380,6 +585,7 @@ export class DraftUIConfig extends Model({
   clearForm() {
     this._redirect_to = null;
     this._redirect_to_on_signup = null;
+    this.appConfig?.clear();
   }
 
   @observable
@@ -406,17 +612,15 @@ export class DraftUIConfig extends Model({
             redirect_to := ${JSON.stringify(
               this.getConfigValue("redirect_to")
             )},
-            ${(
-              [
-                "redirect_to_on_signup",
-              ] as const
-            )
-              .map((name) => {
-                const val = this.getConfigValue(name);
-                return val ? `${name} := ${JSON.stringify(val)}` : null;
-              })
-              .filter((l) => l)
-              .join(",\n")}
+            ${[
+              ...(["redirect_to_on_signup"] as const)
+                .map((name) => {
+                  const val = this.getConfigValue(name);
+                  return val ? `${name} := ${JSON.stringify(val)}` : null;
+                })
+                .filter((l) => l),
+              ...(this.appConfig?.getUpdateQuery(false) ?? []),
+            ].join(",\n")}
           };`);
       await state.refreshConfig();
       this.clearForm();
@@ -430,18 +634,21 @@ export class DraftUIConfig extends Model({
   }
 }
 
-@model("AdminDraftSMTPConfig")
-export class DraftSMTPConfig extends Model({
-  _sender: prop<string | null>(null),
-  _host: prop<string | null>(null),
-  _port: prop<string | null>(null),
-  _username: prop<string | null>(null),
-  _password: prop<string | null>(null),
-  _security: prop<SMTPSecurity | null>(null),
-  _validate_certs: prop<boolean | null>(null),
-  _timeout_per_email: prop<string | null>(null),
-  _timeout_per_attempt: prop<string | null>(null),
-}) {
+@model("AuthAdmin/DraftSMTPConfig")
+export class DraftSMTPConfig
+  extends Model({
+    _sender: prop<string | null>(null),
+    _host: prop<string | null>(null),
+    _port: prop<string | null>(null),
+    _username: prop<string | null>(null),
+    _password: prop<string | null>(null),
+    _security: prop<SMTPSecurity | null>(null),
+    _validate_certs: prop<boolean | null>(null),
+    _timeout_per_email: prop<string | null>(null),
+    _timeout_per_attempt: prop<string | null>(null),
+  })
+  implements AbstractDraftConfig
+{
   getConfigValue(name: Exclude<keyof SMTPConfigData, "validate_certs">) {
     return (
       this[`_${name}`] ??
@@ -595,7 +802,7 @@ export class DraftSMTPConfig extends Model({
   }
 }
 
-@model("DraftProviderConfig")
+@model("AuthAdmin/DraftProviderConfig")
 export class DraftProviderConfig extends Model({
   selectedProviderType: prop<ProviderTypename>().withSetter(),
 
@@ -680,47 +887,3 @@ export class DraftProviderConfig extends Model({
     }
   }
 }
-
-function createDraftAuthConfig(
-  name: string,
-  type: string,
-  validate: (val: string | null) => string | null,
-  transform: (val: string | null) => string = JSON.stringify
-) {
-  @model(`DraftAuthConfig/${name}`)
-  class DraftAuthConfig extends Model({
-    value: prop<string | null>(null).withSetter(),
-  }) {
-    @computed
-    get error() {
-      return validate(this.value);
-    }
-
-    @observable
-    updating = false;
-
-    @action
-    async update() {
-      if (this.value == null || this.error) return;
-
-      const conn = connCtx.get(this)!;
-      const state = getParent<AuthAdminState>(this)!;
-
-      this.updating = true;
-
-      try {
-        await conn.execute(
-          `
-    configure current database set
-      ext::auth::AuthConfig::${name} := <${type}>${transform(this.value)}`
-        );
-        await state.refreshConfig();
-        this.setValue(null);
-      } finally {
-        runInAction(() => (this.updating = false));
-      }
-    }
-  }
-
-  return prop(() => new DraftAuthConfig({}));
-}