added auth strategies form + add ability to disable strategies

2026-03-16 12:37:20 +00:00 · 2025-02-26 14:53:32 +01:00
parent d4a6a9326f
commit 2a9c1be151
18 changed files with 391 additions and 114 deletions
--- a/app/src/ui/client/schema/auth/use-bknd-auth.ts
+++ b/app/src/ui/client/schema/auth/use-bknd-auth.ts
@@ -8,7 +8,11 @@ export function useBkndAuth() {
      config: {
         set: async (data: Partial<AppAuthSchema>) => {
            console.log("--set", data);
-            return await bkndActions.set("auth", data, true);
+            if (await bkndActions.set("auth", data, true)) {
+               await bkndActions.reload();
+               return true;
+            }
+            return false;
         }
      },
      roles: {
--- a/app/src/ui/components/display/Icon.tsx
+++ b/app/src/ui/components/display/Icon.tsx
@@ -0,0 +1,18 @@
+import { TbAlertCircle } from "react-icons/tb";
+import { twMerge } from "tailwind-merge";
+
+export type IconProps = {
+   className?: string;
+   title?: string;
+};
+
+const Warning = ({ className, ...props }: IconProps) => (
+   <TbAlertCircle
+      {...props}
+      className={twMerge("dark:text-amber-300 text-amber-700 cursor-help", className)}
+   />
+);
+
+export const Icon = {
+   Warning
+};
--- a/app/src/ui/components/form/Formy/components.tsx
+++ b/app/src/ui/components/form/Formy/components.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { getBrowser } from "core/utils";
 import type { Field } from "data";
 import { Switch as RadixSwitch } from "radix-ui";
@@ -177,6 +178,21 @@ export const BooleanInput = forwardRef<HTMLInputElement, React.ComponentProps<"i
 );

 export type SwitchValue = boolean | 1 | 0 | "true" | "false" | "on" | "off";
+const SwitchSizes = {
+   xs: {
+      root: "h-5 w-8",
+      thumb: "data-[state=checked]:left-[calc(100%-1rem)]"
+   },
+   sm: {
+      root: "h-6 w-10",
+      thumb: "data-[state=checked]:left-[calc(100%-1.25rem)]"
+   },
+   md: {
+      root: "h-7 w-12",
+      thumb: "data-[state=checked]:left-[calc(100%-1.5rem)]"
+   }
+};
+
 export const Switch = forwardRef<
   HTMLButtonElement,
   Pick<
@@ -184,14 +200,19 @@ export const Switch = forwardRef<
      "name" | "required" | "disabled" | "checked" | "defaultChecked" | "id" | "type"
   > & {
      value?: SwitchValue;
+      size?: keyof typeof SwitchSizes;
      onChange?: (e: { target: { value: boolean } }) => void;
      onCheckedChange?: (checked: boolean) => void;
   }
 >(({ type, required, ...props }, ref) => {
   return (
      <RadixSwitch.Root
-         className="relative h-7 w-12 cursor-pointer rounded-full bg-muted border-2 border-transparent outline-none data-[state=checked]:bg-primary/75 appearance-none transition-colors hover:bg-muted/80"
+         className={clsx(
+            "relative cursor-pointer rounded-full bg-muted border-2 border-transparent outline-none ring-1 dark:ring-primary/10 ring-primary/20 data-[state=checked]:ring-primary/60 data-[state=checked]:bg-primary/60 appearance-none transition-colors hover:bg-muted/80",
+            SwitchSizes[props.size ?? "md"].root
+         )}
         onCheckedChange={(bool) => {
+            console.log("setting", bool);
            props.onChange?.({ target: { value: bool } });
         }}
         {...(props as any)}
@@ -204,7 +225,12 @@ export const Switch = forwardRef<
         }
         ref={ref}
      >
-         <RadixSwitch.Thumb className="absolute top-0 left-0 h-full aspect-square rounded-full bg-background transition-[left,right] duration-100 border border-muted data-[state=checked]:left-[calc(100%-1.5rem)]" />
+         <RadixSwitch.Thumb
+            className={clsx(
+               "absolute top-0 left-0 h-full aspect-square rounded-full bg-primary/30 data-[state=checked]:bg-background transition-[left,right] duration-100 border border-muted",
+               SwitchSizes[props.size ?? "md"].thumb
+            )}
+         />
      </RadixSwitch.Root>
   );
 });
