From 84d588a3b7eaf03045ac230d85a8e979c02b25e5 Mon Sep 17 00:00:00 2001
From: James Clarke <james@edgedb.com>
Date: Mon, 14 Oct 2024 23:37:13 +0100
Subject: [PATCH 1/2] Update auth admin design + add support for webhooks and
 openid connect providers

---
 shared/common/newui/button/index.tsx          |   31 +-
 .../newui/checkbox/checkbox.module.scss       |    8 +
 shared/common/newui/checkbox/index.tsx        |   22 +-
 shared/common/newui/loadingSkeleton/index.tsx |    5 +
 .../loadingSkeleton.module.scss               |   30 +
 shared/common/newui/panelTabs/index.tsx       |   33 +
 .../newui/panelTabs/panelTabs.module.scss     |   94 ++
 shared/common/newui/select/index.tsx          |    1 +
 shared/common/newui/textInput/index.tsx       |    3 +
 .../databasePage/databasePage.module.scss     |    4 +-
 shared/studio/tabs/ai/index.tsx               |   32 +-
 shared/studio/tabs/ai/prompts.tsx             |    2 +-
 shared/studio/tabs/ai/providers.tsx           |    2 +-
 shared/studio/tabs/auth/authAdmin.module.scss |  924 ++++++------
 shared/studio/tabs/auth/config.tsx            |  400 ++++++
 shared/studio/tabs/auth/index.tsx             | 1264 +----------------
 shared/studio/tabs/auth/loginUIPreview.tsx    |   29 +-
 .../tabs/auth/loginuipreview.module.scss      |    8 +-
 shared/studio/tabs/auth/providers.tsx         |  647 +++++++++
 shared/studio/tabs/auth/shared.tsx            |   55 +
 shared/studio/tabs/auth/smtp.tsx              |  253 ++++
 shared/studio/tabs/auth/state/index.tsx       |  332 ++++-
 shared/studio/tabs/auth/webhooks.tsx          |  196 +++
 web/src/app.module.scss                       |    2 +-
 web/src/app.tsx                               |    3 +-
 25 files changed, 2595 insertions(+), 1785 deletions(-)
 create mode 100644 shared/common/newui/loadingSkeleton/index.tsx
 create mode 100644 shared/common/newui/loadingSkeleton/loadingSkeleton.module.scss
 create mode 100644 shared/common/newui/panelTabs/index.tsx
 create mode 100644 shared/common/newui/panelTabs/panelTabs.module.scss
 create mode 100644 shared/studio/tabs/auth/config.tsx
 create mode 100644 shared/studio/tabs/auth/providers.tsx
 create mode 100644 shared/studio/tabs/auth/shared.tsx
 create mode 100644 shared/studio/tabs/auth/smtp.tsx
 create mode 100644 shared/studio/tabs/auth/webhooks.tsx

diff --git a/shared/common/newui/button/index.tsx b/shared/common/newui/button/index.tsx
index ac00ab8b..6adc35cb 100644
--- a/shared/common/newui/button/index.tsx
+++ b/shared/common/newui/button/index.tsx
@@ -2,7 +2,7 @@ import cn from "@edgedb/common/utils/classNames";
 
 import styles from "./button.module.scss";
 import Spinner from "../../ui/spinner";