--- a/app/src/ui/components/form/json-schema-form/Field.tsx
+++ b/app/src/ui/components/form/json-schema-form/Field.tsx
@@ -30,8 +30,9 @@ const fieldErrorBoundary =
      </Pre>
   );

-const FieldImpl = ({ name, onChange, placeholder, ...props }: FieldProps) => {
-   const { path, setValue, required, schema, ...ctx } = useDerivedFieldContext(name);
+const FieldImpl = ({ name, onChange, placeholder, required: _required, ...props }: FieldProps) => {
+   const { path, setValue, schema, ...ctx } = useDerivedFieldContext(name);
+   const required = typeof _required === "boolean" ? _required : ctx.required;
   //console.log("Field", { name, path, schema });
   if (!isTypeSchema(schema))
      return (
--- a/app/src/ui/components/form/json-schema-form/FieldWrapper.tsx
+++ b/app/src/ui/components/form/json-schema-form/FieldWrapper.tsx
@@ -14,7 +14,7 @@ import { getLabel } from "./utils";

 export type FieldwrapperProps = {
   name: string;
-   label?: string | false;
+   label?: string | ReactNode | false;
   required?: boolean;
   schema?: JsonSchema;
   debug?: object | boolean;
--- a/app/src/ui/components/form/json-schema-form/Form.tsx
+++ b/app/src/ui/components/form/json-schema-form/Form.tsx
@@ -35,7 +35,7 @@ import {
   prefixPointer
 } from "./utils";

-type JSONSchema = Exclude<$JSONSchema, boolean>;
+export type JSONSchema = Exclude<$JSONSchema, boolean>;
 type FormState<Data = any> = {
   dirty: boolean;
   submitting: boolean;
@@ -238,6 +238,7 @@ export function FormContextOverride({
      ...overrides,
      ...additional
   };
+   console.log("context", context);

   return <FormContext.Provider value={context}>{children}</FormContext.Provider>;
 }
@@ -287,10 +288,11 @@ export function useFormError(name: string, opt?: { strict?: boolean; debug?: boo
 }

 export function useFormStateSelector<Data = any, Reduced = Data>(
-   selector: (state: FormState<Data>) => Reduced
+   selector: (state: FormState<Data>) => Reduced,
+   deps: any[] = []
 ): Reduced {
   const { _formStateAtom } = useFormContext();
-   const selected = selectAtom(_formStateAtom, useCallback(selector, []), isEqual);
+   const selected = selectAtom(_formStateAtom, useCallback(selector, deps), isEqual);
   return useAtom(selected)[0];
 }

@@ -306,14 +308,16 @@ export function useDerivedFieldContext<Data = any, Reduced = undefined>(
         path: string;
      },
      Reduced
-   >
+   >,
+   _schema?: JSONSchema
 ): FormContext<Data> & {
   value: Reduced;
   pointer: string;
   required: boolean;
   path: string;
 } {
-   const { _formStateAtom, root, lib, schema, ...ctx } = useFormContext();
+   const { _formStateAtom, root, lib, ...ctx } = useFormContext();
+   const schema = _schema ?? ctx.schema;
   const selected = selectAtom(
      _formStateAtom,
      useCallback(
--- a/app/src/ui/components/form/json-schema-form/ObjectField.tsx
+++ b/app/src/ui/components/form/json-schema-form/ObjectField.tsx
@@ -1,9 +1,8 @@
-import type { JSONSchema } from "json-schema-to-ts";
 import { isTypeSchema } from "ui/components/form/json-schema-form/utils";
 import { AnyOfField } from "./AnyOfField";
 import { Field } from "./Field";
 import { FieldWrapper, type FieldwrapperProps } from "./FieldWrapper";
-import { useDerivedFieldContext } from "./Form";
+import { type JSONSchema, useDerivedFieldContext } from "./Form";

 export type ObjectFieldProps = {
   path?: string;
@@ -12,7 +11,7 @@ export type ObjectFieldProps = {
 };

 export const ObjectField = ({ path = "", label: _label, wrapperProps = {} }: ObjectFieldProps) => {
-   const { schema } = useDerivedFieldContext(path);
+   const { schema, ...ctx } = useDerivedFieldContext(path);
   if (!isTypeSchema(schema)) return `ObjectField "${path}": no schema`;
   const properties = Object.entries(schema.properties ?? {}) as [string, JSONSchema][];

--- a/app/src/ui/lib/mantine/theme.ts
+++ b/app/src/ui/lib/mantine/theme.ts
@@ -8,6 +8,7 @@ import {
   SegmentedControl,
   Select,
   Switch,
+   Tabs,
   TagsInput,
   TextInput,
   Textarea,
@@ -104,6 +105,11 @@ export function createMantineTheme(scheme: "light" | "dark"): {
                  overlay: "!backdrop-blur-sm"
               })
            }),
+            Tabs: Tabs.extend({
+               classNames: (theme, props) => ({
+                  tab: "data-[active=true]:border-primary"
+               })
+            }),
            Menu: Menu.extend({
               defaultProps: {
                  offset: 2
--- a/app/src/ui/routes/auth/_auth.root.tsx
+++ b/app/src/ui/routes/auth/_auth.root.tsx
@@ -44,7 +44,7 @@ export function AuthRoot({ children }) {
                     >
                        Roles & Permissions
                     </AppShell.SidebarLink>
-                     <AppShell.SidebarLink as={Link} href={routes.auth.strategies()} disabled>
+                     <AppShell.SidebarLink as={Link} href={routes.auth.strategies()}>
                        Strategies
                     </AppShell.SidebarLink>
                     <AppShell.SidebarLink as={Link} href={routes.auth.settings()}>
--- a/app/src/ui/routes/auth/auth.settings.tsx
+++ b/app/src/ui/routes/auth/auth.settings.tsx
@@ -1,10 +1,18 @@
 import clsx from "clsx";
-import { TbChevronDown, TbChevronUp } from "react-icons/tb";
+import { isDebug } from "core";
+import { TbAlertCircle, TbChevronDown, TbChevronUp } from "react-icons/tb";
 import { useBknd } from "ui/client/BkndProvider";
 import { useBkndAuth } from "ui/client/schema/auth/use-bknd-auth";
 import { Button } from "ui/components/buttons/Button";
+import { Icon } from "ui/components/display/Icon";
 import { Message } from "ui/components/display/Message";
-import { Field, type FieldProps, Form, Subscribe } from "ui/components/form/json-schema-form";
+import {
+   Field,
+   type FieldProps,
+   Form,
+   FormDebug,
+   Subscribe
+} from "ui/components/form/json-schema-form";
 import { useBrowserTitle } from "ui/hooks/use-browser-title";
 import * as AppShell from "ui/layouts/AppShell/AppShell";
 import { Breadcrumbs2 } from "ui/layouts/AppShell/Breadcrumbs2";
@@ -40,12 +48,13 @@ export function AuthSettings(props) {

 const formConfig = {
   ignoreKeys: ["roles", "strategies"],
-   options: { keepEmpty: true }
+   options: { keepEmpty: true, debug: isDebug() }
 };

 function AuthSettingsInternal() {
   const { config, schema: _schema, actions } = useBkndAuth();
   const schema = JSON.parse(JSON.stringify(_schema));
+   const hasRoles = Object.keys(config.roles ?? {}).length > 0;

   schema.properties.jwt.required = ["alg"];

@@ -64,7 +73,7 @@ function AuthSettingsInternal() {
         >
            {({ dirty, errors, submitting }) => (
               <AppShell.SectionHeader
-                  className="pl-3"
+                  className="pl-4"
                  right={
                     <Button
                        variant="primary"
@@ -75,28 +84,32 @@ function AuthSettingsInternal() {
                     </Button>
                  }
               >
-                  <div className="flex flex-row gap-4 items-center">
-                     <Breadcrumbs2
-                        path={[{ label: "Auth", href: "/" }, { label: "Settings" }]}
-                        backTo="/"
-                     />
-                  </div>
+                  Settings
               </AppShell.SectionHeader>
            )}
         </Subscribe>
         <AppShell.Scrollable>
-            <Section className="pt-4">
-               <AuthField
-                  name="enabled"
-                  label="Authentication Enabled"
-                  description="Only after enabling authentication, all settings below will take effect."
-                  descriptionPlacement="top"
-               />
-               <div className="flex flex-col gap-6 relative">
+            <Section className="pt-4 pl-0 pb-0">
+               <div className="pl-4">
+                  <AuthField
+                     name="enabled"
+                     label="Authentication Enabled"
+                     description="Only after enabling authentication, all settings below will take effect."
+                     descriptionPlacement="top"
+                  />
+               </div>
+               <div className="flex flex-col gap-6 relative pl-4 pb-2">
                  <Overlay />
                  <AuthField
                     name="guard.enabled"
-                     label="Guard Enabled"
+                     label={
+                        <div className="flex flex-row gap-2 items-center">
+                           <span>Guard Enabled</span>
+                           {!hasRoles && (
+                              <Icon.Warning title="No roles defined. Enabling the guard will block all requests." />
+                           )}
+                        </div>
+                     }
                     description="When enabled, enforces permissions on all routes. Make sure to create roles first."
                     descriptionPlacement="top"
                  />
@@ -139,7 +152,7 @@ function AuthSettingsInternal() {
                  <ToggleAdvanced which="cookie" />
               </Section>
            </div>
-            {/* <FormDebug /> */}
+            <FormDebug />
         </AppShell.Scrollable>
      </Form>
   );
--- a/app/src/ui/routes/auth/auth.strategies.tsx
+++ b/app/src/ui/routes/auth/auth.strategies.tsx
@@ -1,55 +1,247 @@
-import { cloneDeep, omit } from "lodash-es";
+import { isDebug } from "core";
+import { autoFormatString } from "core/utils";
+import { type ChangeEvent, useState } from "react";
+import {
+   TbAt,
+   TbBrandAppleFilled,
+   TbBrandDiscordFilled,
+   TbBrandFacebookFilled,
+   TbBrandGithubFilled,
+   TbBrandGoogleFilled,
+   TbBrandInstagram,
+   TbBrandOauth,
+   TbBrandX,
+   TbSettings
+} from "react-icons/tb";
+import { twMerge } from "tailwind-merge";
 import { useBknd } from "ui/client/bknd";
+import { useBkndAuth } from "ui/client/schema/auth/use-bknd-auth";
 import { Button } from "ui/components/buttons/Button";
+import { IconButton } from "ui/components/buttons/IconButton";
+import { Message } from "ui/components/display/Message";
+import {
+   Field,
+   Form,
+   FormContextOverride,
+   FormDebug,
+   ObjectField,
+   Subscribe,
+   useDerivedFieldContext,
+   useFormError,
+   useFormValue
+} from "ui/components/form/json-schema-form";
+import { useBrowserTitle } from "ui/hooks/use-browser-title";
 import * as AppShell from "../../layouts/AppShell/AppShell";

-export function AuthStrategiesList() {
-   useBknd({ withSecrets: true });
-   return <AuthStrategiesListInternal />;
+export function AuthStrategiesList(props) {
+   useBrowserTitle(["Auth", "Strategies"]);
+
+   const { hasSecrets } = useBknd({ withSecrets: true });
+   if (!hasSecrets) {
+      return <Message.MissingPermission what="Auth Strategies" />;
+   }
+
+   return <AuthStrategiesListInternal {...props} />;
 }

-const uiSchema = {
-   jwt: {
-      fields: {
-         "ui:options": {
-            orderable: false
-         }
-      }
-   }
+const formOptions = {
+   keepEmpty: true,
+   debug: isDebug()
 };

 function AuthStrategiesListInternal() {
-   const s = useBknd();
-   const config = s.config.auth.strategies;
-   const schema = cloneDeep(omit(s.schema.auth.properties.strategies, ["title"]));
+   const $auth = useBkndAuth();
+   const config = $auth.config.strategies;
+   const schema = $auth.schema.properties.strategies;
+   const schemas = Object.fromEntries(
+      // @ts-ignore
+      $auth.schema.properties.strategies.additionalProperties.anyOf.map((s) => [
+         s.properties.type.const,
+         s
+      ])
+   );

-   console.log("strategies", { config, schema });
+   async function handleSubmit(data: any) {
+      console.log("submit", { strategies: data });
+      await $auth.actions.config.set({ strategies: data });
+   }

   return (
-      <>
-         <AppShell.SectionHeader right={<Button variant="primary">Update</Button>}>
-            Strategies
-         </AppShell.SectionHeader>
+      <Form schema={schema} initialValues={config} onSubmit={handleSubmit} options={formOptions}>
+         <Subscribe
+            selector={(state) => ({
+               dirty: state.dirty,
+               errors: state.errors.length > 0,
+               submitting: state.submitting
+            })}
+         >
+            {({ dirty, errors, submitting }) => (
+               <AppShell.SectionHeader
+                  className="pl-4"
+                  right={
+                     <Button
+                        variant="primary"
+                        type="submit"
+                        disabled={!dirty || errors || submitting}
+                     >
+                        Update
+                     </Button>
+                  }
+               >
+                  Strategies
+               </AppShell.SectionHeader>
+            )}
+         </Subscribe>
         <AppShell.Scrollable>
-            strat
-            {/*<div className="flex flex-col flex-grow px-5 py-4 gap-8">
-               <div>
-                  <JsonSchemaForm
-                     schema={generalSchema}
-                     className="legacy hide-required-mark fieldset-alternative mute-root"
-                  />
+            <div className="flex flex-col p-4 gap-4">
+               <p className="opacity-70">
+                  Allow users to sign in or sign up using different strategies.
+               </p>
+               <div className="flex flex-col gap-2 max-w-4xl">
+                  <Strategy type="password" name="password" />
+                  <Strategy type="oauth" name="google" />
+                  <Strategy type="oauth" name="github" />
+                  <Strategy type="oauth" name="facebook" unavailable />
+                  <Strategy type="oauth" name="x" unavailable />
+                  <Strategy type="oauth" name="instagram" unavailable />
+                  <Strategy type="oauth" name="apple" unavailable />
+                  <Strategy type="oauth" name="discord" unavailable />
               </div>
-
-               <div className="flex flex-col gap-3">
-                  <h3 className="font-bold">JWT Settings</h3>
-                  <JsonSchemaForm
-                     schema={extracted.jwt.schema}
-                     uiSchema={uiSchema.jwt}
-                     className="legacy hide-required-mark fieldset-alternative mute-root"
-                  />
-               </div>
-            </div>*/}
+            </div>
+            <FormDebug />
         </AppShell.Scrollable>
-      </>
+      </Form>
   );
 }
+
+type StrategyProps = {
+   type: "password" | "oauth" | "custom_oauth";
+   name: string;
+   unavailable?: boolean;
+};
+
+const Strategy = ({ type, name, unavailable }: StrategyProps) => {
+   const errors = useFormError(name, { strict: true });
+   const $auth = useBkndAuth();
+   const schemas = Object.fromEntries(
+      // @ts-ignore
+      $auth.schema.properties.strategies.additionalProperties.anyOf.map((s) => [
+         s.properties.type.const,
+         s
+      ])
+   );
+   const schema = schemas[type];
+   const [open, setOpen] = useState(false);
+
+   if (!schema) return null;
+
+   return (
+      <FormContextOverride schema={schema} prefix={name}>
+         <div
+            className={twMerge(
+               "flex flex-col border border-muted rounded bg-background",
+               unavailable && "opacity-20 pointer-events-none cursor-not-allowed",
+               errors.length > 0 && "border-red-500"
+            )}
+         >
+            <div className="flex flex-row justify-between p-3 gap-3 items-center">
+               <div className="flex flex-row items-center p-2 bg-primary/5 rounded">
+                  <StrategyIcon type={type} provider={name} />
+               </div>
+               <div className="font-mono flex-grow flex flex-row gap-3">
+                  <span className="leading-none">{autoFormatString(name)}</span>
+               </div>
+               <div className="flex flex-row gap-4 items-center">
+                  <StrategyToggle />
+                  <IconButton
+                     Icon={TbSettings}
+                     size="lg"
+                     iconProps={{ strokeWidth: 1.5 }}
+                     variant={open ? "primary" : "ghost"}
+                     onClick={() => setOpen((o) => !o)}
+                  />
+               </div>
+            </div>
+            {open && (
+               <div
+                  className={twMerge(
+                     "flex flex-col border-t border-t-muted px-4 pt-3 pb-4 bg-lightest/50 gap-4"
+                  )}
+               >
+                  <StrategyForm type={type} />
+               </div>
+            )}
+         </div>
+      </FormContextOverride>
+   );
+};
+
+const StrategyToggle = () => {
+   const ctx = useDerivedFieldContext("");
+   const { value } = useFormValue("");
+
+   function handleToggleChange(e: ChangeEvent<HTMLInputElement>) {
+      const checked = e.target.value;
+      const value_keys = Object.keys(value ?? {});
+      const can_remove =
+         value_keys.length === 0 || (value_keys.length === 1 && value_keys[0] === "enabled");
+
+      if (!checked && can_remove) {
+         ctx.deleteValue(ctx.path);
+      } else {
+         ctx.setValue([ctx.path, "enabled"].join("."), checked);
+      }
+   }
+
+   return <Field name="enabled" label={false} required onChange={handleToggleChange} />;
+};
+
+const StrategyIcon = ({ type, provider }: { type: StrategyProps["type"]; provider?: string }) => {
+   if (type === "password") {
+      return <TbAt className="size-5" />;
+   }
+
+   if (provider && provider in OAUTH_BRANDS) {
+      const BrandIcon = OAUTH_BRANDS[provider];
+      return <BrandIcon className="size-5" />;
+   }
+
+   return <TbBrandOauth className="size-5" />;
+};
+
+const OAUTH_BRANDS = {
+   google: TbBrandGoogleFilled,
+   github: TbBrandGithubFilled,
+   facebook: TbBrandFacebookFilled,
+   x: TbBrandX,
+   instagram: TbBrandInstagram,
+   apple: TbBrandAppleFilled,
+   discord: TbBrandDiscordFilled
+};
+
+const StrategyForm = ({ type }: Pick<StrategyProps, "type">) => {
+   let Component = () => <ObjectField path="" wrapperProps={{ wrapper: "group", label: false }} />;
+   switch (type) {
+      case "password":
+         Component = StrategyPasswordForm;
+         break;
+      case "oauth":
+         Component = StrategyOAuthForm;
+         break;
+   }
+
+   return <Component />;
+};
+
+const StrategyPasswordForm = () => {
+   return <ObjectField path="config" wrapperProps={{ wrapper: "group", label: false }} />;
+};
+
+const StrategyOAuthForm = () => {
+   return (
+      <>
+         <Field name="config.client.client_id" required />
+         <Field name="config.client.client_secret" required />
+      </>
+   );
+};
--- a/app/src/ui/routes/media/_media.root.tsx
+++ b/app/src/ui/routes/media/_media.root.tsx
@@ -2,6 +2,7 @@ import { IconAlertHexagon } from "@tabler/icons-react";
 import { TbSettings } from "react-icons/tb";
 import { useBknd } from "ui/client/BkndProvider";
 import { IconButton } from "ui/components/buttons/IconButton";
+import { Icon } from "ui/components/display/Icon";
 import { Link } from "ui/components/wouter/Link";
 import { Media } from "ui/elements";
 import { useBrowserTitle } from "ui/hooks/use-browser-title";
@@ -32,7 +33,10 @@ export function MediaRoot({ children }) {
                        href={"/"}
                        className="flex flex-row justify-between"
                     >
-                        Main Bucket {mediaDisabled && <IconAlertHexagon className="size-5" />}
+                        Main Bucket{" "}
+                        {mediaDisabled && (
+                           <Icon.Warning title="Media not enabled." className="size-5" />
+                        )}
                     </AppShell.SidebarLink>
                     <AppShell.SidebarLink as={Link} href={"/settings"}>
                        Settings