-import {PropsWithChildren} from "react";
+import {CSSProperties, PropsWithChildren, useEffect, useState} from "react";
 
 interface _BaseButtonProps {
   className?: string;
@@ -12,6 +12,7 @@ interface _BaseButtonProps {
   rightIcon?: JSX.Element;
   disabled?: boolean;
   loading?: boolean;
+  style?: CSSProperties;
 }
 
 export interface ButtonProps extends _BaseButtonProps {
@@ -107,3 +108,31 @@ export function LinkButton({
     </a>
   );
 }
+
+export function ConfirmButton({onClick, children, ...props}: ButtonProps) {
+  const [confirming, setConfirming] = useState(false);
+
+  useEffect(() => {
+    if (confirming) {
+      const timer = setTimeout(() => setConfirming(false), 1000);
+
+      return () => clearTimeout(timer);
+    }
+  }, [confirming]);
+
+  return (
+    <Button
+      onClick={() => {
+        if (confirming) {
+          setConfirming(false);
+          onClick?.();
+        } else {
+          setConfirming(true);
+        }
+      }}
+      {...props}
+    >
+      {confirming ? "Confirm?" : children}
+    </Button>
+  );
+}
diff --git a/shared/common/newui/checkbox/checkbox.module.scss b/shared/common/newui/checkbox/checkbox.module.scss
index 995ae8c8..2cf420b7 100644
--- a/shared/common/newui/checkbox/checkbox.module.scss
+++ b/shared/common/newui/checkbox/checkbox.module.scss
@@ -43,6 +43,14 @@
     pointer-events: none;
   }
 
+  &.readonly {
+    pointer-events: none;
+
+    .check {
+      opacity: 0.5;
+    }
+  }
+
   @include darkTheme {
     color: #ccc;
 
diff --git a/shared/common/newui/checkbox/index.tsx b/shared/common/newui/checkbox/index.tsx
index 312e86f2..8822d96a 100644
--- a/shared/common/newui/checkbox/index.tsx
+++ b/shared/common/newui/checkbox/index.tsx
@@ -2,32 +2,40 @@ import cn from "@edgedb/common/utils/classNames";
 
 import styles from "./checkbox.module.scss";
 
-export interface CheckboxProps {
+export type CheckboxProps<Readonly extends boolean> = {
   className?: string;
   label?: string | JSX.Element;
   checked: boolean;
-  onChange: (checked: boolean) => void;
   disabled?: boolean;
-}
+  readOnly?: Readonly;
+} & (Readonly extends true
+  ? {
+      onChange?: (checked: boolean) => void;
+    }
+  : {
+      onChange: (checked: boolean) => void;
+    });
 
-export function Checkbox({
+export function Checkbox<Readonly extends boolean = false>({
   className,
   label,
   checked,
   onChange,
   disabled,
-}: CheckboxProps) {
+  readOnly,
+}: CheckboxProps<Readonly>) {
   return (
     <label
       className={cn(styles.checkbox, className, {
         [styles.disabled]: !!disabled,
+        [styles.readonly]: !!readOnly,
       })}
     >
       <input
         type="checkbox"
         checked={checked}
-        onChange={(e) => onChange(e.target.checked)}
-        disabled={disabled}
+        onChange={(e) => onChange?.(e.target.checked)}
+        disabled={disabled || readOnly}
       />
       <div className={styles.check} />
       {label}
diff --git a/shared/common/newui/loadingSkeleton/index.tsx b/shared/common/newui/loadingSkeleton/index.tsx
new file mode 100644
index 00000000..dcea6905
--- /dev/null
+++ b/shared/common/newui/loadingSkeleton/index.tsx
@@ -0,0 +1,5 @@
+import styles from "./loadingSkeleton.module.scss";
+
+export function LoadingSkeleton({ className }: { className?: string }) {
+  return <div className={`${styles.loadingSkeleton} ${className ?? ""}`} />;
+}
diff --git a/shared/common/newui/loadingSkeleton/loadingSkeleton.module.scss b/shared/common/newui/loadingSkeleton/loadingSkeleton.module.scss
new file mode 100644
index 00000000..c41ede6b
--- /dev/null
+++ b/shared/common/newui/loadingSkeleton/loadingSkeleton.module.scss
@@ -0,0 +1,30 @@
+@import "@edgedb/common/mixins.scss";
+
+.loadingSkeleton {
+  border-radius: 8px;
+  background: var(--skeletonBg, #ededed);
+  background-image: linear-gradient(
+    90deg,
+    transparent,
+    var(--skeletonShimmer, #fafafa) 66%,
+    transparent
+  );
+  background-repeat: no-repeat;
+  background-size: 100px 100%;
+  animation: shimmer 2s infinite linear;
+
+  @include darkTheme {
+    --skeletonBg: #2d2d2d;
+    --skeletonShimmer: #3c3c3c;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -100px;
+  }
+  50%,
+  100% {
+    background-position: calc(100% + 100px);
+  }
+}
diff --git a/shared/common/newui/panelTabs/index.tsx b/shared/common/newui/panelTabs/index.tsx
new file mode 100644
index 00000000..bb41dde4
--- /dev/null
+++ b/shared/common/newui/panelTabs/index.tsx
@@ -0,0 +1,33 @@
+import cn from "@edgedb/common/utils/classNames";
+
+import styles from "./panelTabs.module.scss";
+
+export interface PanelTabsProps<TabId extends string> {
+  className?: string;
+  tabs: {id: TabId; label: string | JSX.Element}[];
+  selectedTabId: TabId;
+  setSelectedTabId: (id: TabId) => void;
+}
+
+export function PanelTabs<TabId extends string = string>({
+  className,
+  tabs,
+  selectedTabId,
+  setSelectedTabId,
+}: PanelTabsProps<TabId>) {
+  return (
+    <div className={cn(styles.panelTabs, className)}>
+      {tabs.map((tab) => (
+        <div
+          key={tab.id}
+          className={cn(styles.tab, {
+            [styles.active]: selectedTabId === tab.id,
+          })}
+          onClick={() => setSelectedTabId(tab.id)}
+        >
+          {tab.label}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/shared/common/newui/panelTabs/panelTabs.module.scss b/shared/common/newui/panelTabs/panelTabs.module.scss
new file mode 100644
index 00000000..3c17f4b2
--- /dev/null
+++ b/shared/common/newui/panelTabs/panelTabs.module.scss
@@ -0,0 +1,94 @@
+@import "@edgedb/common/mixins.scss";
+
+.panelTabs {
+  grid-column: 1;
+  grid-row: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-self: start;
+  position: sticky;
+  top: 0;
+  width: max-content;
+  justify-self: end;
+  text-align: end;
+  padding: 64px 24px;
+  z-index: 1;
+
+  .tab {
+    position: relative;
+    font-family: "Roboto Flex Variable", sans-serif;
+    color: var(--secondary_text_color);
+    text-decoration: none;
+    font-weight: 500;
+    padding: 12px 16px;
+    border-radius: 8px;
+    cursor: pointer;
+
+    &:hover {
+      background: #fff;
+    }
+
+    &.active {
+      color: var(--main_text_color);
+
+      &:after {
+        content: "";
+        position: absolute;
+        right: 1px;
+        top: 4px;
+        bottom: 4px;
+        width: 2px;
+        border-radius: 1px;
+        background: #a565cd;
+      }
+    }
+  }
+
+  @include darkTheme {
+    .tab:hover {
+      background: var(--Grey12);
+    }
+  }
+
+  @include isMobile {
+    border-bottom: 1px solid var(--Grey93, #ededed);
+    background: var(--Grey99, #fcfcfc);
+    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.08);
+    flex-direction: row;
+    padding: 0;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    height: 44px;
+    flex-shrink: 0;
+
+    .tab {
+      padding: 10px 12px;
+      border-radius: 6px;
+
+      &:hover {
+        background: var(--Grey95, #f2f2f2);
+      }
+
+      &.active:after {
+        left: 4px;
+        right: 4px;
+        top: auto;
+        bottom: -3px;
+        height: 2px;
+        width: auto;
+      }
+    }
+
+    @include darkTheme {
+      border-bottom: 1px solid var(--Grey22, #363636);
+      background: var(--Grey18, #2e2e2e);
+      box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.2);
+
+      .tab:hover {
+        background: var(--Grey14, #242424);
+      }
+    }
+  }
+}
diff --git a/shared/common/newui/select/index.tsx b/shared/common/newui/select/index.tsx
index eb351bbf..53fcdb2a 100644
--- a/shared/common/newui/select/index.tsx
+++ b/shared/common/newui/select/index.tsx
@@ -3,6 +3,7 @@ import {
   Select as _Select,
   SelectProps as _SelectProps,
 } from "@edgedb/common/ui/select";
+export type {SelectItem, SelectItems} from "@edgedb/common/ui/select";
 
 import styles from "./select.module.scss";
 
diff --git a/shared/common/newui/textInput/index.tsx b/shared/common/newui/textInput/index.tsx
index 2a392eed..4881560a 100644
--- a/shared/common/newui/textInput/index.tsx
+++ b/shared/common/newui/textInput/index.tsx
@@ -12,6 +12,7 @@ export interface TextInputProps extends FieldHeaderProps {
   type?: "text" | "password" | "textarea";
   error?: string | null;
   prefix?: string;
+  suffixEl?: JSX.Element;
 }
 
 export const TextInput = forwardRef(function TextInput(
@@ -23,6 +24,7 @@ export const TextInput = forwardRef(function TextInput(
     headerNote,
     error,
     prefix,
+    suffixEl,
     ...props
   }: TextInputProps &
     Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, "type">,
@@ -53,6 +55,7 @@ export const TextInput = forwardRef(function TextInput(
               : undefined,
           }}
         />
+        {suffixEl}
         {error != null ? (
           <div className={styles.error}>
             <InfoIcon />
diff --git a/shared/studio/components/databasePage/databasePage.module.scss b/shared/studio/components/databasePage/databasePage.module.scss
index cf4280c1..f786a61b 100644
--- a/shared/studio/components/databasePage/databasePage.module.scss
+++ b/shared/studio/components/databasePage/databasePage.module.scss
@@ -3,9 +3,9 @@
 .databasePage {
   position: relative;
   flex-grow: 1;
-  overflow: hidden;
+  min-height: 0;
   display: grid;
-  padding: 0 16px 16px 0;
+  padding: 0 8px 8px 0;
   grid-template-areas: "tabs session" "tabs content";
   grid-template-columns: auto 1fr;
   grid-template-rows: auto 1fr;
diff --git a/shared/studio/tabs/ai/index.tsx b/shared/studio/tabs/ai/index.tsx
index d68e7661..4311522a 100644
--- a/shared/studio/tabs/ai/index.tsx
+++ b/shared/studio/tabs/ai/index.tsx
@@ -1,4 +1,4 @@
-import {useEffect, useLayoutEffect, useState} from "react";
+import {useEffect, useLayoutEffect} from "react";
 import {Observer, observer} from "mobx-react-lite";
 
 import cn from "@edgedb/common/utils/classNames";
@@ -15,7 +15,7 @@ import {PlaygroundTab} from "./playground";
 import {PromptsTab} from "./prompts";
 
 import styles from "./aiAdmin.module.scss";
-import {Button, ButtonProps, WarningIcon} from "@edgedb/common/newui";
+import {WarningIcon} from "@edgedb/common/newui";
 
 const AIAdminPage = observer(function AIAdminPage() {
   const state = useTabState(AIAdminState);
@@ -133,31 +133,3 @@ function AIAdminLayout() {
     </div>
   );
 }
-
-export function ConfirmButton({onClick, children, ...props}: ButtonProps) {
-  const [confirming, setConfirming] = useState(false);
-
-  useEffect(() => {
-    if (confirming) {
-      const timer = setTimeout(() => setConfirming(false), 1000);
-
-      return () => clearTimeout(timer);
-    }
-  }, [confirming]);
-
-  return (
-    <Button
-      onClick={() => {
-        if (confirming) {
-          setConfirming(false);
-          onClick?.();
-        } else {
-          setConfirming(true);
-        }
-      }}
-      {...props}
-    >
-      {confirming ? "Confirm?" : children}
-    </Button>
-  );
-}
diff --git a/shared/studio/tabs/ai/prompts.tsx b/shared/studio/tabs/ai/prompts.tsx
index 7ebc5285..a88724fb 100644
--- a/shared/studio/tabs/ai/prompts.tsx
+++ b/shared/studio/tabs/ai/prompts.tsx
@@ -4,6 +4,7 @@ import {observer} from "mobx-react-lite";
 import cn from "@edgedb/common/utils/classNames";
 import {
   Button,
+  ConfirmButton,
   ChevronDownIcon,
   InfoIcon,
   InfoTooltip,
@@ -16,7 +17,6 @@ import {AIAdminState, AIPromptDraft, PromptChatParticipantRole} from "./state";
 
 import textStyles from "@edgedb/common/newui/textInput/textInput.module.scss";
 import styles from "./aiAdmin.module.scss";
-import {ConfirmButton} from ".";
 
 export const PromptsTab = observer(function PromptTab() {
   const state = useTabState(AIAdminState);
diff --git a/shared/studio/tabs/ai/providers.tsx b/shared/studio/tabs/ai/providers.tsx
index 4d7d3761..f03bb3dc 100644
--- a/shared/studio/tabs/ai/providers.tsx
+++ b/shared/studio/tabs/ai/providers.tsx
@@ -4,6 +4,7 @@ import {observer} from "mobx-react-lite";
 import cn from "@edgedb/common/utils/classNames";
 import {
   Button,
+  ConfirmButton,
   ChevronDownIcon,
   InfoTooltip,
   Select,
@@ -12,7 +13,6 @@ import {
 } from "@edgedb/common/newui";
 
 import {useTabState} from "../../state";
-import {ConfirmButton} from ".";
 import {
   AIAdminState,
   AIProviderAPIStyle,
diff --git a/shared/studio/tabs/auth/authAdmin.module.scss b/shared/studio/tabs/auth/authAdmin.module.scss
index bf43c8e6..d5ade90e 100644
--- a/shared/studio/tabs/auth/authAdmin.module.scss
+++ b/shared/studio/tabs/auth/authAdmin.module.scss
@@ -2,23 +2,21 @@
 
 .authAdmin {
   flex-grow: 1;
-  background-color: var(--app-panel-bg);
-  border-radius: 8px;
+  background-color: var(--app_panel_background);
+  border-radius: 12px;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.04), 0 0 4px rgba(0, 0, 0, 0.06);
   display: flex;
   min-width: 0;
   min-height: 0;
 
-  &.loaded {
-    background-color: #ededed;
-
-    @include darkTheme {
-      background-color: #1c1c1c;
-    }
-  }
-
   @include isMobile {
     flex-direction: column;
   }
+
+  @include darkTheme {
+    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2),
+      0px 0px 4px 0px rgba(0, 0, 0, 0.3);
+  }
 }
 
 .loadingSchema {
@@ -82,344 +80,331 @@
   flex-grow: 1;
   min-width: 0;
   min-height: 0;
-  background: var(--app-panel-bg);
-  border-radius: 8px;
 }
 
-.contentWrapper {
+.scrollContent {
   overflow: auto;
   flex-grow: 1;
   @include hideScrollbar;
+
+  display: grid;
+  grid-template-columns: 1fr minmax(0, 760px) 1fr;
+
+  @include isMobile {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+  }
 }
 
-.tabs {
+.tabContentWrapper {
   display: flex;
   flex-direction: column;
-  gap: 16px;
-  padding: 24px 8px;
-  flex-shrink: 0;
-  color: #545454;
+  padding: 48px;
+  box-sizing: border-box;
+  min-width: 0;
+  font-family: "Roboto Flex Variable", sans-serif;
+  color: var(--main_text_color);
 
-  .tab {
-    padding: 12px 22px;
-    border-radius: 6px;
-    font-size: 13px;
+  h2 {
+    color: inherit;
+    font-size: 18px;
+    font-style: normal;
     font-weight: 500;
-    cursor: pointer;
-    text-transform: uppercase;
-
-    &.selected {
-      background: #f8f8f8;
-
-      @include darkTheme {
-        background: #2c2c2c;
-      }
-    }
-  }
-
-  @include darkTheme {
-    color: #c5c5c5;
+    line-height: 26px;
+    margin: 0;
   }
 
   @include isMobile {
-    flex-direction: row;
-    justify-content: center;
-    padding: 8px;
+    padding: 48px 24px;
   }
 }
 
-.tabContent {
-  padding: 32px;
+.cardList {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  min-height: max-content;
+  gap: 16px;
+  margin-top: 16px;
 }
 
-.docsNote {
+.card {
   display: flex;
-  align-items: flex-start;
-  padding: 14px 24px;
-  line-height: 22px;
-  background: #dee6f6;
+  flex-direction: column;
   border-radius: 8px;
-  margin: -8px;
-  margin-bottom: -16px;
-  max-width: 100%;
-  box-sizing: border-box;
+  border: 1px solid var(--panel_border);
+  background: var(--panel_background);
+  position: relative;
 
-  a {
-    text-decoration: none;
-    color: #1f8aed;
-  }
+  .expandButton {
+    margin-left: auto;
+    width: 32px;
+    height: 32px;
+    border-radius: 6px;
+    cursor: pointer;
 
-  b {
-    font-weight: 500;
-  }
+    &:hover {
+      background: var(--Grey95);
+    }
 
-  > div {
-    max-width: 100%;
-    box-sizing: border-box;
-  }
+    svg {
+      width: 32px;
+      height: 32px;
+      color: var(--secondary_text_color);
+    }
 
-  > svg {
-    width: 22px;
-    margin: -4px;
-    margin-right: 8px;
-    margin-top: -1px;
-    opacity: 0.7;
-    flex-shrink: 0;
-  }
+    &.expanded svg {
+      transform: rotate(180deg);
+    }
 
-  @include darkTheme {
-    background: #252d3d;
+    @include darkTheme {
+      &:hover {
+        background: var(--Grey30);
+      }
+    }
   }
 }
 
-.authUrls {
-  display: grid;
-  grid-template-columns: auto auto;
-  margin-left: 8px;
-  gap: 8px 12px;
+.cardMain {
+  display: flex;
+  padding: 12px 16px 12px 22px;
   align-items: center;
-  margin-top: 12px;
+  gap: 16px;
+}
 
-  .label {
-    text-align: right;
-    font-weight: 500;
+.addDraft,
+.enableUI {
+  display: flex;
+  padding: 24px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 32px;
+  border-radius: 8px;
+  background-image: dashedBorderBg(#ccc);
+
+  @include darkTheme {
+    background-image: dashedBorderBg(#4d4d4d);
   }
+}
 
-  .copyUrl {
+.draftForm,
+.expandedConfig {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+
+  .formRow {
     display: flex;
-    align-items: center;
-    font-family: "Roboto Mono", monospace;
-    white-space: nowrap;
-    background: rgba(255, 255, 255, 0.35);
-    height: 32px;
-    padding-left: 12px;
-    border-radius: 6px;
-    user-select: text;
-    min-width: 0;
+    gap: 16px;
 
-    @include darkTheme {
-      background: rgba(0, 0, 0, 0.2);
+    &.fullWidth > * {
+      flex-grow: 1;
     }
 
-    span {
-      margin-right: 6px;
-      flex-shrink: 1;
-      overflow: auto;
-
-      @include hideScrollbar;
+    &.evenWidth {
+      display: grid;
+      grid-auto-flow: column;
+      grid-auto-columns: 1fr;
     }
 
-    button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin: 0;
-      padding: 0;
-      margin-left: auto;
-      background: none;
-      border: 0;
-      outline: 0;
-      color: inherit;
-      width: 34px;
-      height: 34px;
-      cursor: pointer;
-      opacity: 0.3;
-      flex-shrink: 0;
-
-      svg {
-        fill: currentColor;
-      }
+    @include isMobile {
+      flex-direction: column;
+      gap: 8px;
 
-      &:hover {
-        opacity: 0.5;
+      &.evenWidth {
+        display: flex;
       }
     }
-
-    &.copied {
-      button {
-        opacity: 1;
-        color: #1f8aed;
-      }
-    }
-  }
-
-  .disabled {
-    .label,
-    .copyUrl {
-      opacity: 0.4;
-      pointer-events: none;
-    }
   }
 
-  @include isMobile {
-    grid-template-columns: auto;
-    gap: 4px;
-
-    .label {
-      text-align: left;
-
-      &:not(:first-child) {
-        margin-top: 6px;
-      }
-    }
+  .buttons {
+    justify-content: flex-end;
+    margin-top: 16px;
+    flex-direction: row;
   }
 }
 
-.header {
-  font-weight: 500;
-  font-size: 13px;
-  text-transform: uppercase;
-  margin-bottom: 16px;
-
-  &:not(:first-child) {
-    margin-top: 56px;
-  }
+.expandedConfig {
+  width: auto;
+  padding: 18px;
+  padding-top: 8px;
 }
 
-.inputWrapper {
+.webhookEvents {
   display: flex;
   flex-direction: column;
-  min-width: 0;
-}
+  gap: 6px;
+  margin-top: 8px;
 
-.input {
-  position: relative;
-  background: #fff;
-  border: 1px solid #d6d6d6;
-  border-radius: 6px;
-  line-height: 32px;
-  font-family: "Roboto Mono", monospace;
-  display: flex;
-  width: fit-content;
-  min-width: 0;
-  max-width: 100%;
+  --colCount: 3;
 
-  textarea,
-  input {
-    font-family: inherit;
-    line-height: inherit;
-    font-size: 14px;
-    border: 0;
-    outline: 0;
-    background: none;
-    padding: 0 10px;
-    color: inherit;
-    padding-left: calc(10px + var(--prefixLen, 0) * 1ch);
-    min-width: 0;
+  .grid {
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-rows: repeat(calc(var(--itemCount) / var(--colCount)), auto);
+    gap: 4px;
+
+    label {
+      font-family: "Roboto Mono Variable", monospace;
+      font-weight: 425;
+      font-size: 13px;
+    }
   }
 
-  &.error:after {
-    content: "";
-    position: absolute;
-    inset: -1px;
-    border: 2px solid #db5246;
-    border-radius: 6px;
-    pointer-events: none;
+  @media (max-width: 960px) {
+    --colCount: 2;
+  }
+  @media (max-width: 512px) {
+    --colCount: 1;
   }
+}
 
-  &.disabled {
-    background: none;
-    pointer-events: none;
+.webhookConfigCard {
+  .cardMain {
+    align-items: start;
   }
 
-  &.placeholder {
-    padding: 0 10px;
-    overflow: hidden;
+  .details {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    min-width: 0;
+    gap: 6px;
+
+    .url {
+      font-family: "Roboto Mono Variable", monospace;
+      font-size: 14px;
+      line-height: 22px;
+      font-weight: 450;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .events {
+      display: flex;
+      gap: 8px;
+      margin: 0 -4px;
+      margin-bottom: 2px;
+      overflow: hidden;
+      mask-image: linear-gradient(270deg, transparent, #000 16px, #000);
+
+      span {
+        background: var(--Grey97);
+        color: var(--secondary_text_color);
+        padding: 0 12px;
+        font-family: "Roboto Mono Variable", monospace;
+        font-size: 13px;
+        height: 24px;
+        line-height: 24px;
+        font-weight: 425;
+        border-radius: 16px;
+        border: 1px solid var(--Grey90);
+
+        @include darkTheme {
+          background: var(--Grey25);
+          border-color: var(--Grey30);
+        }
+      }
+    }
   }
 
-  .prefix {
-    position: absolute;
-    padding-left: 8px;
-    pointer-events: none;
-    opacity: 0.6;
+  &.expanded .details {
+    display: none;
   }
 
-  @include darkTheme {
-    background-color: #1a1a1a;
-    border-color: #545454;
+  .expandedConfig {
+    margin-top: -12px;
   }
 }
 
-.inputErrorMessage {
-  font-size: 14px;
-  line-height: 20px;
-  min-height: 20px;
-  padding: 4px;
-  padding-bottom: 0;
-  color: #db5246;
-  white-space: pre-wrap;
-}
+.providerCard {
+  .details {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .oauthIcon {
+      width: 24px;
+      height: 24px;
+    }
 
-.button.button {
-  padding: 0;
-  --buttonBg: #e9e9e9;
-  --buttonTextColour: #4d4d4d;
-  height: 34px;
+    .logo {
+      width: 24px;
+      height: 24px;
+      background-size: contain;
+      background-position: center;
+      background-repeat: no-repeat;
+    }
 
-  & > div {
-    height: 34px;
-    border-radius: 6px;
-    text-transform: none;
-    font-size: 14px;
-  }
+    .name {
+      font-weight: 500;
 
-  @include darkTheme {
-    --buttonBg: #3a3a3a;
-    --buttonTextColour: #dcdcdc;
+      span {
+        color: var(--tertiary_text_color);
+        font-weight: 400;
+        margin-left: 8px;
+      }
+    }
+
+    .providerType {
+      background: var(--Grey97);
+      color: var(--secondary_text_color);
+      padding: 0 10px;
+      font-size: 12px;
+      text-transform: uppercase;
+      height: 22px;
+      line-height: 22px;
+      font-weight: 500;
+      border-radius: 16px;
+      border: 1px solid var(--Grey90);
+      margin-left: 8px;
+
+      @include darkTheme {
+        background: var(--Grey25);
+        border-color: var(--Grey30);
+      }
+    }
   }
 }
 
-.generateKeyButton {
-  position: relative;
+.providerSelectItem {
   display: flex;
-  width: 32px;
-  height: 32px;
-  cursor: pointer;
   align-items: center;
-  justify-content: center;
-  color: #747474;
-  font-family: "Roboto", sans-serif;
-  margin-left: -8px;
-  margin-right: 4px;
+  line-height: 22px;
 
-  span {
-    position: absolute;
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 0.1s;
-    font-size: 12px;
-    white-space: nowrap;
-    top: 100%;
-    line-height: 16px;
-    color: #4d4d4d;
-    background: #fff;
-    padding: 4px 8px;
-    border-radius: 4px;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
-    z-index: 1;
+  .oauthIcon {
+    width: 22px;
+    height: 22px;
+    margin-right: 6px;
+    margin-left: -6px;
   }
+}
 
-  &:hover {
-    color: #4d4d4d;
+.webhookSkeleton {
+  width: 100%;
+  height: 80px;
+}
 
-    span {
-      opacity: 1;
-    }
-  }
+.providerSkeleton {
+  width: 100%;
+  height: 56px;
+}
+
+.uiConfigSkeleton {
+  width: 100%;
+  height: 84px;
+  margin-top: 32px;
 }
 
 .configGrid {
   display: grid;
-  grid-template-columns: auto auto;
-  gap: 24px;
+  grid-template-columns: auto 1fr;
+  gap: 24px 16px;
   padding: 0 16px;
+  margin-top: 48px;
   max-width: 100%;
   box-sizing: border-box;
-  margin-top: 8px;
 
   .gridItem {
     display: contents;
@@ -427,261 +412,230 @@
   }
 
   .configName {
-    font-family: "Roboto Mono", monospace;
-    text-align: right;
-    line-height: 34px;
+    align-self: center;
+    justify-self: end;
   }
 
   .configInput {
     display: flex;
     gap: 8px;
+
+    &.fullWidth > * {
+      flex-grow: 1;
+    }
   }
 
   .configExplain {
-    max-width: 320px;
-    opacity: 0.7;
+    grid-column: 2;
+    max-width: 420px;
+    color: var(--tertiary_text_color);
     font-size: 13px;
     margin: 6px 4px;
+    margin-top: -18px;
   }
 
   @include isMobile {
     grid-template-columns: auto;
     padding: 0;
+    margin-top: 24px;
 
     .gridItem {
       display: block;
     }
 
     .configName {
-      text-align: left;
-      padding: 0 4px;
-      line-height: 28px;
-      margin-bottom: 2px;
+      margin-bottom: 4px;
+    }
+
+    .configExplain {
+      grid-column: 1;
+      margin-top: 6px;
     }
   }
 }
 
-.checkbox {
-  display: flex;
-  padding: 7px;
-  margin: 0 -7px;
-  cursor: pointer;
+.securitySelect {
+  font-family: "Roboto Mono Variable", monospace;
+}
 
-  input {
-    appearance: none;
-    width: 20px;
-    height: 20px;
-    margin: 0;
-    outline: 0;
-    border: 2px solid #9a9a9a;
-    border-radius: 4px;
-    background: transparent no-repeat center center;
-    box-sizing: border-box;
-    cursor: pointer;
+.redirectUrlsLabel {
+  align-self: auto !important;
 
-    &:checked {
-      background-color: #1f8aed;
-      border: none;
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath fill='%23fff' d='M0,8 5,13 14,4 12,2 5,9 2,6z'/%3E%3C/svg%3E");
+  > div {
+    height: 42px;
+
+    @include isMobile {
+      height: auto;
     }
   }
 }
 
-.providersList {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-bottom: 16px;
-  align-self: stretch;
-  max-width: 560px;
+.redirectUrlsInput textarea {
+  resize: vertical;
 }
 
-.noProviders {
-  border: 2px dashed #ccc;
-  padding: 18px;
-  border-radius: 8px;
-  opacity: 0.7;
-  font-style: italic;
+.docsNote {
+  display: flex;
+  align-items: flex-start;
+  padding: 14px 24px;
+  line-height: 22px;
+  background: #e9eef8;
+  border: 1px solid #b8cbf3;
+  border-radius: 12px;
+  margin: -8px;
+  margin-bottom: 48px;
+  max-width: calc(100% + 16px);
   box-sizing: border-box;
-  text-align: center;
-}
 
-.providerCard {
-  background: #eee;
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
+  a {
+    text-decoration: none;
+    color: #1f8aed;
+  }
 
-  .providerCardHeader {
-    display: flex;
-    align-items: center;
-    height: 48px;
+  b {
     font-weight: 500;
-
-    .oauthIcon {
-      width: 24px;
-      height: 24px;
-      margin-left: -8px;
-      margin-right: 4px;
-    }
   }
 
-  .expandProvider {
-    width: 40px;
-    height: 48px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    opacity: 0.8;
-
-    &.collapsed svg {
-      transform: rotate(-90deg);
-    }
-
-    &.disabled {
-      pointer-events: none;
-
-      svg {
-        display: none;
-      }
-    }
+  > div {
+    max-width: 100%;
+    box-sizing: border-box;
+    flex-grow: 1;
   }
 
-  .providerType {
-    opacity: 0.75;
-    margin-left: 8px;
-    text-transform: uppercase;
-    font-size: 12px;
-    margin-top: 1px;
-    margin-bottom: -1px;
-    background: #d3d3d3;
-    padding: 2px 8px;
-    border-radius: 16px;
+  > svg {
+    width: 22px;
+    margin: -4px;
+    margin-right: 8px;
+    margin-top: -1px;
+    opacity: 0.7;
+    flex-shrink: 0;
   }
 
-  .removeProviderButton {
-    margin-left: auto;
-    --buttonTextColour: #747474;
-    display: none;
-
-    .icon {
-      fill: currentColor;
-    }
+  @include darkTheme {
+    background: #242a36;
+    border-color: #2b406b;
+  }
+}
 
-    & > div {
-      text-transform: none;
-      font-size: 14px;
-    }
+.authUrls {
+  display: grid;
+  grid-template-columns: auto auto;
+  margin-left: 8px;
+  gap: 8px 12px;
+  align-items: center;
+  margin-top: 12px;
 
-    &.noHide {
-      display: block;
-    }
+  .label {
+    text-align: right;
+    font-weight: 500;
   }
 
-  &:hover .removeProviderButton {
-    display: block;
-  }
+  .copyUrl {
+    display: flex;
+    align-items: center;
+    font-family: "Roboto Mono Variable", monospace;
+    white-space: nowrap;
+    background: rgba(255, 255, 255, 0.6);
+    height: 36px;
+    padding-left: 12px;
+    border-radius: 6px;
+    user-select: text;
+    min-width: 0;
 
-  .providerDetails {
-    display: grid;
-    grid-template-columns: auto auto;
-    align-self: flex-start;
-    gap: 16px 24px;
-    padding: 16px 18px;
-    padding-top: 6px;
-    font-family: "Roboto Mono", monospace;
-    max-width: 100%;
-    box-sizing: border-box;
-    overflow: auto;
-    @include hideScrollbar;
-  }
+    @include darkTheme {
+      background: rgba(0, 0, 0, 0.3);
+    }
 
-  .providerConfigValue {
     span {
-      opacity: 0.7;
-      font-style: italic;
+      margin-right: 6px;
+      flex-shrink: 1;
+      overflow: auto;
+      flex-grow: 1;
+
+      @include hideScrollbar;
     }
   }
 
-  @include darkTheme {
-    background-color: #2f2f2f;
-
-    .providerType {
-      background-color: #4a4a4a;
+  .disabled {
+    .label,
+    .copyUrl {
+      opacity: 0.4;
+      pointer-events: none;
     }
   }
-}
 
-.addProviderForm {
-  background: #eee;
-  border-radius: 8px;
-  max-width: 560px;
-  align-self: stretch;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 16px;
-  box-sizing: border-box;
+  @include isMobile {
+    grid-template-columns: auto;
+    gap: 4px;
 
-  .errorMessage {
-    color: #db5246;
-    background-color: #db52461a;
-    border-radius: 6px;
-    padding: 8px 16px;
-  }
+    .label {
+      text-align: left;
 
-  @include darkTheme {
-    background-color: #2f2f2f;
+      &:not(:first-child) {
+        margin-top: 6px;
+      }
+    }
   }
 }
 
-.addProviderFormButtons {
-  display: flex;
-  gap: 8px;
-  margin-top: 16px;
-
-  .button {
-    --buttonBg: #e2e2e2;
+.authSigningKeyInput {
+  input {
+    padding-right: 44px;
   }
-}
 
-.providerSelect,
-.securitySelect {
-  background: #fff;
-  flex-grow: 1;
-  padding: 0px 10px;
-  border: 1px solid #d6d6d6;
-  border-radius: 6px;
-  height: 34px;
+  .generateKeyButton {
+    position: absolute;
+    height: 100%;
+    width: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    right: 8px;
+    cursor: pointer;
 
-  @include darkTheme {
-    background-color: #1a1a1a;
-    border-color: #545454;
-    color: #d6d6d6;
-  }
-}
+    svg {
+      stroke-width: 1.25px;
+      color: var(--secondary_text_color);
+    }
 
-.securitySelect {
-  font-family: "Roboto Mono", monospace;
-}
+    span {
+      position: absolute;
+      top: 36px;
+      right: 6px;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.1s;
+      white-space: nowrap;
+      padding: 8px 12px;
+      border-radius: 6px;
+      background: rgba(255, 255, 255, 0.85);
+      backdrop-filter: blur(6px);
+      -webkit-backdrop-filter: blur(6px);
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+      border: 1px solid rgba(0, 0, 0, 0.12);
+      z-index: 1;
+
+      @include darkTheme {
+        background: rgba(50, 50, 50, 0.85);
+        border-color: rgba(255, 255, 255, 0.12);
+      }
+    }
 
-.providerSelect {
-  & > .providerSelectItem .oauthIcon {
-    margin-left: 0;
+    &:hover {
+      span {
+        opacity: 1;
+      }
+    }
   }
-}
 
-.providerSelectItem {
-  display: flex;
-  align-items: center;
-  line-height: 22px;
+  &.error {
+    input {
+      padding-right: 68px;
+    }
 
-  .oauthIcon {
-    width: 22px;
-    height: 22px;
-    margin-right: 6px;
-    margin-left: -6px;
+    .generateKeyButton {
+      right: 38px;
+    }
   }
 }
 
@@ -689,48 +643,53 @@
   position: sticky;
   bottom: 0;
   align-self: stretch;
-  background: var(--app-panel-bg);
+  margin: 32px -24px -48px -24px;
+  padding: 0 16px;
   padding-bottom: 24px;
-  margin: 24px -8px -32px -8px;
-}
-
-.formButtons {
-  display: flex;
-  gap: 12px;
-  background: #ededed;
-  padding: 8px;
-  border-radius: 8px;
-
-  .button {
-    --buttonBg: #fafafa;
-  }
+  overflow: hidden;
+  pointer-events: none;
 
-  .disableButton {
-    margin-left: auto;
-  }
+  .bar {
+    pointer-events: auto;
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    background: var(--panel_background);
+    border-radius: 12px;
+    border: 1px solid var(--panel_border);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
+    transform: translateY(100%);
+    opacity: 0;
+    transition: transform 0.2s, opacity 0.2s;
+
+    &:before {
+      position: absolute;
+      content: "";
+      top: 100%;
+      left: 0;
+      height: 32px;
+      width: 100%;
+      background: var(--app_panel_background);
+      z-index: -1;
+    }
 
-  @include darkTheme {
-    background: #1c1c1c;
+    @include darkTheme {
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
   }
-}
-
-.uiConfigSection {
-  display: flex;
-  gap: 56px;
-  align-self: stretch;
-  flex-wrap: wrap;
-}
 
-.uiConfigFormWrapper {
-  @include isMobile {
-    flex-grow: 1;
+  &.visible .bar {
+    transform: none;
+    opacity: 1;
   }
 }
 
 .loginUIPreview {
   flex-grow: 1;
   max-width: 800px;
-  margin-top: -32px;
+  margin-top: 64px;
   min-width: 0;
 }
 
@@ -778,8 +737,8 @@
 .colorPickerSwatch {
   position: relative;
   border: 1px solid #d6d6d6;
-  height: 32px;
-  width: 32px;
+  height: 40px;
+  width: 40px;
   border-radius: 6px;
   background-clip: padding-box;
   cursor: pointer;
@@ -796,6 +755,11 @@
   }
 }
 
+.inputSkeleton {
+  height: 42px;
+  min-width: 200px;
+}
+
 .appleIcon {
   fill: #000;
 }
diff --git a/shared/studio/tabs/auth/config.tsx b/shared/studio/tabs/auth/config.tsx
new file mode 100644
index 00000000..dd58ba55
--- /dev/null
+++ b/shared/studio/tabs/auth/config.tsx
@@ -0,0 +1,400 @@
+import {useEffect, useRef, useState} from "react";
+import {observer} from "mobx-react-lite";
+import {HexColorPicker} from "react-colorful";
+import {encodeB64} from "edgedb/dist/primitives/buffer";
+
+import cn from "@edgedb/common/utils/classNames";
+
+import {useInstanceState} from "../../state/instance";
+import {useDatabaseState, useTabState} from "../../state";
+import {AuthAdminState, DraftAppConfig} from "./state";
+
+import {FieldHeader, TextInput} from "@edgedb/common/newui";
+import {CopyButton} from "@edgedb/common/newui/copyButton";
+
+import {BookIcon} from "../../icons";
+
+import styles from "./authAdmin.module.scss";
+
+import {GenerateKeyIcon} from "./icons";
+import {normaliseHexColor} from "./colourUtils";
+import {InputSkeleton, secretPlaceholder, StickyFormControls} from "./shared";
+
+export const ConfigTab = observer(function ConfigTab() {
+  const state = useTabState(AuthAdminState);
+
+  const coreConfig = state.draftCoreConfig;
+
+  return (
+    <div className={styles.tabContentWrapper}>
+      <div className={styles.docsNote}>
+        <BookIcon />
+        <div>
+          <b>Need help integrating EdgeDB Auth into your app?</b>
+          <br />
+          Check out the{" "}
+          <a href="https://www.edgedb.com/p/auth-ext-docs" target="_blank">
+            auth extension docs
+          </a>
+          , also here are some useful URLs:
+          <AuthUrls builtinUIEnabled={state.draftUIConfig !== null} />
+        </div>
+      </div>
+
+      <h2>Auth Configuration</h2>
+
+      <div className={styles.configGrid}>
+        {state.newAppAuthSchema ? (
+          <AppConfigForm draft={coreConfig?.appConfig ?? null} />
+        ) : null}
+
+        <div className={styles.gridItem}>
+          <div className={styles.configName}>
+            <FieldHeader label="Auth signing key" />
+          </div>
+
+          <div className={cn(styles.configInput, styles.fullWidth)}>
+            {coreConfig ? (
+              <TextInput
+                className={cn(styles.authSigningKeyInput, {
+                  [styles.error]: coreConfig.signingKeyError != null,
+                })}
+                value={coreConfig._auth_signing_key ?? ""}
+                placeholder={
+                  coreConfig._auth_signing_key == null &&
+                  state.configData?.signing_key_exists
+                    ? secretPlaceholder
+                    : ""
+                }
+                onChange={(e) =>
+                  coreConfig.setConfigValue("auth_signing_key", e.target.value)
+                }
+                error={coreConfig.signingKeyError}
+                suffixEl={
+                  <div
+                    className={styles.generateKeyButton}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      coreConfig.setConfigValue(
+                        "auth_signing_key",
+                        encodeB64(
+                          crypto.getRandomValues(new Uint8Array(256))
+                        ).replace(/=*$/, "")
+                      );
+                    }}
+                  >
+                    <GenerateKeyIcon />
+                    <span>Generate Random Key</span>
+                  </div>
+                }
+              />
+            ) : (
+              <InputSkeleton />
+            )}
+          </div>
+          <div className={styles.configExplain}>
+            The signing key used for auth extension. Must be at least 32
+            characters long.
+          </div>
+        </div>
+
+        <div className={styles.gridItem}>
+          <div className={styles.configName}>
+            <FieldHeader label="Token time to live" />
+          </div>
+
+          <div className={styles.configInput}>
+            {coreConfig ? (
+              <TextInput
+                size={16}
+                value={coreConfig.getConfigValue("token_time_to_live")}
+                onChange={(e) =>
+                  coreConfig.setConfigValue(
+                    "token_time_to_live",
+                    e.target.value.toUpperCase()
+                  )
+                }
+                error={coreConfig.tokenTimeToLiveError}
+              />
+            ) : (
+              <InputSkeleton />
+            )}
+          </div>
+          <div className={styles.configExplain}>
+            The number of seconds after which an auth token expires. A value of
+            0 indicates that the token should never expire.
+          </div>
+        </div>
+
+        <div className={styles.gridItem}>
+          <div className={cn(styles.configName, styles.redirectUrlsLabel)}>
+            <FieldHeader label="Allowed redirect urls" />
+          </div>
+
+          <div className={cn(styles.configInput, styles.fullWidth)}>
+            {coreConfig ? (
+              <>
+                <TextInput
+                  className={styles.redirectUrlsInput}
+                  type="textarea"
+                  value={coreConfig.getConfigValue("allowed_redirect_urls")}
+                  onChange={(e) =>
+                    coreConfig.setConfigValue(
+                      "allowed_redirect_urls",
+                      e.target.value
+                    )
+                  }
+                  error={coreConfig.allowedRedirectUrlsError}
+                />
+              </>
+            ) : (
+              <InputSkeleton />
+            )}
+          </div>
+          <div className={styles.configExplain}>
+            Newline-separated list of URLs that will be checked against to
+            ensure redirects 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>
+
+      {coreConfig ? <StickyFormControls draft={coreConfig} /> : null}
+    </div>
+  );
+});
+
+export const AppConfigForm = observer(function AppConfigForm({
+  draft,
+}: {
+  draft: DraftAppConfig | null;
+}) {
+  return (
+    <>
+      <div className={styles.gridItem}>
+        <div className={styles.configName}>
+          <FieldHeader label="App name" />
+        </div>
+
+        <div className={cn(styles.configInput, styles.fullWidth)}>
+          {draft ? (
+            <TextInput
+              value={draft.getConfigValue("app_name")}
+              onChange={(e) =>
+                draft.setConfigValue("app_name", e.target.value)
+              }
+            />
+          ) : (
+            <InputSkeleton />
+          )}
+        </div>
+        <div className={styles.configExplain}>
+          The name of your application to be shown on the login screen.
+        </div>
+      </div>
+
+      <div className={styles.gridItem}>
+        <div className={styles.configName}>
+          <FieldHeader label="Logo URL" />
+        </div>
+
+        <div className={cn(styles.configInput, styles.fullWidth)}>
+          {draft ? (
+            <TextInput
+              value={draft.getConfigValue("logo_url")}
+              onChange={(e) =>
+                draft.setConfigValue("logo_url", e.target.value)
+              }
+            />
+          ) : (
+            <InputSkeleton />
+          )}
+        </div>
+        <div className={styles.configExplain}>
+          A url to an image of your application's logo.
+        </div>
+      </div>
+
+      <div className={styles.gridItem}>
+        <div className={styles.configName}>
+          <FieldHeader label="Dark logo URL" />
+        </div>
+
+        <div className={cn(styles.configInput, styles.fullWidth)}>
+          {draft ? (
+            <TextInput
+              value={draft.getConfigValue("dark_logo_url")}
+              onChange={(e) =>
+                draft.setConfigValue("dark_logo_url", e.target.value)
+              }
+            />
+          ) : (
+            <InputSkeleton />
+          )}
+        </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 className={styles.gridItem}>
+        <div className={styles.configName}>
+          <FieldHeader label="Brand color" />
+        </div>
+
+        <div className={styles.configInput}>
+          {draft ? (
+            <>
+              <div className={styles.inputWrapper}>
+                <ColorPickerInput
+                  color={draft.getConfigValue("brand_color")}
+                  onChange={(color) =>
+                    draft.setConfigValue("brand_color", color)
+                  }
+                />
+              </div>
+              <ColorPickerPopup
+                color={draft.getConfigValue("brand_color")}
+                onChange={(color) =>
+                  draft.setConfigValue("brand_color", color.slice(1))
+                }
+              />
+            </>
+          ) : (
+            <InputSkeleton />
+          )}
+        </div>
+        <div className={styles.configExplain}>
+          The brand color of your application as a hex string.
+        </div>
+      </div>
+    </>
+  );
+});
+
+function escapeHex(value: string) {
+  return value.replace(/[^0-9A-F]+/gi, "").substring(0, 6);
+}
+
+const matcher = /^[0-9A-F]{3,8}$/i;
+
+function validateHex(value: string): boolean {
+  return (
+    !value ||
+    (matcher.test(value) && (value.length === 3 || value.length === 6))
+  );
+}
+
+function ColorPickerInput({
+  color,
+  onChange,
+}: {
+  color: string;
+  onChange: (color: string) => void;
+}) {
+  const [value, setValue] = useState(() => escapeHex(color));
+
+  useEffect(() => {
+    setValue(escapeHex(color));
+  }, [color]);
+
+  return (
+    <TextInput
+      prefix="#"
+      spellCheck="false"
+      size={7}
+      value={value}
+      onChange={(e) => {
+        const inputValue = escapeHex(e.target.value);
+        setValue(inputValue);
+        if (validateHex(inputValue)) onChange(inputValue);
+      }}
+      onBlur={(e) => {
+        if (!validateHex(e.target.value)) setValue(escapeHex(color));
+        if (color && color.length < 6) onChange(normaliseHexColor(color));
+      }}
+    />
+  );
+}
+
+function ColorPickerPopup({
+  color,
+  onChange,
+}: {
+  color: string;
+  onChange: (color: string) => void;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    const listener = (e: MouseEvent) => {
+      if (!ref.current?.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    window.addEventListener("click", listener, {capture: true});
+    return () => {
+      window.removeEventListener("click", listener, {capture: true});
+    };
+  }, [open]);
+
+  return (
+    <div
+      ref={ref}
+      className={styles.colorPickerSwatch}
+      onClick={() => setOpen(true)}
+      style={{backgroundColor: `#${color || "1f8aed"}`}}
+    >
+      {open ? (
+        <HexColorPicker
+          className={styles.colorPickerPopup}
+          color={color}
+          onChange={onChange}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+const AuthUrls = observer(function AuthUrls({
+  builtinUIEnabled,
+}: {
+  builtinUIEnabled: boolean;
+}) {
+  const instanceState = useInstanceState();
+  const databaseState = useDatabaseState();
+
+  const url = new URL(instanceState.serverUrl);
+  url.pathname = `db/${encodeURIComponent(databaseState.name)}/ext/auth`;
+
+  const baseUrl = url.toString();
+
+  return (
+    <div className={styles.authUrls}>
+      <div className={styles.label}>OAuth callback endpoint:</div>
+      <CopyUrl url={`${baseUrl}/callback`} />
+      <div
+        className={cn({[styles.disabled]: !builtinUIEnabled})}
+        style={{display: "contents"}}
+      >
+        <div className={styles.label}>Built-in UI sign in url:</div>
+        <CopyUrl url={`${baseUrl}/ui/signin`} />
+        <div className={styles.label}>Built-in UI sign up url:</div>
+        <CopyUrl url={`${baseUrl}/ui/signup`} />
+      </div>
+    </div>
+  );
+});
+
+function CopyUrl({url}: {url: string}) {
+  return (
+    <div className={styles.copyUrl}>
+      <span>{url}</span>
+      <CopyButton content={url} mini />
+    </div>
+  );
+}
diff --git a/shared/studio/tabs/auth/index.tsx b/shared/studio/tabs/auth/index.tsx
index 9133745f..9a6b991b 100644
--- a/shared/studio/tabs/auth/index.tsx
+++ b/shared/studio/tabs/auth/index.tsx
@@ -1,6 +1,5 @@
-import {useEffect, useMemo, useRef, useState} from "react";
+import {useEffect} from "react";
 import {observer} from "mobx-react-lite";
-import {HexColorPicker, HexColorInput} from "react-colorful";
 
 import cn from "@edgedb/common/utils/classNames";
 
@@ -8,48 +7,19 @@ import styles from "./authAdmin.module.scss";
 
 import {DatabaseTabSpec} from "../../components/databasePage";
 
-import {useInstanceState} from "../../state/instance";
-import {useDatabaseState, useTabState} from "../../state";
+import {useTabState} from "../../state";
 
-import {
-  BookIcon,
-  ChevronDownIcon,
-  CopyIcon,
-  DeleteIcon,
-  TabAuthIcon,
-} from "../../icons";
-import {
-  AuthAdminState,
-  AuthProviderData,
-  DraftProviderConfig,
-  ProviderTypename,
-  DraftUIConfig,
-  ProviderKind,
-  OAuthProviderData,
-  LocalEmailPasswordProviderData,
-  SMTPSecurity,
-  smtpSecurity,
-  DraftAppConfig,
-  AbstractDraftConfig,
-  _providersInfo,
-  LocalWebAuthnProviderData,
-  LocalMagicLinkProviderData,
-} from "./state";
+import {TabAuthIcon} from "../../icons";
+import {AuthAdminState, _providersInfo} from "./state";
 
-import {encodeB64} from "edgedb/dist/primitives/buffer";
-import Button from "@edgedb/common/ui/button";
-import {GenerateKeyIcon} from "./icons";
-import {Select, SelectItem} from "@edgedb/common/ui/select";
-import {LoginUIPreview} from "./loginUIPreview";
-import {normaliseHexColor} from "./colourUtils";
-import {useTheme, Theme} from "@edgedb/common/hooks/useTheme";
-import {
-  DarkThemeIcon,
-  LightThemeIcon,
-} from "@edgedb/common/ui/themeSwitcher/icons";
 import CodeBlock from "@edgedb/common/ui/codeBlock";
 import {CustomScrollbars} from "@edgedb/common/ui/customScrollbar";
-import {CheckIcon} from "@edgedb/common/ui/icons";
+import {WebhooksTab} from "./webhooks";
+
+import {PanelTabs} from "@edgedb/common/newui/panelTabs";
+import {ConfigTab} from "./config";
+import {SMTPConfigTab} from "./smtp";
+import {ProvidersTab} from "./providers";
 
 export const AuthAdmin = observer(function AuthAdmin() {
   const state = useTabState(AuthAdminState);
@@ -69,42 +39,34 @@ export const AuthAdmin = observer(function AuthAdmin() {
       {state.extEnabled === null ? (
         <div className={styles.loadingSchema}>Loading schema...</div>
       ) : state.extEnabled ? (
-        <>
-          <div className={styles.tabs}>
-            {(
-              [
-                ["config", "Config"],
-                ["providers", "Providers"],
-                ["smtp", "SMTP"],
-              ] as const
-            ).map(([key, label]) => (
-              <div
-                key={key}
-                className={cn(styles.tab, {
-                  [styles.selected]: state.selectedTab === key,
-                })}
-                onClick={() => state.setSelectedTab(key)}
-              >
-                {label}
-              </div>
-            ))}
+        <CustomScrollbars
+          className={styles.scrollWrapper}
+          innerClass={styles.scrollContent}
+        >
+          <div className={styles.scrollContent}>
+            <PanelTabs
+              className={styles.tabs}
+              tabs={[
+                {id: "config", label: "Config"},
+                {id: "webhooks", label: "Webhooks"},
+                {id: "providers", label: "Providers / UI"},
+                {id: "smtp", label: "SMTP"},
+              ]}
+              selectedTabId={state.selectedTab}
+              setSelectedTabId={(id) => state.setSelectedTab(id)}
+            />
+
+            {state.selectedTab === "config" ? (
+              <ConfigTab />
+            ) : state.selectedTab === "providers" ? (
+              <ProvidersTab />
+            ) : state.selectedTab === "webhooks" ? (
+              <WebhooksTab />
+            ) : (
+              <SMTPConfigTab />
+            )}
           </div>
-          <CustomScrollbars
-            key={state.selectedTab}
-            className={styles.scrollWrapper}
-            innerClass={styles.tabContent}
-          >
-            <div className={styles.contentWrapper}>
-              {state.selectedTab === "config" ? (
-                <ConfigPage />
-              ) : state.selectedTab === "providers" ? (
-                <ProvidersPage />
-              ) : (
-                <SMTPConfigPage />
-              )}
-            </div>
-          </CustomScrollbars>
-        </>
+        </CustomScrollbars>
       ) : (
         <div className={styles.extDisabled}>
           <h2>The auth extension is not enabled</h2>
@@ -130,1155 +92,3 @@ export const authAdminTabSpec: DatabaseTabSpec = {
   element: <AuthAdmin />,
   state: AuthAdminState,
 };
-
-const secretPlaceholder = "".padStart(32, "•");
-
-const AuthUrls = observer(function AuthUrls({
-  builtinUIEnabled,
-}: {
-  builtinUIEnabled: boolean;
-}) {
-  const instanceState = useInstanceState();
-  const databaseState = useDatabaseState();
-
-  const url = new URL(instanceState.serverUrl);
-  url.pathname = `db/${encodeURIComponent(databaseState.name)}/ext/auth`;
-
-  const baseUrl = url.toString();
-
-  return (
-    <div className={styles.authUrls}>
-      <div className={styles.label}>OAuth callback endpoint:</div>
-      <CopyUrl url={`${baseUrl}/callback`} />
-      <div
-        className={cn({[styles.disabled]: !builtinUIEnabled})}
-        style={{display: "contents"}}
-      >
-        <div className={styles.label}>Built-in UI sign in url:</div>
-        <CopyUrl url={`${baseUrl}/ui/signin`} />
-        <div className={styles.label}>Built-in UI sign up url:</div>
-        <CopyUrl url={`${baseUrl}/ui/signup`} />
-      </div>
-    </div>
-  );
-});
-
-function CopyUrl({url}: {url: string}) {
-  const [copied, setCopied] = useState(false);
-
-  useEffect(() => {
-    if (copied) {
-      const timeout = setTimeout(() => setCopied(false), 1000);
-      return () => clearTimeout(timeout);
-    }
-  }, [copied]);
-
-  return (
-    <div className={cn(styles.copyUrl, {[styles.copied]: copied})}>
-      <span>{url}</span>
-      <button
-        onClick={() => {
-          navigator.clipboard.writeText(url);
-          setCopied(true);
-        }}
-      >
-        {copied ? <CheckIcon /> : <CopyIcon />}
-      </button>
-    </div>
-  );
-}
-
-const ConfigPage = observer(function ConfigPage() {
-  const state = useTabState(AuthAdminState);
-
-  const coreConfig = state.draftCoreConfig;
-
-  return (
-    <div className={styles.tabContent}>
-      <div className={styles.docsNote}>
-        <BookIcon />
-        <div>
-          <b>Need help integrating EdgeDB Auth into your app?</b>
-          <br />
-          Check out the{" "}
-          <a href="https://www.edgedb.com/p/auth-ext-docs" target="_blank">
-            auth extension docs
-          </a>
-          , also here are some useful URLs:
-          <AuthUrls builtinUIEnabled={state.draftUIConfig !== null} />
-        </div>
-      </div>
-
-      <div className={styles.header}>Auth Configuration</div>
-      <div className={styles.configGrid}>
-        {state.newAppAuthSchema ? (
-          <AppConfigForm draft={coreConfig?.appConfig ?? null} />
-        ) : null}
-
-        <div className={styles.gridItem}>
-          <div className={styles.configName}>auth_signing_key</div>
-          <div className={styles.configInputWrapper}>
-            <div className={styles.configInput}>
-              {coreConfig ? (
-                coreConfig._auth_signing_key == null &&
-                state.configData!.signing_key_exists ? (
-                  <>
-                    <div
-                      className={cn(
-                        styles.input,
-                        styles.disabled,
-                        styles.placeholder
-                      )}
-                    >
-                      {secretPlaceholder}
-                    </div>
-                    <Button
-                      className={styles.button}
-                      label="Change"
-                      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..."
-              )}
-            </div>
-            <div className={styles.configExplain}>
-              The signing key used for auth extension. Must be at least 32
-              characters long.
-            </div>
-          </div>
-        </div>
-
-        <div className={styles.gridItem}>
-          <div className={styles.configName}>token_time_to_live</div>
-          <div className={styles.configInputWrapper}>
-            <div className={styles.configInput}>
-              {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..."
-              )}
-            </div>
-            <div className={styles.configExplain}>
-              The number of seconds after which an auth token expires. A value
-              of 0 indicates that the token should never expire.
-            </div>
-          </div>
-        </div>
-
-        <div className={styles.gridItem}>
-          <div className={styles.configName}>allowed_redirect_urls</div>
-          <div className={styles.configInputWrapper}>
-            <div className={styles.configInput}>
-              {coreConfig ? (
-                <>
-                  <TextArea
-                    value={coreConfig.getConfigValue("allowed_redirect_urls")}
-                    onChange={(urls) =>
-                      coreConfig.setConfigValue("allowed_redirect_urls", urls)
-                    }
-                    error={coreConfig.allowedRedirectUrlsError}
-                    size={32.5}
-                  />
-                </>
-              ) : (
-                "loading..."
-              )}
-            </div>
-            <div className={styles.configExplain}>
-              Newline-separated list of URLs that will be checked against to
-              ensure redirects 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>
-
-      {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);
-
-  return (
-    <div className={styles.tabContent}>
-      <div className={styles.header}>Providers</div>
-      {state.providers ? (
-        <>
-          <div className={styles.providersList}>
-            {state.providers.length ? (
-              state.providers.map((provider) => (
-                <ProviderCard key={provider.name} provider={provider} />
-              ))
-            ) : (
-              <div className={styles.noProviders}>
-                No providers are configured
-              </div>
-            )}
-          </div>
-          {state.draftProviderConfig ? (
-            <DraftProviderConfigForm draftState={state.draftProviderConfig} />
-          ) : state.providers.length < state.providerTypenames.length ? (
-            <Button
-              className={styles.button}
-              label="Add Provider"
-              onClick={() => state.addDraftProvider()}
-            />
-          ) : null}
-        </>
-      ) : (
-        "loading..."
-      )}
-
-      <div className={styles.header}>Login UI</div>
-      {state.draftUIConfig ? (
-        <UIConfigForm draft={state.draftUIConfig} />
-      ) : (
-        <Button
-          className={styles.button}
-          label="Enable UI"
-          onClick={() => state.enableUI()}
-        />
-      )}
-    </div>
-  );
-});
-
-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);
-
-  const smtp = state.draftSMTPConfig;
-
-  const security = smtp.getConfigValue("security") as unknown as SMTPSecurity;
-
-  return (
-    <div className={styles.tabContent}>
-      <div className={styles.header}>SMTP Configuration</div>
-      <div className={styles.configGrid}>
-        <div className={styles.gridItem}>
-          <div className={styles.configName}>sender</div>
-          <div className={styles.configInputWrapper}>
-            <div className={styles.configInput}>
-              <Input
-                value={smtp.getConfigValue("sender")}
-                onChange={(val) => smtp.setConfigValue("sender", val)}
-                size={32}
-              />
-            </div>
-            <div className={styles.configExplain}>
-              "From" address of system emails sent for e.g. password reset,
-              etc.
-            </div>
-          </div>
-        </div>
-
-        <div className={styles.gridItem}>
-          <div className={styles.configName}>host</div>
-          <div className={styles.configInputWrapper}>
-            <div className={styles.configInput}>
-              <Input
-                value={smtp.getConfigValue("host")}
-                onChange={(val) => smtp.setConfigValue("host", val)}
-                placeholder="localhost"
-                size={32}
-              />
-            </div>
-            <div className={styles.configExplain}>
-              Host of SMTP server to use for sending emails. If not set,
-              "localhost" will be used.
-            </div>
-          </div>
-        </div>
-
-        <div className={styles.gridItem}>
-          <div className={styles.configName}>port</div>
-          <div className={styles.configInputWrapper}>
-            <div className={styles.configInput}>
-              <Input
-                value={smtp.getConfigValue("port")}
-                onChange={(val) => smtp.setConfigValue("port", val)}
-                placeholder={
-                  security === "STARTTLSOrPlainText"
-                    ? "587 or 25"
-                    : security === "TLS"
-                    ? "465"
-                    : security === "STARTTLS"
-                    ? "587"
-                    : "25"
-                }
-                error={smtp.portError}
-                size={10}
-              />
-            </div>
-            <div className={styles.configExplain}>
-              Port of SMTP server to use for sending emails. If not set, common
-              defaults will be used depending on security: 465 for TLS, 587 for
-              STARTTLS, 25 otherwise.
-            </div>
-          </div>
-        </div>
-
-        <div className={styles.gridItem}>
-          <div className={styles.configName}>username</div>
-          <div className={styles.configInputWrapper}>
-            <div className={styles.configInput}>
-              <Input
-                value={smtp.getConfigValue("username")}
-                onChange={(val) => smtp.setConfigValue("username", val)}
-                size={32}
-              />
-            </div>
-            <div className={styles.configExplain}>
-              Username to login as after connected to SMTP server.
-            </div>
-          </div>
-        </div>
-
-        <div className={styles.gridItem}>
-          <div className={styles.configName}>new password</div>
-          <div className={styles.configInputWrapper}>
-            <div className={styles.configInput}>
-              <Input
-                value={smtp.getConfigValue("password")}
-                onChange={(val) => smtp.setConfigValue("password", val)}
-                size={32}
-              />
-            </div>
-            <div className={styles.configExplain}>
-              Password for login after connected to SMTP server. Note: will
-              replace the currently configured SMTP password (if set).
-            </div>
-          </div>
-        </div>
-
-        <div className={styles.gridItem}>
-          <div className={styles.configName}>security</div>
-          <div className={styles.configInputWrapper}>
-            <div className={styles.configInput}>
-              <Select<SMTPSecurity>
-                className={styles.securitySelect}
-                selectedItemId={smtp.getConfigValue("security") as any}
-                onChange={(item) => smtp.setConfigValue("security", item.id)}
-                items={smtpSecurity.map((val) => ({id: val, label: val}))}
-              />
-            </div>
-            <div className={styles.configExplain}>
-              Security mode of the connection to SMTP server. By default,
-              initiate a STARTTLS upgrade if supported by the server, or
-              fallback to PlainText.
-            </div>
-          </div>
-        </div>
-
-        <div className={styles.gridItem}>
-          <div className={styles.configName}>validate_certs</div>
-          <div className={styles.configInputWrapper}>
-            <div className={styles.configInput}>
-              <label className={styles.checkbox}>
-                <input
-                  type="checkbox"
-                  checked={
-                    smtp._validate_certs ??
-                    state.smtpConfig?.validate_certs ??
-                    true
-                  }
-                  onChange={(e) =>
-                    smtp.setConfigValue("validate_certs", e.target.checked)
-                  }
-                />
-              </label>
-            </div>
-            <div className={styles.configExplain}>
-              Determines if SMTP server certificates are validated.
-            </div>
-          </div>
-        </div>
-
-        <div className={styles.gridItem}>
-          <div className={styles.configName}>timeout_per_email</div>
-          <div className={styles.configInputWrapper}>
-            <div className={styles.configInput}>
-              <Input
-                value={smtp.getConfigValue("timeout_per_email")}
-                onChange={(val) =>
-                  smtp.setConfigValue("timeout_per_email", val.toUpperCase())
-                }
-                error={smtp.timeoutPerEmailError}
-              />
-            </div>
-            <div className={styles.configExplain}>
-              Maximum time in seconds to send an email, including retry
-              attempts.
-            </div>
-          </div>
-        </div>
-
-        <div className={styles.gridItem}>
-          <div className={styles.configName}>timeout_per_attempt</div>
-          <div className={styles.configInputWrapper}>
-            <div className={styles.configInput}>
-              <Input
-                value={smtp.getConfigValue("timeout_per_attempt")}
-                onChange={(val) =>
-                  smtp.setConfigValue("timeout_per_attempt", val.toUpperCase())
-                }
-                error={smtp.timeoutPerAttemptError}
-              />
-            </div>
-            <div className={styles.configExplain}>
-              Maximum time in seconds for each SMTP request.
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <StickyBottomBar draft={smtp} />
-    </div>
-  );
-});
-
-const UIConfigForm = observer(function UIConfig({
-  draft,
-}: {
-  draft: DraftUIConfig;
-}) {
-  const state = useTabState(AuthAdminState);
-  const [_, theme] = useTheme();
-
-  const [disablingUI, setDisablingUI] = useState(false);
-
-  return (
-    <div className={styles.uiConfigSection}>
-      <div className={styles.uiConfigFormWrapper}>
-        <div className={styles.configGrid}>
-          <div className={styles.gridItem}>
-            <div className={styles.configName}>redirect_to</div>
-            <div className={styles.configInputWrapper}>
-              <div className={styles.configInput}>
-                <Input
-                  size={32}
-                  value={draft.getConfigValue("redirect_to")}
-                  onChange={(val) => draft.setConfigValue("redirect_to", val)}
-                  error={draft.redirectToError}
-                />
-              </div>
-              <div className={styles.configExplain}>
-                The url to redirect to after successful sign in.
-              </div>
-            </div>
-          </div>
-
-          <div className={styles.gridItem}>
-            <div className={styles.configName}>redirect_to_on_signup</div>
-            <div className={styles.configInputWrapper}>
-              <div className={styles.configInput}>
-                <Input
-                  size={32}
-                  value={draft.getConfigValue("redirect_to_on_signup")}
-                  onChange={(val) =>
-                    draft.setConfigValue("redirect_to_on_signup", val)
-                  }
-                />
-              </div>
-              <div className={styles.configExplain}>
-                The url to redirect to after a new user signs up. If not set,
-                'redirect_to' will be used instead.
-              </div>
-            </div>
-          </div>
-
-          {draft.appConfig ? <AppConfigForm draft={draft.appConfig} /> : null}
-        </div>
-
-        <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}
-            />
-            {state.uiConfig && draft.formChanged ? (
-              <Button
-                className={styles.button}
-                label="Clear Changes"
-                onClick={() => draft.clearForm()}
-              />
-            ) : null}
-
-            <Button
-              className={cn(styles.button, styles.disableButton)}
-              label="Disable UI"
-              onClick={() => {
-                setDisablingUI(true);
-                state.disableUI();
-              }}
-              loading={disablingUI}
-              disabled={disablingUI}
-            />
-          </div>
-        </div>
-      </div>
-
-      <div className={styles.loginUIPreview}>
-        <div className={styles.loginUIPreviewHeader}>
-          <span>Preview</span>
-          <div
-            className={styles.themeSwitch}
-            onClick={() =>
-              draft.setShowDarkTheme(
-                !(draft.showDarkTheme ?? theme === Theme.dark)
-              )
-            }
-          >
-            {draft.showDarkTheme ?? theme == Theme.dark ? (
-              <>
-                <DarkThemeIcon /> Dark theme
-              </>
-            ) : (
-              <>
-                <LightThemeIcon /> Light theme
-              </>
-            )}
-          </div>
-        </div>
-        <LoginUIPreview
-          key={state.providers?.length ?? 0}
-          draft={
-            state.newAppAuthSchema
-              ? state.draftCoreConfig!.appConfig!
-              : draft.appConfig!
-          }
-          providers={state.providers ?? []}
-          darkTheme={draft.showDarkTheme ?? theme == Theme.dark}
-        />
-      </div>
-    </div>
-  );
-});
-
-function ColorPickerInput({
-  color,
-  onChange,
-}: {
-  color: string;
-  onChange: (color: string) => void;
-}) {
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    ref.current?.querySelector("input")?.addEventListener("input", (e) => {
-      if ((e.target as HTMLInputElement).value === "") {
-        onChange("");
-      }
-    });
-  }, []);
-
-  return (
-    <div ref={ref} className={styles.input} style={{"--prefixLen": 1} as any}>
-      <div className={styles.prefix}>#</div>
-      <HexColorInput
-        size={7}
-        color={color}
-        onChange={onChange}
-        onBlur={() => {
-          if (color) onChange("#" + normaliseHexColor(color));
-        }}
-      />
-    </div>
-  );
-}
-
-function ColorPickerPopup({
-  color,
-  onChange,
-}: {
-  color: string;
-  onChange: (color: string) => void;
-}) {
-  const ref = useRef<HTMLDivElement>(null);
-  const [open, setOpen] = useState(false);
-
-  useEffect(() => {
-    const listener = (e: MouseEvent) => {
-      if (!ref.current?.contains(e.target as Node)) {
-        setOpen(false);
-      }
-    };
-    window.addEventListener("click", listener, {capture: true});
-    return () => {
-      window.removeEventListener("click", listener, {capture: true});
-    };
-  }, [open]);
-
-  return (
-    <div
-      ref={ref}
-      className={styles.colorPickerSwatch}
-      onClick={() => setOpen(true)}
-      style={{backgroundColor: `#${color || "1f8aed"}`}}
-    >
-      {open ? (
-        <HexColorPicker
-          className={styles.colorPickerPopup}
-          color={color}
-          onChange={onChange}
-        />
-      ) : null}
-    </div>
-  );
-}
-
-function getProviderSelectItems(
-  providers: typeof _providersInfo,
-  existingProviders: Set<string>
-) {
-  return {
-    items: [],
-    groups: Object.entries(
-      Object.entries(providers).reduce<{
-        [group in ProviderKind]: SelectItem<ProviderTypename>[];
-      }>((items, [id, provider]) => {
-        if (!items[provider.kind]) {
-          items[provider.kind] = [];
-        }
-        items[provider.kind].push({
-          id: id as ProviderTypename,
-          label: (
-            <div className={styles.providerSelectItem}>
-              {provider.icon}
-              {provider.displayName}
-            </div>
-          ),
-          disabled: existingProviders.has(id),
-        });
-        return items;
-      }, {} as any)
-    ).map(([label, items]) => ({label, items})),
-  };
-}
-
-const DraftProviderConfigForm = observer(function DraftProviderConfigForm({
-  draftState,
-}: {
-  draftState: DraftProviderConfig;
-}) {
-  const state = useTabState(AuthAdminState);
-
-  const providerItems = useMemo(
-    () =>
-      getProviderSelectItems(
-        state.providersInfo,
-        new Set(state.providers?.map((p) => p._typename))
-      ),
-    [state.providers]
-  );
-  const providerKind = _providersInfo[draftState.selectedProviderType].kind;
-
-  return (
-    <div className={styles.addProviderForm}>
-      <div className={styles.configGrid}>
-        <div className={styles.gridItem}>
-          <div className={styles.configName}>provider</div>
-          <div className={styles.configInput}>
-            <Select
-              className={styles.providerSelect}
-              selectedItemId={draftState.selectedProviderType}
-              onChange={(item) => draftState.setSelectedProviderType(item.id)}
-              items={providerItems}
-            />
-          </div>
-        </div>
-
-        {providerKind === "OAuth" ? (
-          <>
-            <div className={styles.gridItem}>
-              <div className={styles.configName}>client_id</div>
-              <div className={styles.configInputWrapper}>
-                <div className={styles.configInput}>
-                  <Input
-                    size={32}
-                    value={draftState.oauthClientId}
-                    onChange={(val) => draftState.setOauthClientId(val)}
-                    error={draftState.oauthClientIdError}
-                  />
-                </div>
-                <div className={styles.configExplain}>
-                  ID for client provided by auth provider.
-                </div>
-              </div>
-            </div>
-            <div className={styles.gridItem}>
-              <div className={styles.configName}>secret</div>
-              <div className={styles.configInputWrapper}>
-                <div className={styles.configInput}>
-                  <Input
-                    size={32}
-                    value={draftState.oauthSecret}
-                    onChange={(val) => draftState.setOauthSecret(val)}
-                    error={draftState.oauthSecretError}
-                  />
-                </div>
-                <div className={styles.configExplain}>
-                  Secret provided by auth provider.
-                </div>
-              </div>
-            </div>
-            <div className={styles.gridItem}>
-              <div className={styles.configName}>additional_scope</div>
-              <div className={styles.configInputWrapper}>
-                <div className={styles.configInput}>
-                  <Input
-                    size={32}
-                    value={draftState.additionalScope}
-                    onChange={(val) => draftState.setAdditionalScope(val)}
-                  />
-                </div>
-                <div className={styles.configExplain}>
-                  Space-separated list of scopes to be included in the
-                  authorize request to the OAuth provider.
-                </div>
-              </div>
-            </div>
-          </>
-        ) : providerKind === "Local" ? (
-          <>
-            {draftState.selectedProviderType ===
-            "ext::auth::WebAuthnProviderConfig" ? (
-              <div className={styles.gridItem}>
-                <div className={styles.configName}>relying_party_origin</div>
-                <div className={styles.configInputWrapper}>
-                  <div className={styles.configInput}>
-                    <Input
-                      size={32}
-                      value={draftState.webauthnRelyingOrigin}
-                      onChange={(val) =>
-                        draftState.setWebauthnRelyingOrigin(val)
-                      }
-                      error={draftState.webauthnRelyingOriginError}
-                    />
-                  </div>
-                  <div className={styles.configExplain}>
-                    The full origin of the sign-in page including protocol and
-                    port of the application. If using the built-in UI, this
-                    should be the origin of the EdgeDB server.
-                  </div>
-                </div>
-              </div>
-            ) : null}
-            {draftState.selectedProviderType ===
-              "ext::auth::EmailPasswordProviderConfig" ||
-            draftState.selectedProviderType ===
-              "ext::auth::WebAuthnProviderConfig" ? (
-              <div className={styles.gridItem}>
-                <div className={styles.configName}>require_verification</div>
-                <div className={styles.configInputWrapper}>
-                  <div className={styles.configInput}>
-                    <label className={styles.checkbox}>
-                      <input
-                        type="checkbox"
-                        checked={draftState.requireEmailVerification}
-                        onChange={(e) =>
-                          draftState.setRequireEmailVerification(
-                            e.target.checked
-                          )
-                        }
-                      />
-                    </label>
-                  </div>
-                  <div className={styles.configExplain}>
-                    Whether the email needs to be verified before the user is
-                    allowed to sign in.
-                  </div>
-                </div>
-              </div>
-            ) : null}
-            {draftState.selectedProviderType ===
-            "ext::auth::MagicLinkProviderConfig" ? (
-              <div className={styles.gridItem}>
-                <div className={styles.configName}>token_time_to_live</div>
-                <div className={styles.configInputWrapper}>
-                  <div className={styles.configInput}>
-                    <Input
-                      size={16}
-                      value={draftState.tokenTimeToLive}
-                      onChange={(val) =>
-                        draftState.setTokenTimeToLive(val.toUpperCase())
-                      }
-                      error={draftState.tokenTimeToLiveError}
-                    />
-                  </div>
-                  <div className={styles.configExplain}>
-                    The time after which a magic link token expires. Defaults
-                    to 10 minutes.
-                  </div>
-                </div>
-              </div>
-            ) : null}
-          </>
-        ) : null}
-      </div>
-
-      {draftState.error ? (
-        <div className={styles.errorMessage}>{draftState.error}</div>
-      ) : null}
-
-      <div className={styles.addProviderFormButtons}>
-        <Button
-          className={styles.button}
-          label={draftState.updating ? "Adding Provider..." : "Add Provider"}
-          loading={draftState.updating}
-          disabled={!draftState.formValid || draftState.updating}
-          onClick={() => draftState.addProvider()}
-        />
-        <Button
-          className={styles.button}
-          label={"Cancel"}
-          onClick={() => state.cancelDraftProvider()}
-        />
-      </div>
-    </div>
-  );
-});
-
-function ProviderCard({provider}: {provider: AuthProviderData}) {
-  const state = useTabState(AuthAdminState);
-  const [deleting, setDeleting] = useState(false);
-  const [expanded, setExpanded] = useState(false);
-
-  const {displayName, icon, kind} = _providersInfo[provider._typename];
-
-  return (
-    <div className={styles.providerCard}>
-      <div className={styles.providerCardHeader}>
-        <div
-          className={cn(styles.expandProvider, {
-            [styles.collapsed]: !expanded,
-            // [styles.disabled]: kind !== "OAuth",
-          })}
-          onClick={() => setExpanded(!expanded)}
-        >
-          <ChevronDownIcon />
-        </div>
-        {icon}
-        {displayName}
-        <div className={styles.providerType}>{kind}</div>
-
-        <Button
-          className={cn(styles.removeProviderButton, {
-            [styles.noHide]: deleting,
-          })}
-          icon={<DeleteIcon className={styles.icon} />}
-          leftIcon
-          label={deleting ? "Removing..." : "Remove"}
-          loading={deleting}
-          onClick={() => {
-            setDeleting(true);
-            state.removeProvider(provider._typename, provider.name);
-          }}
-        />
-      </div>
-      {expanded ? (
-        <div className={styles.providerDetails}>
-          {kind === "OAuth" ? (
-            <>
-              <div className={styles.providerConfigName}>client_id</div>
-              <div className={styles.providerConfigValue}>
-                {(provider as OAuthProviderData).client_id}
-              </div>
-
-              <div className={styles.providerConfigName}>secret</div>
-              <div className={styles.providerConfigValue}>
-                {secretPlaceholder}
-              </div>
-
-              <div className={styles.providerConfigName}>additional_scope</div>
-              <div className={styles.providerConfigValue}>
-                {(provider as OAuthProviderData).additional_scope || (
-                  <span>none</span>
-                )}
-              </div>
-            </>
-          ) : kind === "Local" ? (
-            <>
-              {provider.name === "builtin::local_webauthn" ? (
-                <>
-                  <div className={styles.providerConfigName}>
-                    relying_party_origin
-                  </div>
-                  <div className={styles.providerConfigValue}>
-                    {
-                      (provider as LocalWebAuthnProviderData)
-                        .relying_party_origin
-                    }
-                  </div>
-                </>
-              ) : null}
-              {provider.name === "builtin::local_emailpassword" ||
-              provider.name === "builtin::local_webauthn" ? (
-                <>
-                  <div className={styles.providerConfigName}>
-                    require_verification
-                  </div>
-                  <div className={styles.providerConfigValue}>
-                    {(
-                      provider as
-                        | LocalEmailPasswordProviderData
-                        | LocalWebAuthnProviderData
-                    ).require_verification.toString()}
-                  </div>
-                </>
-              ) : null}
-              {provider.name === "builtin::local_magic_link" ? (
-                <>
-                  <div className={styles.providerConfigName}>time_to_live</div>
-                  <div className={styles.providerConfigValue}>
-                    {
-                      (provider as LocalMagicLinkProviderData)
-                        .token_time_to_live
-                    }
-                    s
-                  </div>
-                </>
-              ) : null}
-            </>
-          ) : null}
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-function Input({
-  value,
-  onChange,
-  error,
-  showGenerateKey = false,
-  size,
-  placeholder,
-}: {
-  value: string;
-  onChange: (val: string) => void;
-  error?: string | null;
-  showGenerateKey?: boolean;
-  size?: number;
-  placeholder?: string;
-}) {
-  return (
-    <div className={styles.inputWrapper}>
-      <div className={cn(styles.input, {[styles.error]: !!error})}>
-        <input
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          size={size}
-          placeholder={placeholder}
-        />
-        {showGenerateKey ? (
-          <div
-            className={styles.generateKeyButton}
-            onClick={() =>
-              onChange(
-                encodeB64(crypto.getRandomValues(new Uint8Array(256))).replace(
-                  /=*$/,
-                  ""
-                )
-              )
-            }
-          >
-            <GenerateKeyIcon />
-            <span>Generate Random Key</span>
-          </div>
-        ) : null}
-      </div>
-      {error ? <div className={styles.inputErrorMessage}>{error}</div> : null}
-    </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={{
-            whiteSpace: "pre",
-            height: 32 * 2.5 + "px",
-            width: size ? `${size}ch` : undefined,
-          }}
-        />
-      </div>
-      {error ? <div className={styles.inputErrorMessage}>{error}</div> : null}
-    </div>
-  );
-}
diff --git a/shared/studio/tabs/auth/loginUIPreview.tsx b/shared/studio/tabs/auth/loginUIPreview.tsx
index 2d5782e3..14dff409 100644
--- a/shared/studio/tabs/auth/loginUIPreview.tsx
+++ b/shared/studio/tabs/auth/loginUIPreview.tsx
@@ -6,6 +6,7 @@ import {
   AuthProviderData,
   DraftAppConfig,
   OAuthProviderData,
+  OpenIDProviderData,
   _providersInfo,
 } from "./state";
 
@@ -41,7 +42,7 @@ export function LoginUIPreview({
   let hasPasswordProvider = false,
     hasWebAuthnProvider = false,
     hasMagicLinkProvider = false;
-  const oauthProviders: OAuthProviderData[] = [];
+  const oauthProviders: (OAuthProviderData | OpenIDProviderData)[] = [];
   for (const provider of providers) {
     switch (provider._typename) {
       case "ext::auth::EmailPasswordProviderConfig":
@@ -61,16 +62,22 @@ export function LoginUIPreview({
   const hasEmailFactor =
     hasPasswordProvider || hasWebAuthnProvider || hasMagicLinkProvider;
 
-  const oauthButtons = providers
-    .filter((provider) => _providersInfo[provider._typename].kind === "OAuth")
-    .map((provider) => (
-      <a key={provider.name}>
-        {_providersInfo[provider._typename].icon}
-        <span>
-          Sign in with {_providersInfo[provider._typename].displayName}
-        </span>
-      </a>
-    ));
+  const oauthButtons = oauthProviders.map((provider) => (
+    <a key={provider.name}>
+      {provider._typename === "ext::auth::OpenIDConnectProvider" &&
+      provider.logo_url ? (
+        <img src={provider.logo_url} />
+      ) : (
+        _providersInfo[provider._typename].icon
+      )}
+      <span>
+        Sign in with{" "}
+        {provider._typename === "ext::auth::OpenIDConnectProvider"
+          ? provider.display_name
+          : _providersInfo[provider._typename].displayName}
+      </span>
+    </a>
+  ));
 
   let extraPadding = 0;
   let emailFactorForm = (
diff --git a/shared/studio/tabs/auth/loginuipreview.module.scss b/shared/studio/tabs/auth/loginuipreview.module.scss
index a1487deb..089747d5 100644
--- a/shared/studio/tabs/auth/loginuipreview.module.scss
+++ b/shared/studio/tabs/auth/loginuipreview.module.scss
@@ -19,7 +19,7 @@
 
   @include isMobile {
     padding: 48px 32px;
-    margin: 0 -32px;
+    margin: 0 -24px;
     border-radius: 0;
     border-left: none;
     border-right: none;
@@ -267,6 +267,12 @@
       span {
         margin-left: 12px;
       }
+
+      img {
+        width: 32px;
+        height: 32px;
+        object-fit: contain;
+      }
     }
 
     &.collapsed {
diff --git a/shared/studio/tabs/auth/providers.tsx b/shared/studio/tabs/auth/providers.tsx
new file mode 100644
index 00000000..4b756dab
--- /dev/null
+++ b/shared/studio/tabs/auth/providers.tsx
@@ -0,0 +1,647 @@
+import {useMemo, useState} from "react";
+import {observer} from "mobx-react-lite";
+
+import cn from "@edgedb/common/utils/classNames";
+
+import {useTabState} from "../../state";
+import {
+  _providersInfo,
+  AuthAdminState,
+  AuthProviderData,
+  DraftProviderConfig,
+  DraftUIConfig,
+  LocalEmailPasswordProviderData,
+  LocalMagicLinkProviderData,
+  LocalWebAuthnProviderData,
+  OAuthProviderData,
+  ProviderKind,
+  ProviderTypename,
+} from "./state";
+
+import {
+  Button,
+  Checkbox,
+  ChevronDownIcon,
+  ConfirmButton,
+  FieldHeader,
+  InfoTooltip,
+  Select,
+  SelectItem,
+  TextInput,
+} from "@edgedb/common/newui";
+
+import styles from "./authAdmin.module.scss";
+import {StickyBottomBar} from "./shared";
+import {Theme, useTheme} from "@edgedb/common/hooks/useTheme";
+import {AppConfigForm} from "./config";
+import {
+  DarkThemeIcon,
+  LightThemeIcon,
+} from "@edgedb/common/ui/themeSwitcher/icons";
+import {LoginUIPreview} from "./loginUIPreview";
+import {LoadingSkeleton} from "@edgedb/common/newui/loadingSkeleton";
+
+export const ProvidersTab = observer(function ProvidersTab() {
+  const state = useTabState(AuthAdminState);
+
+  return (
+    <div className={styles.tabContentWrapper}>
+      <h2>Providers</h2>
+      {state.providers ? (
+        <>
+          {state.providers.length ? (
+            <div className={styles.cardList}>
+              {state.providers.map((provider) => (
+                <ProviderCard key={provider.name} provider={provider} />
+              ))}
+            </div>
+          ) : null}
+
+          {state.draftProviderConfig ? (
+            <div className={styles.addDraft}>
+              <DraftProviderConfigForm
+                draftState={state.draftProviderConfig}
+              />
+            </div>
+          ) : state.providers.length < state.providerTypenames.length ? (
+            <div className={styles.addDraft}>
+              <Button onClick={() => state.addDraftProvider()}>
+                Add Provider
+              </Button>
+            </div>
+          ) : null}
+        </>
+      ) : (
+        <div className={styles.cardList}>
+          <LoadingSkeleton className={styles.providerSkeleton} />
+          <LoadingSkeleton className={styles.providerSkeleton} />
+          <LoadingSkeleton className={styles.providerSkeleton} />
+        </div>
+      )}
+
+      <h2 style={{marginTop: "96px"}}>Built-in Login UI</h2>
+      {state.draftUIConfig ? (
+        <UIConfigForm draft={state.draftUIConfig} />
+      ) : state.uiConfig != null ? (
+        <div className={styles.enableUI}>
+          <Button onClick={() => state.enableUI()}>Enable UI</Button>
+        </div>
+      ) : (
+        <LoadingSkeleton className={styles.uiConfigSkeleton} />
+      )}
+    </div>
+  );
+});
+
+function getProviderSelectItems(
+  providers: typeof _providersInfo,
+  existingProviders: Set<string>
+) {
+  return {
+    items: [],
+    groups: Object.entries(
+      Object.entries(providers).reduce<{
+        [group in ProviderKind]: SelectItem<ProviderTypename>[];
+      }>((items, [id, provider]) => {
+        if (!items[provider.kind]) {
+          items[provider.kind] = [];
+        }
+        items[provider.kind].push({
+          id: id as ProviderTypename,
+          label: (
+            <div className={styles.providerSelectItem}>
+              {provider.icon}
+              {provider.displayName}
+            </div>
+          ),
+          disabled:
+            (id as ProviderTypename) !== "ext::auth::OpenIDConnectProvider" &&
+            existingProviders.has(id),
+        });
+        return items;
+      }, {} as any)
+    ).map(([label, items]) => ({label, items})),
+  };
+}
+
+const DraftProviderConfigForm = observer(function DraftProviderConfigForm({
+  draftState,
+}: {
+  draftState: DraftProviderConfig;
+}) {
+  const state = useTabState(AuthAdminState);
+
+  const providerItems = useMemo(
+    () =>
+      getProviderSelectItems(
+        state.providersInfo,
+        new Set(state.providers?.map((p) => p._typename))
+      ),
+    [state.providers]
+  );
+  const providerKind = _providersInfo[draftState.selectedProviderType].kind;
+
+  return (
+    <div className={cn(styles.draftForm)}>
+      <div className={styles.formRow}>
+        <Select
+          items={providerItems}
+          selectedItemId={draftState.selectedProviderType}
+          onChange={(item) => draftState.setSelectedProviderType(item.id)}
+        />
+      </div>
+
+      {providerKind === "OAuth" ? (
+        <>
+          {draftState.selectedProviderType ===
+          "ext::auth::OpenIDConnectProvider" ? (
+            <>
+              <div className={cn(styles.formRow, styles.evenWidth)}>
+                <TextInput
+                  label={
+                    <>
+                      Provider name
+                      <InfoTooltip
+                        message={
+                          <>
+                            The unique identifier referenced by the{" "}
+                            <code>provider</code> option in the auth API's
+                          </>
+                        }
+                      />
+                    </>
+                  }
+                  value={draftState.providerName ?? ""}
+                  onChange={(e) => draftState.setProviderName(e.target.value)}
+                  error={draftState.providerNameError}
+                />
+                <TextInput
+                  label={
+                    <>
+                      Provider display name
+                      <InfoTooltip message="Provider name to be displayed in the login UI" />
+                    </>
+                  }
+                  value={draftState.displayName ?? ""}
+                  onChange={(e) => draftState.setDisplayName(e.target.value)}
+                  error={draftState.displayNameError}
+                />
+              </div>
+
+              <div className={cn(styles.formRow, styles.evenWidth)}>
+                <TextInput
+                  label={
+                    <>
+                      Issuer URL
+                      <InfoTooltip message="The issuer URL of the provider" />
+                    </>
+                  }
+                  value={draftState.issuerUrl ?? ""}
+                  onChange={(e) => draftState.setIssuerUrl(e.target.value)}
+                  error={draftState.issuerUrlError}
+                />
+                <TextInput
+                  label={
+                    <>
+                      Logo URL
+                      <InfoTooltip message="A url to an image of the provider's logo" />
+                    </>
+                  }
+                  optional
+                  value={draftState.logoUrl ?? ""}
+                  onChange={(e) => draftState.setLogoUrl(e.target.value)}
+                  error={draftState.logoUrlError}
+                />
+              </div>
+            </>
+          ) : null}
+
+          <div className={cn(styles.formRow, styles.evenWidth)}>
+            <TextInput
+              label={
+                <>
+                  Client ID
+                  <InfoTooltip message={"Client ID from the OAuth provider"} />
+                </>
+              }
+              value={draftState.oauthClientId ?? ""}
+              onChange={(e) => draftState.setOauthClientId(e.target.value)}
+              error={draftState.oauthClientIdError}
+            />
+            <TextInput
+              label={
+                <>
+                  Client secret{" "}
+                  <InfoTooltip
+                    message={"Secret provided by the OAuth provider"}
+                  />
+                </>
+              }
+              value={draftState.oauthSecret ?? ""}
+              onChange={(e) => draftState.setOauthSecret(e.target.value)}
+              error={draftState.oauthSecretError}
+            />
+          </div>
+          <div className={cn(styles.formRow, styles.fullWidth)}>
+            <TextInput
+              label={
+                <>
+                  Additional scopes{" "}
+                  <InfoTooltip
+                    message={
+                      "Space-separated list of scopes to be included in the authorize request to the OAuth provider"
+                    }
+                  />
+                </>
+              }
+              optional
+              value={draftState.additionalScope}
+              onChange={(e) => draftState.setAdditionalScope(e.target.value)}
+            />
+          </div>
+        </>
+      ) : providerKind === "Local" ? (
+        <>
+          {draftState.selectedProviderType ===
+          "ext::auth::WebAuthnProviderConfig" ? (
+            <div className={cn(styles.formRow, styles.fullWidth)}>
+              <TextInput
+                label={
+                  <>
+                    Relying party origin
+                    <InfoTooltip
+                      message={
+                        <>
+                          The full origin of the sign-in page including
+                          protocol and port of the application. If using the
+                          built-in UI, this should be the origin of the EdgeDB
+                          server.
+                        </>
+                      }
+                    />
+                  </>
+                }
+                value={draftState.webauthnRelyingOrigin ?? ""}
+                onChange={(e) =>
+                  draftState.setWebauthnRelyingOrigin(e.target.value)
+                }
+                error={draftState.webauthnRelyingOriginError}
+              />
+            </div>
+          ) : null}
+          {draftState.selectedProviderType ===
+            "ext::auth::EmailPasswordProviderConfig" ||
+          draftState.selectedProviderType ===
+            "ext::auth::WebAuthnProviderConfig" ? (
+            <div className={styles.formRow}>
+              <Checkbox
+                label={
+                  <>
+                    Require email verification
+                    <InfoTooltip
+                      message={
+                        <>
+                          Whether the email needs to be verified before the
+                          user is allowed to sign in.
+                        </>
+                      }
+                    />
+                  </>
+                }
+                checked={draftState.requireEmailVerification}
+                onChange={(checked) =>
+                  draftState.setRequireEmailVerification(checked)
+                }
+              />
+            </div>
+          ) : null}
+          {draftState.selectedProviderType ===
+          "ext::auth::MagicLinkProviderConfig" ? (
+            <div className={styles.formRow}>
+              <TextInput
+                label={
+                  <>
+                    Token time to live
+                    <InfoTooltip
+                      message={
+                        <>
+                          The time after which a magic link token expires.
+                          Defaults to 10 minutes.
+                        </>
+                      }
+                    />
+                  </>
+                }
+                size={16}
+                optional
+                value={draftState.tokenTimeToLive}
+                onChange={(e) =>
+                  draftState.setTokenTimeToLive(e.target.value.toUpperCase())
+                }
+                error={draftState.tokenTimeToLiveError}
+              />
+            </div>
+          ) : null}
+        </>
+      ) : null}
+
+      <div className={cn(styles.formRow, styles.buttons)}>
+        <Button onClick={() => state.cancelDraftProvider()}>Cancel</Button>
+        <Button
+          kind="primary"
+          onClick={() => draftState.addProvider()}
+          disabled={!draftState.formValid}
+          loading={draftState.updating}
+        >
+          {draftState.updating ? "Adding Provider..." : "Add Provider"}
+        </Button>
+      </div>
+    </div>
+  );
+});
+
+function ProviderCard({provider}: {provider: AuthProviderData}) {
+  const state = useTabState(AuthAdminState);
+  const [deleting, setDeleting] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+
+  const isOpenIdConnect =
+    provider._typename === "ext::auth::OpenIDConnectProvider";
+  const {displayName, icon, kind} = _providersInfo[provider._typename];
+
+  return (
+    <div className={cn(styles.card, styles.providerCard)}>
+      <div className={styles.cardMain}>
+        <div className={styles.details}>
+          {isOpenIdConnect && provider.logo_url ? (
+            <div
+              className={styles.logo}
+              style={{backgroundImage: `url(${provider.logo_url}`}}
+            />
+          ) : (
+            icon
+          )}
+          <div className={styles.name}>
+            {isOpenIdConnect ? (
+              <>
+                {provider.display_name} <span>{displayName}</span>
+              </>
+            ) : (
+              displayName
+            )}
+          </div>
+          <div className={styles.providerType}>{kind}</div>
+        </div>
+        <div
+          className={cn(styles.expandButton, {[styles.expanded]: expanded})}
+          onClick={() => setExpanded(!expanded)}
+        >
+          <ChevronDownIcon />
+        </div>
+      </div>
+
+      {expanded ? (
+        <div className={styles.expandedConfig}>
+          <div className={cn(styles.formRow, styles.evenWidth)}>
+            <TextInput readOnly label="Provider name" value={provider.name} />
+            {isOpenIdConnect ? (
+              <TextInput
+                readOnly
+                label="Provider display name"
+                value={provider.display_name}
+              />
+            ) : (
+              <div className={styles.spacer} />
+            )}
+          </div>
+          {isOpenIdConnect ? (
+            <div className={cn(styles.formRow, styles.evenWidth)}>
+              <TextInput
+                readOnly
+                label="Issuer URL"
+                value={provider.issuer_url}
+              />
+              <TextInput
+                readOnly
+                label="Logo URL"
+                value={provider.logo_url ?? ""}
+              />
+            </div>
+          ) : null}
+          {kind === "OAuth" ? (
+            <>
+              <div className={cn(styles.formRow, styles.evenWidth)}>
+                <TextInput
+                  readOnly
+                  label="Client ID"
+                  value={(provider as OAuthProviderData).client_id}
+                />
+                <TextInput
+                  readOnly
+                  label="Client secret"
+                  value={"secret hidden"}
+                  type="password"
+                />
+              </div>
+              <div className={cn(styles.formRow, styles.fullWidth)}>
+                <TextInput
+                  readOnly
+                  label="Additional scopes"
+                  value={
+                    (provider as OAuthProviderData).additional_scope ?? ""
+                  }
+                />
+              </div>
+            </>
+          ) : kind === "Local" ? (
+            <>
+              {provider.name === "builtin::local_webauthn" ? (
+                <div className={cn(styles.formRow, styles.fullWidth)}>
+                  <TextInput
+                    readOnly
+                    label="Relying party origin"
+                    value={
+                      (provider as LocalWebAuthnProviderData)
+                        .relying_party_origin
+                    }
+                  />
+                </div>
+              ) : null}
+              {provider.name === "builtin::local_emailpassword" ||
+              provider.name === "builtin::local_webauthn" ? (
+                <div className={styles.formRow}>
+                  <Checkbox
+                    readOnly
+                    label="Require email verification"
+                    checked={
+                      (
+                        provider as
+                          | LocalEmailPasswordProviderData
+                          | LocalWebAuthnProviderData
+                      ).require_verification
+                    }
+                  />
+                </div>
+              ) : null}
+              {provider.name === "builtin::local_magic_link" ? (
+                <div className={styles.formRow}>
+                  <TextInput
+                    readOnly
+                    size={16}
+                    label="Token time to live"
+                    value={
+                      (provider as LocalMagicLinkProviderData)
+                        .token_time_to_live
+                    }
+                  />
+                </div>
+              ) : null}
+            </>
+          ) : null}
+
+          <div className={cn(styles.formRow, styles.buttons)}>
+            <ConfirmButton
+              loading={deleting}
+              onClick={() => {
+                setDeleting(true);
+                state.removeProvider(provider._typename, provider.name);
+              }}
+            >
+              {deleting ? "Removing..." : "Remove"}
+            </ConfirmButton>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+const UIConfigForm = observer(function UIConfig({
+  draft,
+}: {
+  draft: DraftUIConfig;
+}) {
+  const state = useTabState(AuthAdminState);
+  const [_, theme] = useTheme();
+
+  const [disablingUI, setDisablingUI] = useState(false);
+
+  return (
+    <div>
+      <div className={styles.configGrid}>
+        <div className={styles.gridItem}>
+          <div className={styles.configName}>
+            <FieldHeader label="Redirect to" />
+          </div>
+
+          <div className={cn(styles.configInput, styles.fullWidth)}>
+            <TextInput
+              value={draft.getConfigValue("redirect_to")}
+              onChange={(e) =>
+                draft.setConfigValue("redirect_to", e.target.value)
+              }
+              error={draft.redirectToError}
+            />
+          </div>
+          <div className={styles.configExplain}>
+            The url to redirect to after successful sign in.
+          </div>
+        </div>
+
+        <div className={styles.gridItem}>
+          <div className={styles.configName}>
+            <FieldHeader label="Redirect to on signup" />
+          </div>
+
+          <div className={cn(styles.configInput, styles.fullWidth)}>
+            <TextInput
+              value={draft.getConfigValue("redirect_to_on_signup")}
+              onChange={(e) =>
+                draft.setConfigValue("redirect_to_on_signup", e.target.value)
+              }
+            />
+          </div>
+          <div className={styles.configExplain}>
+            The url to redirect to after a new user signs up. If not set,
+            'redirect_to' will be used instead.
+          </div>
+        </div>
+
+        {draft.appConfig ? <AppConfigForm draft={draft.appConfig} /> : null}
+      </div>
+
+      <StickyBottomBar visible={true}>
+        {state.uiConfig ? (
+          <ConfirmButton
+            onClick={() => {
+              setDisablingUI(true);
+              state.disableUI();
+            }}
+            loading={disablingUI}
+            style={{marginRight: "auto"}}
+          >
+            Disable UI
+          </ConfirmButton>
+        ) : (
+          <Button
+            onClick={() => {
+              state.disableUI();
+            }}
+            loading={disablingUI}
+            style={{marginRight: "auto"}}
+          >
+            Cancel
+          </Button>
+        )}
+
+        {state.uiConfig && draft.formChanged ? (
+          <Button kind="outline" onClick={() => draft.clearForm()}>
+            Clear Changes
+          </Button>
+        ) : null}
+        <Button
+          kind="primary"
+          onClick={() => draft.update()}
+          disabled={draft.formError || !draft.formChanged || draft.updating}
+          loading={draft.updating}
+        >
+          {state.uiConfig ? "Update" : "Enable UI"}
+        </Button>
+      </StickyBottomBar>
+
+      <div className={styles.loginUIPreview}>
+        <div className={styles.loginUIPreviewHeader}>
+          <span>Preview</span>
+          <div
+            className={styles.themeSwitch}
+            onClick={() =>
+              draft.setShowDarkTheme(
+                !(draft.showDarkTheme ?? theme === Theme.dark)
+              )
+            }
+          >
+            {draft.showDarkTheme ?? theme == Theme.dark ? (
+              <>
+                <DarkThemeIcon /> Dark theme
+              </>
+            ) : (
+              <>
+                <LightThemeIcon /> Light theme
+              </>
+            )}
+          </div>
+        </div>
+        <LoginUIPreview
+          key={state.providers?.length ?? 0}
+          draft={
+            state.newAppAuthSchema
+              ? state.draftCoreConfig!.appConfig!
+              : draft.appConfig!
+          }
+          providers={state.providers ?? []}
+          darkTheme={draft.showDarkTheme ?? theme == Theme.dark}
+        />
+      </div>
+    </div>
+  );
+});
diff --git a/shared/studio/tabs/auth/shared.tsx b/shared/studio/tabs/auth/shared.tsx
new file mode 100644
index 00000000..5df75b5c
--- /dev/null
+++ b/shared/studio/tabs/auth/shared.tsx
@@ -0,0 +1,55 @@
+import {observer} from "mobx-react-lite";
+
+import cn from "@edgedb/common/utils/classNames";
+
+import {Button} from "@edgedb/common/newui";
+
+import {AbstractDraftConfig} from "./state";
+
+import styles from "./authAdmin.module.scss";
+import {PropsWithChildren} from "react";
+import {LoadingSkeleton} from "@edgedb/common/newui/loadingSkeleton";
+
+export const secretPlaceholder = "".padStart(32, "•");
+
+export function StickyBottomBar({
+  children,
+  visible,
+}: PropsWithChildren<{visible: boolean}>) {
+  return (
+    <div className={cn(styles.stickyBottomBar, {[styles.visible]: visible})}>
+      <div className={styles.bar}>{children}</div>
+    </div>
+  );
+}
+
+export const StickyFormControls = observer(function StickyFormControls({
+  draft,
+}: {
+  draft: AbstractDraftConfig;
+}) {
+  return (
+    <StickyBottomBar visible={draft.formChanged}>
+      <Button
+        kind="outline"
+        onClick={() => draft.clearForm()}
+        style={{marginLeft: "auto"}}
+      >
+        Clear Changes
+      </Button>
+
+      <Button
+        kind="primary"
+        onClick={() => draft.update()}
+        disabled={draft.formError || !draft.formChanged || draft.updating}
+        loading={draft.updating}
+      >
+        Update
+      </Button>
+    </StickyBottomBar>
+  );
+});
+
+export const InputSkeleton = () => (
+  <LoadingSkeleton className={styles.inputSkeleton} />
+);
diff --git a/shared/studio/tabs/auth/smtp.tsx b/shared/studio/tabs/auth/smtp.tsx
new file mode 100644
index 00000000..68a7c4e8
--- /dev/null
+++ b/shared/studio/tabs/auth/smtp.tsx
@@ -0,0 +1,253 @@
+import {observer} from "mobx-react-lite";
+
+import {useTabState} from "../../state";
+import {AuthAdminState, smtpSecurity, SMTPSecurity} from "./state";
+
+import cn from "@edgedb/common/utils/classNames";
+
+import {Checkbox, FieldHeader, Select, TextInput} from "@edgedb/common/newui";
+
+import styles from "./authAdmin.module.scss";
+import {InputSkeleton, StickyFormControls} from "./shared";
+
+export const SMTPConfigTab = observer(function SMTPConfigTab() {
+  const state = useTabState(AuthAdminState);
+
+  const loaded = state.smtpConfig != null;
+
+  const smtp = state.draftSMTPConfig;
+
+  const security = smtp.getConfigValue("security") as unknown as SMTPSecurity;
+
+  return (
+    <div className={styles.tabContentWrapper}>
+      <h2>SMTP Configuration</h2>
+
+      <div className={styles.configGrid}>
+        <div className={styles.gridItem}>
+          <div className={styles.configName}>
+            <FieldHeader label="Sender" />
+          </div>
+
+          <div className={cn(styles.configInput, styles.fullWidth)}>
+            {loaded ? (
+              <TextInput
+                value={smtp.getConfigValue("sender")}
+                onChange={(e) => smtp.setConfigValue("sender", e.target.value)}
+              />
+            ) : (
+              <InputSkeleton />
+            )}
+          </div>
+          <div className={styles.configExplain}>
+            "From" address of system emails sent for e.g. password reset, etc.
+          </div>
+        </div>
+
+        <div className={styles.gridItem}>
+          <div className={styles.configName}>
+            <FieldHeader label="Host" />
+          </div>
+
+          <div className={cn(styles.configInput, styles.fullWidth)}>
+            {loaded ? (
+              <TextInput
+                value={smtp.getConfigValue("host")}
+                onChange={(e) => smtp.setConfigValue("host", e.target.value)}
+                placeholder="localhost"
+              />
+            ) : (
+              <InputSkeleton />
+            )}
+          </div>
+          <div className={styles.configExplain}>
+            Host of SMTP server to use for sending emails. If not set,
+            "localhost" will be used.
+          </div>
+        </div>
+
+        <div className={styles.gridItem}>
+          <div className={styles.configName}>
+            <FieldHeader label="Port" />
+          </div>
+
+          <div className={styles.configInput}>
+            {loaded ? (
+              <TextInput
+                value={smtp.getConfigValue("port")}
+                onChange={(e) => smtp.setConfigValue("port", e.target.value)}
+                placeholder={
+                  security === "STARTTLSOrPlainText"
+                    ? "587 or 25"
+                    : security === "TLS"
+                    ? "465"
+                    : security === "STARTTLS"
+                    ? "587"
+                    : "25"
+                }
+                error={smtp.portError}
+                size={10}
+              />
+            ) : (
+              <InputSkeleton />
+            )}
+          </div>
+          <div className={styles.configExplain}>
+            Port of SMTP server to use for sending emails. If not set, common
+            defaults will be used depending on security: 465 for TLS, 587 for
+            STARTTLS, 25 otherwise.
+          </div>
+        </div>
+
+        <div className={styles.gridItem}>
+          <div className={styles.configName}>
+            <FieldHeader label="Username" />
+          </div>
+
+          <div className={cn(styles.configInput, styles.fullWidth)}>
+            {loaded ? (
+              <TextInput
+                value={smtp.getConfigValue("username")}
+                onChange={(e) =>
+                  smtp.setConfigValue("username", e.target.value)
+                }
+              />
+            ) : (
+              <InputSkeleton />
+            )}
+          </div>
+          <div className={styles.configExplain}>
+            Username to login as after connected to SMTP server.
+          </div>
+        </div>
+
+        <div className={styles.gridItem}>
+          <div className={styles.configName}>
+            <FieldHeader label="New password" />
+          </div>
+
+          <div className={cn(styles.configInput, styles.fullWidth)}>
+            {loaded ? (
+              <TextInput
+                value={smtp.getConfigValue("password")}
+                onChange={(e) =>
+                  smtp.setConfigValue("password", e.target.value)
+                }
+              />
+            ) : (
+              <InputSkeleton />
+            )}
+          </div>
+          <div className={styles.configExplain}>
+            Password for login after connected to SMTP server. Note: will
+            replace the currently configured SMTP password (if set).
+          </div>
+        </div>
+
+        <div className={styles.gridItem}>
+          <div className={styles.configName}>
+            <FieldHeader label="Security" />
+          </div>
+
+          <div className={styles.configInput}>
+            {loaded ? (
+              <Select<SMTPSecurity>
+                className={styles.securitySelect}
+                selectedItemId={smtp.getConfigValue("security") as any}
+                onChange={(item) => smtp.setConfigValue("security", item.id)}
+                items={smtpSecurity.map((val) => ({id: val, label: val}))}
+              />
+            ) : (
+              <InputSkeleton />
+            )}
+          </div>
+          <div className={styles.configExplain}>
+            Security mode of the connection to SMTP server. By default,
+            initiate a STARTTLS upgrade if supported by the server, or fallback
+            to PlainText.
+          </div>
+        </div>
+
+        <div className={styles.gridItem}>
+          <div className={styles.configName}>
+            <FieldHeader label="Validate certs" />
+          </div>
+
+          <div className={styles.configInput}>
+            {loaded ? (
+              <Checkbox
+                checked={
+                  smtp._validate_certs ??
+                  state.smtpConfig?.validate_certs ??
+                  true
+                }
+                onChange={(checked) =>
+                  smtp.setConfigValue("validate_certs", checked)
+                }
+              />
+            ) : (
+              <InputSkeleton />
+            )}
+          </div>
+          <div className={styles.configExplain}>
+            Determines if SMTP server certificates are validated.
+          </div>
+        </div>
+
+        <div className={styles.gridItem}>
+          <div className={styles.configName}>
+            <FieldHeader label="Timeout per email" />
+          </div>
+
+          <div className={styles.configInput}>
+            {loaded ? (
+              <TextInput
+                value={smtp.getConfigValue("timeout_per_email")}
+                onChange={(e) =>
+                  smtp.setConfigValue(
+                    "timeout_per_email",
+                    e.target.value.toUpperCase()
+                  )
+                }
+                error={smtp.timeoutPerEmailError}
+              />
+            ) : (
+              <InputSkeleton />
+            )}
+          </div>
+          <div className={styles.configExplain}>
+            Maximum time in seconds to send an email, including retry attempts.
+          </div>
+        </div>
+
+        <div className={styles.gridItem}>
+          <div className={styles.configName}>
+            <FieldHeader label="Timeout per attempt" />
+          </div>
+
+          <div className={styles.configInput}>
+            {loaded ? (
+              <TextInput
+                value={smtp.getConfigValue("timeout_per_attempt")}
+                onChange={(e) =>
+                  smtp.setConfigValue(
+                    "timeout_per_attempt",
+                    e.target.value.toUpperCase()
+                  )
+                }
+                error={smtp.timeoutPerAttemptError}
+              />
+            ) : (
+              <InputSkeleton />
+            )}
+          </div>
+          <div className={styles.configExplain}>
+            Maximum time in seconds for each SMTP request.
+          </div>
+        </div>
+      </div>
+
+      <StickyFormControls draft={smtp} />
+    </div>
+  );
+});
diff --git a/shared/studio/tabs/auth/state/index.tsx b/shared/studio/tabs/auth/state/index.tsx
index ea5896d4..fc7ba4c8 100644
--- a/shared/studio/tabs/auth/state/index.tsx
+++ b/shared/studio/tabs/auth/state/index.tsx
@@ -1,11 +1,11 @@
 import {action, computed, observable, runInAction} from "mobx";
 import {
+  arraySet,
   findParent,
   getParent,
   Model,
   model,
   modelAction,
-  objectActions,
   prop,
 } from "mobx-keystone";
 import {parsers} from "../../../components/dataEditor/parsers";
@@ -42,7 +42,13 @@ export type OAuthProviderData = {
     | "ext::auth::GoogleOAuthProvider"
     | "ext::auth::SlackOAuthProvider";
   client_id: string;
-  additional_scope: string;
+  additional_scope: string | null;
+};
+export type OpenIDProviderData = Omit<OAuthProviderData, "_typename"> & {
+  _typename: "ext::auth::OpenIDConnectProvider";
+  display_name: string;
+  issuer_url: string;
+  logo_url: string | null;
 };
 export type LocalEmailPasswordProviderData = {
   name: string;
@@ -62,6 +68,7 @@ export type LocalMagicLinkProviderData = {
 };
 export type AuthProviderData =
   | OAuthProviderData
+  | OpenIDProviderData
   | LocalEmailPasswordProviderData
   | LocalWebAuthnProviderData
   | LocalMagicLinkProviderData;
@@ -92,6 +99,23 @@ export interface SMTPConfigData {
   timeout_per_attempt: string;
 }
 
+export const webhookEvents = [
+  "IdentityCreated",
+  "IdentityAuthenticated",
+  "EmailFactorCreated",
+  "EmailVerified",
+  "PasswordResetRequested",
+  "MagicLinkRequested",
+] as const;
+
+export type WebhookEvent = (typeof webhookEvents)[number];
+
+export interface WebhookConfigData {
+  url: string;
+  events: [WebhookEvent, ...WebhookEvent[]];
+  signing_secret_key_exists: boolean;
+}
+
 export type ProviderKind = "OAuth" | "Local";
 
 export const _providersInfo: {
@@ -132,6 +156,11 @@ export const _providersInfo: {
     displayName: "Slack",
     icon: <SlackIcon />,
   },
+  "ext::auth::OpenIDConnectProvider": {
+    kind: "OAuth",
+    displayName: "OpenID Connect",
+    icon: <></>,
+  },
   // local
   "ext::auth::EmailPasswordProviderConfig": {
     kind: "Local",
@@ -154,10 +183,13 @@ export type ProviderTypename = keyof typeof _providersInfo;
 
 @model("AuthAdmin")
 export class AuthAdminState extends Model({
-  selectedTab: prop<"config" | "providers" | "smtp">("config").withSetter(),
+  selectedTab: prop<"config" | "providers" | "webhooks" | "smtp">(
+    "config"
+  ).withSetter(),
 
   draftCoreConfig: prop<DraftCoreConfig | null>(null),
   draftProviderConfig: prop<DraftProviderConfig | null>(null),
+  draftWebhookConfig: prop<DraftWebhookConfig | null>(null),
   draftUIConfig: prop<DraftUIConfig | null>(null),
   draftSMTPConfig: prop(() => new DraftSMTPConfig({})),
 }) {
@@ -177,6 +209,15 @@ export class AuthAdminState extends Model({
     );
   }
 
+  @computed
+  get hasWebhooksSchema() {
+    return (
+      dbCtx
+        .get(this)!
+        .schemaData?.objectsByName.has("ext::auth::WebhookConfig") === true
+    );
+  }
+
   @computed
   get providersInfo() {
     const objects = dbCtx.get(this)!.schemaData?.objectsByName;
@@ -220,6 +261,25 @@ export class AuthAdminState extends Model({
     await this.refreshConfig();
   }
 
+  @modelAction
+  addDraftWebhook() {
+    this.draftWebhookConfig = new DraftWebhookConfig({});
+  }
+  @modelAction
+  cancelDraftWebhook() {
+    this.draftWebhookConfig = null;
+  }
+
+  async removeWebhook(webhookUrl: string) {
+    const conn = connCtx.get(this)!;
+
+    await conn.execute(
+      `configure current database reset ext::auth::WebhookConfig
+        filter .url = ${JSON.stringify(webhookUrl)}`
+    );
+    await this.refreshConfig();
+  }
+
   @modelAction
   _createDraftCoreConfig() {
     if (!this.draftCoreConfig) {
@@ -238,7 +298,6 @@ export class AuthAdminState extends Model({
     }
   }
 
-  @modelAction
   async disableUI() {
     if (this.uiConfig) {
       const conn = connCtx.get(this)!;
@@ -246,11 +305,15 @@ export class AuthAdminState extends Model({
         "configure current database reset ext::auth::UIConfig"
       );
     }
-    objectActions.set(this, "draftUIConfig", null);
 
     this.refreshConfig();
   }
 
+  @modelAction
+  _removeDraftUIConfig() {
+    this.draftUIConfig = null;
+  }
+
   onAttachedToRootStore() {}
 
   @observable.ref
@@ -265,6 +328,14 @@ export class AuthAdminState extends Model({
   @observable.ref
   smtpConfig: SMTPConfigData | null = null;
 
+  @observable.ref
+  webhooks: WebhookConfigData[] | null = null;
+
+  @computed
+  get webhookUrls() {
+    return new Set(this.webhooks?.map((webhook) => webhook.url));
+  }
+
   async refreshConfig() {
     const conn = connCtx.get(this)!;
     const {newAppAuthSchema} = this;
@@ -280,6 +351,8 @@ export class AuthAdminState extends Model({
       !!this.providersInfo["ext::auth::WebAuthnProviderConfig"];
     const hasMagicLink =
       !!this.providersInfo["ext::auth::MagicLinkProviderConfig"];
+    const hasOpenIDConnect =
+      !!this.providersInfo["ext::auth::OpenIDConnectProvider"];
 
     const {result} = await conn.query(
       `with module ext::auth
@@ -294,6 +367,13 @@ export class AuthAdminState extends Model({
             name,
             [is OAuthProviderConfig].client_id,
             [is OAuthProviderConfig].additional_scope,
+            ${
+              hasOpenIDConnect
+                ? `[is OpenIDConnectProvider].display_name,
+              [is OpenIDConnectProvider].issuer_url,
+              [is OpenIDConnectProvider].logo_url,`
+                : ""
+            }
             require_verification := (
               [is EmailPasswordProviderConfig].require_verification${
                 hasWebAuthn
@@ -316,6 +396,18 @@ export class AuthAdminState extends Model({
             redirect_to,
             redirect_to_on_signup,
             ${newAppAuthSchema ? "" : appConfigQuery}
+          },
+          ${
+            this.hasWebhooksSchema
+              ? `webhooks := (
+            with webhook := .webhooks
+            select webhook {
+              url,
+              events,
+              signing_secret_key_exists := webhook_signing_key_exists(webhook),
+            }
+          )`
+              : ""
           }
         }),
         smtp := assert_single(cfg::Config.extensions[is SMTPConfig] {
@@ -347,15 +439,25 @@ export class AuthAdminState extends Model({
         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.map((p: any) =>
-        p._typename === "ext::auth::MagicLinkProviderConfig"
-          ? {...p, token_time_to_live: p.token_time_to_live_seconds}
-          : p
-      );
+      this.providers = (
+        auth.providers.map((p: any) =>
+          p._typename === "ext::auth::MagicLinkProviderConfig"
+            ? {...p, token_time_to_live: p.token_time_to_live_seconds}
+            : p
+        ) as AuthProviderData[]
+      ).sort((a, b) => {
+        const aKind = _providersInfo[a._typename].kind;
+        const bKind = _providersInfo[b._typename].kind;
+        return aKind == bKind
+          ? a.name.localeCompare(b.name)
+          : bKind.localeCompare(aKind);
+      });
       this.uiConfig = auth.ui ?? false;
       this._createDraftCoreConfig();
       if (auth.ui) {
         this.enableUI();
+      } else {
+        this._removeDraftUIConfig();
       }
       this.smtpConfig = {
         ...smtp,
@@ -363,6 +465,7 @@ export class AuthAdminState extends Model({
         timeout_per_email: smtp.timeout_per_email_seconds,
         timeout_per_attempt: smtp.timeout_per_attempt_seconds,
       };
+      this.webhooks = auth.webhooks ?? [];
     });
   }
 }
@@ -460,7 +563,7 @@ export class DraftCoreConfig
     });
 
     if (invalidUrls.length > 0) {
-      return `List contained the following invalid URLs:\n${invalidUrls.join(
+      return `List containes the following invalid URLs:\n${invalidUrls.join(
         ",\n"
       )}`;
     }
@@ -713,6 +816,7 @@ export class DraftUIConfig extends Model({
       await state.refreshConfig();
       this.clearForm();
     } catch (e) {
+      console.error(e);
       runInAction(
         () => (this.error = e instanceof Error ? e.message : String(e))
       );
@@ -894,28 +998,107 @@ export class DraftSMTPConfig
 export class DraftProviderConfig extends Model({
   selectedProviderType: prop<ProviderTypename>().withSetter(),
 
-  oauthClientId: prop("").withSetter(),
-  oauthSecret: prop("").withSetter(),
+  oauthClientId: prop<string | null>(null).withSetter(),
+  oauthSecret: prop<string | null>(null).withSetter(),
   additionalScope: prop("").withSetter(),
 
-  webauthnRelyingOrigin: prop("").withSetter(),
+  providerName: prop<string | null>(null).withSetter(),
+  displayName: prop<string | null>(null).withSetter(),
+  issuerUrl: prop<string | null>(null).withSetter(),
+  logoUrl: prop<string>("").withSetter(),
+
+  webauthnRelyingOrigin: prop<string | null>(null).withSetter(),
 
   requireEmailVerification: prop(true).withSetter(),
 
   tokenTimeToLive: prop("").withSetter(),
 }) {
   @computed
-  get oauthClientIdError() {
-    return this.oauthClientId.trim() === "" ? "Client ID is required" : null;
+  get oauthClientIdError(): string | null {
+    if (this.oauthClientId == null) return null;
+    if (this.oauthClientId.trim() === "") {
+      return "Client ID is required";
+    }
+    return this.selectedProviderType === "ext::auth::OpenIDConnectProvider"
+      ? this._getIssuerClientIdError()
+      : null;
   }
 
   @computed
-  get oauthSecretError() {
+  get oauthSecretError(): string | null {
+    if (this.oauthSecret === null) return null;
     return this.oauthSecret.trim() === "" ? "Secret is required" : null;
   }
 
   @computed
-  get webauthnRelyingOriginError() {
+  get providerNameError(): string | null {
+    if (this.providerName === null) return null;
+    if (this.providerName.trim() === "") {
+      return "Provider name is required";
+    }
+    if (this.providerName.startsWith("builtin::")) {
+      return "Provider name cannot start with 'builtin::'";
+    }
+    const providerNames = getParent<AuthAdminState>(this)?.providers?.map(
+      (p) => p.name
+    );
+    if (providerNames?.includes(this.providerName.trim())) {
+      return "A provider with this name already exists";
+    }
+    return null;
+  }
+
+  @computed
+  get displayNameError(): string | null {
+    if (this.displayName === null) return null;
+    return this.displayName.trim() === ""
+      ? "Provider display name is required"
+      : null;
+  }
+
+  _getIssuerClientIdError(): string | null {
+    const issuerUrl = this.issuerUrl?.trim();
+    const clientId = this.oauthClientId?.trim();
+    return getParent<AuthAdminState>(this)?.providers?.some(
+      (p) =>
+        p._typename === "ext::auth::OpenIDConnectProvider" &&
+        p.issuer_url === issuerUrl &&
+        p.client_id === clientId
+    )
+      ? "A provider with this Issuer URL and Client ID pair already exists"
+      : null;
+  }
+
+  @computed
+  get issuerUrlError(): string | null {
+    if (this.issuerUrl === null) return null;
+    if (this.issuerUrl.trim() === "") {
+      return "Issuer URL is required";
+    }
+    try {
+      new URL(this.issuerUrl.trim());
+    } catch {
+      return "Invalid URL";
+    }
+    return this._getIssuerClientIdError();
+  }
+
+  @computed
+  get logoUrlError(): string | null {
+    if (this.logoUrl.trim() === "") {
+      return null;
+    }
+    try {
+      new URL(this.logoUrl.trim());
+    } catch {
+      return "Invalid URL";
+    }
+    return null;
+  }
+
+  @computed
+  get webauthnRelyingOriginError(): string | null {
+    if (this.webauthnRelyingOrigin == null) return null;
     const origin = this.webauthnRelyingOrigin.trim();
     if (origin === "") {
       return "Relying origin is required";
@@ -942,7 +1125,7 @@ export class DraftProviderConfig extends Model({
   }
 
   @computed
-  get tokenTimeToLiveError() {
+  get tokenTimeToLiveError(): string | null {
     return validateDuration(this.tokenTimeToLive, false);
   }
 
@@ -950,11 +1133,26 @@ export class DraftProviderConfig extends Model({
   get formValid(): boolean {
     switch (_providersInfo[this.selectedProviderType].kind) {
       case "OAuth":
-        return !this.oauthClientIdError && !this.oauthSecretError;
+        return (
+          this.oauthClientId != null &&
+          !this.oauthClientIdError &&
+          this.oauthSecret != null &&
+          !this.oauthSecretError &&
+          (this.selectedProviderType === "ext::auth::OpenIDConnectProvider"
+            ? this.providerName != null &&
+              !this.providerNameError &&
+              this.displayName != null &&
+              !this.displayNameError &&
+              this.issuerUrl != null &&
+              !this.issuerUrlError &&
+              !this.logoUrlError
+            : true)
+        );
       case "Local":
         return this.selectedProviderType ===
           "ext::auth::WebAuthnProviderConfig"
-          ? !this.webauthnRelyingOriginError
+          ? this.webauthnRelyingOrigin != null &&
+              !this.webauthnRelyingOriginError
           : this.selectedProviderType === "ext::auth::MagicLinkProviderConfig"
           ? !this.tokenTimeToLiveError
           : true;
@@ -982,8 +1180,20 @@ export class DraftProviderConfig extends Model({
 
       const queryFields: string[] = [];
       if (provider.kind === "OAuth") {
+        if (this.selectedProviderType === "ext::auth::OpenIDConnectProvider") {
+          queryFields.push(
+            `name := ${JSON.stringify(this.providerName!.trim())}`,
+            `display_name := ${JSON.stringify(this.displayName!.trim())}`,
+            `issuer_url := ${JSON.stringify(this.issuerUrl!.trim())}`
+          );
+          if (this.logoUrl.trim()) {
+            queryFields.push(
+              `logo_url := ${JSON.stringify(this.logoUrl!.trim())}`
+            );
+          }
+        }
         queryFields.push(
-          `client_id := ${JSON.stringify(this.oauthClientId)}`,
+          `client_id := ${JSON.stringify(this.oauthClientId!.trim())}`,
           `secret := ${JSON.stringify(this.oauthSecret)}`
         );
         if (this.additionalScope.trim()) {
@@ -1044,3 +1254,81 @@ export class DraftProviderConfig extends Model({
     }
   }
 }
+
+@model("AuthAdmin/DraftWebhookConfig")
+export class DraftWebhookConfig extends Model({
+  url: prop<string | null>(null).withSetter(),
+  events: prop(() => arraySet<WebhookEvent>()),
+  signing_key: prop<string | null>(null).withSetter(),
+}) {
+  @computed
+  get urlError() {
+    if (this.url == null) return null;
+    if (this.url.trim() === "") return "Webhook URL is required";
+    try {
+      new URL(this.url);
+    } catch {
+      return "URL is invalid";
+    }
+    return getParent<AuthAdminState>(this)?.webhookUrls.has(this.url)
+      ? "A webhook already exists with this URL"
+      : null;
+  }
+
+  @computed
+  get eventsError() {
+    return this.events.size < 1
+      ? "At least one webhook event is required"
+      : null;
+  }
+
+  @computed
+  get formValid(): boolean {
+    return (
+      this.url != null && this.urlError == null && this.eventsError == null
+    );
+  }
+
+  @observable
+  updating = false;
+
+  @observable
+  error: string | null = null;
+
+  @action
+  async addWebhook() {
+    if (!this.formValid) return;
+
+    const conn = connCtx.get(this)!;
+    const state = getParent<AuthAdminState>(this)!;
+
+    this.updating = true;
+    this.error = null;
+
+    try {
+      await conn.execute(
+        `configure current database
+          insert ext::auth::WebhookConfig {
+            url := ${JSON.stringify(this.url)},
+            events := {${[...this.events.values()]
+              .map((val) => `"${val}"`)
+              .join(", ")}},
+            ${
+              this.signing_key
+                ? `signing_secret_key := ${JSON.stringify(this.signing_key)}`
+                : ""
+            }
+          }`
+      );
+      await state.refreshConfig();
+      state.cancelDraftWebhook();
+    } catch (e) {
+      console.log(e);
+      runInAction(
+        () => (this.error = e instanceof Error ? e.message : String(e))
+      );
+    } finally {
+      runInAction(() => (this.updating = false));
+    }
+  }
+}
diff --git a/shared/studio/tabs/auth/webhooks.tsx b/shared/studio/tabs/auth/webhooks.tsx
new file mode 100644
index 00000000..388cc676
--- /dev/null
+++ b/shared/studio/tabs/auth/webhooks.tsx
@@ -0,0 +1,196 @@
+import {observer} from "mobx-react-lite";
+
+import cn from "@edgedb/common/utils/classNames";
+import {
+  Button,
+  Checkbox,
+  ChevronDownIcon,
+  ConfirmButton,
+  FieldHeader,
+  InfoTooltip,
+  TextInput,
+} from "@edgedb/common/newui";
+
+import {useTabState} from "../../state";
+import {
+  AuthAdminState,
+  DraftWebhookConfig,
+  WebhookConfigData,
+  webhookEvents,
+} from "./state";
+
+import styles from "./authAdmin.module.scss";
+import {useState} from "react";
+import {LoadingSkeleton} from "@edgedb/common/newui/loadingSkeleton";
+
+export const WebhooksTab = observer(function WebhooksTab() {
+  const state = useTabState(AuthAdminState);
+
+  return (
+    <div className={styles.tabContentWrapper}>
+      <h2>Webhooks</h2>
+      {state.webhooks ? (
+        <>
+          {state.webhooks.length ? (
+            <div className={styles.cardList}>
+              {state.webhooks.map((webhook) => (
+                <WebhookConfigCard key={webhook.url} config={webhook} />
+              ))}
+            </div>
+          ) : null}
+
+          <div className={styles.addDraft}>
+            {state.draftWebhookConfig ? (
+              <WebhookDraftForm draft={state.draftWebhookConfig} />
+            ) : (
+              <Button onClick={() => state.addDraftWebhook()}>
+                Add Webhook
+              </Button>
+            )}
+          </div>
+        </>
+      ) : (
+        <div className={styles.cardList}>
+          <LoadingSkeleton className={styles.webhookSkeleton} />
+          <LoadingSkeleton className={styles.webhookSkeleton} />
+          <LoadingSkeleton className={styles.webhookSkeleton} />
+        </div>
+      )}
+    </div>
+  );
+});
+
+function WebhookConfigCard({config}: {config: WebhookConfigData}) {
+  const state = useTabState(AuthAdminState);
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div
+      className={cn(styles.card, styles.webhookConfigCard, {
+        [styles.expanded]: expanded,
+      })}
+    >
+      <div className={styles.cardMain}>
+        <div className={styles.details}>
+          <div className={styles.url}>{config.url}</div>
+          <div className={styles.events}>
+            {config.events.map((event) => (
+              <span key={event}>{event}</span>
+            ))}
+          </div>
+        </div>
+        <div
+          className={cn(styles.expandButton, {[styles.expanded]: expanded})}
+          onClick={() => setExpanded(!expanded)}
+        >
+          <ChevronDownIcon />
+        </div>
+      </div>
+      {expanded ? (
+        <div className={styles.expandedConfig}>
+          <div className={cn(styles.formRow, styles.fullWidth)}>
+            <TextInput readOnly label={"Webhook URL"} value={config.url} />
+            <TextInput
+              readOnly
+              label={"Signing secret key"}
+              value={config.signing_secret_key_exists ? "secret hidden" : ""}
+              type="password"
+            />
+          </div>
+          <div className={styles.webhookEvents}>
+            <FieldHeader label="Events" />
+            <div
+              className={styles.grid}
+              style={{"--itemCount": webhookEvents.length} as any}
+            >
+              {webhookEvents.map((event) => (
+                <Checkbox
+                  readOnly
+                  key={event}
+                  label={event}
+                  checked={config.events.includes(event)}
+                />
+              ))}
+            </div>
+          </div>
+
+          <div className={cn(styles.formRow, styles.buttons)}>
+            <ConfirmButton onClick={() => state.removeWebhook(config.url)}>
+              Remove
+            </ConfirmButton>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+const WebhookDraftForm = observer(function WebhookDraftForm({
+  draft,
+}: {
+  draft: DraftWebhookConfig;
+}) {
+  const state = useTabState(AuthAdminState);
+
+  return (
+    <div className={cn(styles.draftForm, styles.draftWebhookForm)}>
+      <div className={cn(styles.formRow, styles.evenWidth)}>
+        <TextInput
+          label="Webhook URL"
+          value={draft.url ?? ""}
+          onChange={(e) => draft.setUrl(e.target.value)}
+          error={draft.urlError}
+        />{" "}
+        <TextInput
+          label={
+            <>
+              Signing secret key{" "}
+              <InfoTooltip message="The secret key used to sign webhook requests" />
+            </>
+          }
+          optional
+          value={draft.signing_key ?? ""}
+          onChange={(e) => draft.setSigning_key(e.target.value)}
+        />
+      </div>
+
+      <div className={styles.webhookEvents}>
+        <FieldHeader
+          label="Events"
+          headerNote="At least one event must be selected"
+        />
+        <div
+          className={styles.grid}
+          style={{"--itemCount": webhookEvents.length} as any}
+        >
+          {webhookEvents.map((event) => (
+            <Checkbox
+              key={event}
+              label={event}
+              checked={draft.events.has(event)}
+              onChange={(checked) => {
+                if (checked) {
+                  draft.events.add(event);
+                } else {
+                  draft.events.delete(event);
+                }
+              }}
+            />
+          ))}
+        </div>
+      </div>
+
+      <div className={cn(styles.formRow, styles.buttons)}>
+        <Button onClick={() => state.cancelDraftWebhook()}>Cancel</Button>
+        <Button
+          kind="primary"
+          onClick={() => draft.addWebhook()}
+          disabled={!draft.formValid}
+          loading={draft.updating}
+        >
+          {draft.updating ? "Adding Webhook..." : "Add Webhook"}
+        </Button>
+      </div>
+    </div>
+  );
+});
diff --git a/web/src/app.module.scss b/web/src/app.module.scss
index 3b917ba0..1f1570e8 100644
--- a/web/src/app.module.scss
+++ b/web/src/app.module.scss
@@ -12,7 +12,7 @@
   user-select: none;
   font-size: 14px;
   line-height: 16px;
-  background-color: var(--app-bg);
+  background-color: var(--page_background);
   color: var(--app-text-colour);
 }
 
diff --git a/web/src/app.tsx b/web/src/app.tsx
index d6c7488d..211c2843 100644
--- a/web/src/app.tsx
+++ b/web/src/app.tsx
@@ -3,6 +3,7 @@ import {BrowserRouter, Route, Routes} from "react-router-dom";
 
 import "./fonts/include.scss";
 import styles from "./app.module.scss";
+import themeStyles from "@edgedb/common/newui/theme.module.scss";
 
 import "@fontsource-variable/roboto-flex/index.css";
 import "@fontsource-variable/roboto-mono/index.css";
@@ -39,7 +40,7 @@ function App() {
 const AppMain = observer(function _AppMain() {
   return (
     <BrowserRouter basename="ui">
-      <div className={styles.theme}>
+      <div className={`${styles.theme} ${themeStyles.theme}`}>
         <ModalProvider>
           <div className={styles.app}>
             <Routes>

From c4cb2ec570aeb903c25f3015c7cab3c361e89bf0 Mon Sep 17 00:00:00 2001
From: James Clarke <james@edgedb.com>
Date: Thu, 31 Oct 2024 16:30:56 +0000
Subject: [PATCH 2/2] Small fixes

---
 shared/studio/tabs/auth/authAdmin.module.scss | 1 +
 shared/studio/tabs/auth/index.tsx             | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/shared/studio/tabs/auth/authAdmin.module.scss b/shared/studio/tabs/auth/authAdmin.module.scss
index d5ade90e..f6d0525a 100644
--- a/shared/studio/tabs/auth/authAdmin.module.scss
+++ b/shared/studio/tabs/auth/authAdmin.module.scss
@@ -11,6 +11,7 @@
 
   @include isMobile {
     flex-direction: column;
+    border-radius: 0;
   }
 
   @include darkTheme {
diff --git a/shared/studio/tabs/auth/index.tsx b/shared/studio/tabs/auth/index.tsx
index 9a6b991b..d34ae68d 100644
--- a/shared/studio/tabs/auth/index.tsx
+++ b/shared/studio/tabs/auth/index.tsx
@@ -48,7 +48,9 @@ export const AuthAdmin = observer(function AuthAdmin() {
               className={styles.tabs}
               tabs={[
                 {id: "config", label: "Config"},
-                {id: "webhooks", label: "Webhooks"},
+                ...(state.hasWebhooksSchema
+                  ? [{id: "webhooks", label: "Webhooks"} as const]
+                  : []),
                 {id: "providers", label: "Providers / UI"},
                 {id: "smtp", label: "SMTP"},
               ]}