Fix Release 0.11.1 (#150)

* fix strategy forms handling, add register route and hidden fields

Refactored strategy forms to include hidden fields for type and name. Added a registration route with necessary adjustments to the admin controller and routes. Corrected field handling within relevant forms and components.

* fix admin access permissions and refactor routing structure

display a fixed error for unmet permissions when retrieving the schema. moved auth routes outside of BkndProvider and reorganized remaining routes to include BkndWrapper.

* fix: properly type BkndWrapper

* bump fix release version

* ModuleManager: update diff checking and AppData validation

Revised diff handling includes validation of diffs, reverting changes on failure, and enforcing module constraints with onBeforeUpdate hooks. Introduced `validateDiffs` and backup of stable configs. Applied changes in related modules, tests, and UI layer to align with updated diff logic.

* fix: cli: running from config file were using invalid args

* fix: cli: improve sequence of onBuilt trigger to allow custom routes from cli

* fix e2e tests

app/__test__/modules/AppData.spec.ts

@@ -1,13 +1,51 @@
-import { describe, expect, test } from "bun:test";
+import { beforeEach, describe, expect, test } from "bun:test";
 import { parse } from "../../src/core/utils";
 import { fieldsSchema } from "../../src/data/data-schema";
-import { AppData } from "../../src/modules";
+import { AppData, type ModuleBuildContext } from "../../src/modules";
-import { moduleTestSuite } from "./module-test-suite";
+import { makeCtx, moduleTestSuite } from "./module-test-suite";
+import * as proto from "data/prototype";
 
 describe("AppData", () => {
    moduleTestSuite(AppData);
 
+   let ctx: ModuleBuildContext;
+   beforeEach(() => {
+      ctx = makeCtx();
+   });
+
    test("field config construction", () => {
       expect(parse(fieldsSchema, { type: "text" })).toBeDefined();
    });
+
+   test("should prevent multi-deletion of entities in single request", async () => {
+      const schema = proto.em({
+         one: proto.entity("one", {
+            text: proto.text(),
+         }),
+         two: proto.entity("two", {
+            text: proto.text(),
+         }),
+         three: proto.entity("three", {
+            text: proto.text(),
+         }),
+      });
+      const check = () => {
+         const expected = ["one", "two", "three"];
+         const fromConfig = Object.keys(data.config.entities ?? {});
+         const fromEm = data.em.entities.map((e) => e.name);
+         expect(fromConfig).toEqual(expected);
+         expect(fromEm).toEqual(expected);
+      };
+
+      // auth must be enabled, otherwise default config is returned
+      const data = new AppData(schema.toJSON(), ctx);
+      await data.build();
+      check();
+
+      expect(data.schema().remove("entities")).rejects.toThrow(/more than one entity/);
+      check();
+
+      await data.setContext(makeCtx()).build();
+      check();
+   });
 });

app/__test__/modules/ModuleManager.spec.ts

@@ -1,10 +1,12 @@
 import { afterEach, beforeEach, describe, expect, mock, test } from "bun:test";
-import { Type, disableConsoleLog, enableConsoleLog, stripMark } from "../../src/core/utils";
+import { disableConsoleLog, enableConsoleLog, stripMark, Type } from "../../src/core/utils";
-import { entity, text } from "../../src/data";
+import { Connection, entity, text } from "../../src/data";
 import { Module } from "../../src/modules/Module";
-import { ModuleManager, getDefaultConfig } from "../../src/modules/ModuleManager";
+import { type ConfigTable, getDefaultConfig, ModuleManager } from "../../src/modules/ModuleManager";
 import { CURRENT_VERSION, TABLE_NAME } from "../../src/modules/migrations";
 import { getDummyConnection } from "../helper";
+import { diff } from "core/object/diff";
+import type { Static } from "@sinclair/typebox";
 
 describe("ModuleManager", async () => {
    test("s1: no config, no build", async () => {
@@ -380,4 +382,128 @@ describe("ModuleManager", async () => {
          expect(() => f.default()).toThrow();
       });
    });
+
+   async function getRawConfig(c: Connection) {
+      return (await c.kysely
+         .selectFrom(TABLE_NAME)
+         .selectAll()
+         .where("type", "=", "config")
+         .orderBy("version", "desc")
+         .executeTakeFirstOrThrow()) as unknown as ConfigTable;
+   }
+
+   async function getDiffs(c: Connection, opts?: { dir?: "asc" | "desc"; limit?: number }) {
+      return await c.kysely
+         .selectFrom(TABLE_NAME)
+         .selectAll()
+         .where("type", "=", "diff")
+         .orderBy("version", opts?.dir ?? "desc")
+         .$if(!!opts?.limit, (b) => b.limit(opts!.limit!))
+         .execute();
+   }
+
+   describe("diffs", () => {
+      test("never empty", async () => {
+         const { dummyConnection: c } = getDummyConnection();
+         const mm = new ModuleManager(c);
+         await mm.build();
+         await mm.save();
+         expect(await getDiffs(c)).toHaveLength(0);
+      });
+
+      test("has timestamps", async () => {
+         const { dummyConnection: c } = getDummyConnection();
+         const mm = new ModuleManager(c);
+         await mm.build();
+
+         await mm.get("data").schema().patch("basepath", "/api/data2");
+         await mm.save();
+
+         const config = await getRawConfig(c);
+         const diffs = await getDiffs(c);
+
+         expect(config.json.data.basepath).toBe("/api/data2");
+         expect(diffs).toHaveLength(1);
+         expect(diffs[0]!.created_at).toBeDefined();
+         expect(diffs[0]!.updated_at).toBeDefined();
+      });
+   });
+
+   describe("validate & revert", () => {
+      const schema = Type.Object({
+         value: Type.Array(Type.Number(), { default: [] }),
+      });
+      type SampleSchema = Static<typeof schema>;
+      class Sample extends Module<typeof schema> {
+         getSchema() {
+            return schema;
+         }
+         override async build() {
+            this.setBuilt();
+         }
+         override async onBeforeUpdate(from: SampleSchema, to: SampleSchema) {
+            if (to.value.length > 3) {
+               throw new Error("too many values");
+            }
+            if (to.value.includes(7)) {
+               throw new Error("contains 7");
+            }
+
+            return to;
+         }
+      }
+      class TestModuleManager extends ModuleManager {
+         constructor(...args: ConstructorParameters<typeof ModuleManager>) {
+            super(...args);
+            this.modules["module1"] = new Sample({}, this.ctx());
+         }
+      }
+      test("respects module onBeforeUpdate", async () => {
+         const { dummyConnection: c } = getDummyConnection();
+         const mm = new TestModuleManager(c);
+         await mm.build();
+
+         const m = mm.get("module1" as any) as Sample;
+
+         {
+            expect(async () => {
+               await m.schema().set({ value: [1, 2, 3, 4, 5] });
+               return mm.save();
+            }).toThrow(/too many values/);
+
+            expect(m.config.value).toHaveLength(0);
+            expect((mm.configs() as any).module1.value).toHaveLength(0);
+         }
+
+         {
+            expect(async () => {
+               await mm.mutateConfigSafe("module1" as any).set({ value: [1, 2, 3, 4, 5] });
+               return mm.save();
+            }).toThrow(/too many values/);
+
+            expect(m.config.value).toHaveLength(0);
+            expect((mm.configs() as any).module1.value).toHaveLength(0);
+         }
+
+         {
+            expect(async () => {
+               await m.schema().set({ value: [1, 7, 5] });
+               return mm.save();
+            }).toThrow(/contains 7/);
+
+            expect(m.config.value).toHaveLength(0);
+            expect((mm.configs() as any).module1.value).toHaveLength(0);
+         }
+
+         {
+            expect(async () => {
+               await mm.mutateConfigSafe("module1" as any).set({ value: [1, 7, 5] });
+               return mm.save();
+            }).toThrow(/contains 7/);
+
+            expect(m.config.value).toHaveLength(0);
+            expect((mm.configs() as any).module1.value).toHaveLength(0);
+         }
+      });
+   });
 });

app/e2e/adapters.ts

@@ -186,7 +186,8 @@ const adapters = {
    },
 } as const;
 
-for (const [name, config] of Object.entries(adapters)) {
+async function testAdapter(name: keyof typeof adapters) {
+   const config = adapters[name];
    console.log("adapter", c.cyan(name));
    await config.clean();
 
@@ -202,5 +203,12 @@ for (const [name, config] of Object.entries(adapters)) {
       await Bun.sleep(250);
       console.log("Waiting for process to exit...");
    }
-   //process.exit(0);
+}
+
+if (process.env.TEST_ADAPTER) {
+   await testAdapter(process.env.TEST_ADAPTER as any);
+} else {
+   for (const [name] of Object.entries(adapters)) {
+      await testAdapter(name as any);
+   }
 }

app/e2e/media.e2e-spec.ts

@@ -13,7 +13,7 @@ test("can enable media", async ({ page }) => {
    await page.goto(`${config.base_path}/media/settings`);
 
    // enable
-   const enableToggle = page.locator("css=button#enabled");
+   const enableToggle = page.getByTestId(testIds.media.switchEnabled);
    if ((await enableToggle.getAttribute("aria-checked")) !== "true") {
       await expect(enableToggle).toBeVisible();
       await enableToggle.click();

app/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "sideEffects": false,
   "bin": "./dist/cli/index.js",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "Lightweight Firebase/Supabase alternative built to run anywhere — incl. Next.js, React Router, Astro, Cloudflare, Bun, Node, AWS Lambda & more.",
   "homepage": "https://bknd.io",
   "repository": {
@@ -26,7 +26,7 @@
     "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly && tsc-alias",
     "updater": "bun x npm-check-updates -ui",
     "cli": "LOCAL=1 bun src/cli/index.ts",
-    "prepublishOnly": "bun run types && bun run test && bun run test:node && bun run build:all && cp ../README.md ./",
+    "prepublishOnly": "bun run types && bun run test && bun run test:node && bun run test:e2e && bun run build:all && cp ../README.md ./",
     "postpublish": "rm -f README.md",
     "test": "ALL_TESTS=1 bun test --bail",
     "test:all": "bun run test && bun run test:node",

app/playwright.config.ts

@@ -12,6 +12,7 @@ export default defineConfig({
    retries: process.env.CI ? 2 : 0,
    workers: process.env.CI ? 1 : undefined,
    reporter: "html",
+   timeout: 20000,
    use: {
       baseURL: baseUrl,
       trace: "on-first-retry",

app/src/cli/commands/run/platform.ts

@@ -4,6 +4,7 @@ import { config } from "core";
 import type { MiddlewareHandler } from "hono";
 import open from "open";
 import { fileExists, getRelativeDistPath } from "../../utils/sys";
+import type { App } from "App";
 
 export const PLATFORMS = ["node", "bun"] as const;
 export type Platform = (typeof PLATFORMS)[number];
@@ -32,7 +33,7 @@ export async function attachServeStatic(app: any, platform: Platform) {
 
 export async function startServer(
    server: Platform,
-   app: any,
+   app: App,
    options: { port: number; open?: boolean },
 ) {
    const port = options.port;

app/src/cli/commands/run/run.ts

@@ -77,12 +77,12 @@ async function makeApp(config: MakeAppConfig) {
    app.emgr.onEvent(
       App.Events.AppBuiltEvent,
       async () => {
-         await attachServeStatic(app, config.server?.platform ?? "node");
-         app.registerAdminController();
-
          if (config.onBuilt) {
             await config.onBuilt(app);
          }
+
+         await attachServeStatic(app, config.server?.platform ?? "node");
+         app.registerAdminController();
       },
       "sync",
    );
@@ -92,7 +92,7 @@ async function makeApp(config: MakeAppConfig) {
 }
 
 export async function makeConfigApp(_config: CliBkndConfig, platform?: Platform) {
-   const config = makeConfig(_config, { env: process.env });
+   const config = makeConfig(_config, process.env);
    return makeApp({
       ...config,
       server: { platform },

app/src/core/object/diff.ts

@@ -1,4 +1,5 @@
-enum Change {
+// biome-ignore lint/suspicious/noConstEnum: <explanation>
+export const enum DiffChange {
    Add = "a",
    Remove = "r",
    Edit = "e",
@@ -7,8 +8,8 @@ enum Change {
 type Object = object;
 type Primitive = string | number | boolean | null | object | any[] | undefined;
 
-interface DiffEntry {
+export interface DiffEntry {
-   t: Change | string;
+   t: DiffChange | string;
    p: (string | number)[];
    o: Primitive;
    n: Primitive;
@@ -47,7 +48,7 @@ function diff(oldObj: Object, newObj: Object): DiffEntry[] {
 
       if (typeof oldValue !== typeof newValue) {
          diffs.push({
-            t: Change.Edit,
+            t: DiffChange.Edit,
             p: path,
             o: oldValue,
             n: newValue,
@@ -57,14 +58,14 @@ function diff(oldObj: Object, newObj: Object): DiffEntry[] {
          for (let i = 0; i < maxLength; i++) {
             if (i >= oldValue.length) {
                diffs.push({
-                  t: Change.Add,
+                  t: DiffChange.Add,
                   p: [...path, i],
                   o: undefined,
                   n: newValue[i],
                });
             } else if (i >= newValue.length) {
                diffs.push({
-                  t: Change.Remove,
+                  t: DiffChange.Remove,
                   p: [...path, i],
                   o: oldValue[i],
                   n: undefined,
@@ -80,14 +81,14 @@ function diff(oldObj: Object, newObj: Object): DiffEntry[] {
          for (const key of allKeys) {
             if (!(key in oldValue)) {
                diffs.push({
-                  t: Change.Add,
+                  t: DiffChange.Add,
                   p: [...path, key],
                   o: undefined,
                   n: newValue[key],
                });
             } else if (!(key in newValue)) {
                diffs.push({
-                  t: Change.Remove,
+                  t: DiffChange.Remove,
                   p: [...path, key],
                   o: oldValue[key],
                   n: undefined,
@@ -98,7 +99,7 @@ function diff(oldObj: Object, newObj: Object): DiffEntry[] {
          }
       } else {
          diffs.push({
-            t: Change.Edit,
+            t: DiffChange.Edit,
             p: path,
             o: oldValue,
             n: newValue,
@@ -136,9 +137,9 @@ function applyChange(obj: Object, diff: DiffEntry) {
    const parent = getParent(obj, path.slice(0, -1));
    const key = path[path.length - 1]!;
 
-   if (type === Change.Add || type === Change.Edit) {
+   if (type === DiffChange.Add || type === DiffChange.Edit) {
       parent[key] = newValue;
-   } else if (type === Change.Remove) {
+   } else if (type === DiffChange.Remove) {
       if (Array.isArray(parent)) {
          parent.splice(key as number, 1);
       } else {
@@ -152,13 +153,13 @@ function revertChange(obj: Object, diff: DiffEntry) {
    const parent = getParent(obj, path.slice(0, -1));
    const key = path[path.length - 1]!;
 
-   if (type === Change.Add) {
+   if (type === DiffChange.Add) {
       if (Array.isArray(parent)) {
          parent.splice(key as number, 1);
       } else {
          delete parent[key];
       }
-   } else if (type === Change.Remove || type === Change.Edit) {
+   } else if (type === DiffChange.Remove || type === DiffChange.Edit) {
       parent[key] = oldValue;
    }
 }

app/src/data/AppData.ts

@@ -61,6 +61,19 @@ export class AppData extends Module<typeof dataConfigSchema> {
       this.setBuilt();
    }
 
+   override async onBeforeUpdate(from: AppDataConfig, to: AppDataConfig): Promise<AppDataConfig> {
+      // this is not 100% yet, since it could be legit
+      const entities = {
+         from: Object.keys(from.entities ?? {}),
+         to: Object.keys(to.entities ?? {}),
+      };
+      if (entities.from.length - entities.to.length > 1) {
+         throw new Error("Cannot remove more than one entity at a time");
+      }
+
+      return to;
+   }
+
    getSchema() {
       return dataConfigSchema;
    }

app/src/modules/ModuleManager.ts

@@ -1,7 +1,7 @@
 import { Guard } from "auth";
 import { $console, BkndError, DebugLogger, env } from "core";
 import { EventManager } from "core/events";
-import { clone, diff } from "core/object/diff";
+import * as $diff from "core/object/diff";
 import {
    Default,
    type Static,
@@ -95,7 +95,7 @@ export type ModuleManagerOptions = {
    verbosity?: Verbosity;
 };
 
-type ConfigTable<Json = ModuleConfigs> = {
+export type ConfigTable<Json = ModuleConfigs> = {
    id?: number;
    version: number;
    type: "config" | "diff" | "backup";
@@ -144,6 +144,7 @@ export class ModuleManager {
    private _version: number = 0;
    private _built = false;
    private readonly _booted_with?: "provided" | "partial";
+   private _stable_configs: ModuleConfigs | undefined;
 
    private logger: DebugLogger;
 
@@ -310,7 +311,7 @@ export class ModuleManager {
 
       try {
          const state = await this.fetch();
-         if (!state) throw new BkndError("save: no config found");
+         if (!state) throw new BkndError("no config found");
          this.logger.log("fetched version", state.version);
 
          if (state.version !== version) {
@@ -330,15 +331,21 @@ export class ModuleManager {
             this.logger.log("version matches", state.version);
 
             // clean configs because of Diff() function
-            const diffs = diff(state.json, clone(configs));
+            const diffs = $diff.diff(state.json, $diff.clone(configs));
             this.logger.log("checking diff", [diffs.length]);
 
-            if (diff.length > 0) {
+            if (diffs.length > 0) {
+               // validate diffs, it'll throw on invalid
+               this.validateDiffs(diffs);
+
+               const date = new Date();
                // store diff
                await this.mutator().insertOne({
                   version,
                   type: "diff",
-                  json: clone(diffs),
+                  json: $diff.clone(diffs),
+                  created_at: date,
+                  updated_at: date,
                });
 
                // store new version
@@ -346,7 +353,7 @@ export class ModuleManager {
                   {
                      version,
                      json: configs,
-                     updated_at: new Date(),
+                     updated_at: date,
                   } as any,
                   {
                      type: "config",
@@ -358,7 +365,7 @@ export class ModuleManager {
             }
          }
       } catch (e) {
-         if (e instanceof BkndError) {
+         if (e instanceof BkndError && e.message === "no config found") {
             this.logger.log("no config, just save fresh");
             // no config, just save
             await this.mutator().insertOne({
@@ -369,10 +376,12 @@ export class ModuleManager {
                updated_at: new Date(),
             });
          } else if (e instanceof TransformPersistFailedException) {
-            console.error("Cannot save invalid config");
+            $console.error("ModuleManager: Cannot save invalid config");
+            this.revertModules();
             throw e;
          } else {
-            console.error("Aborting");
+            $console.error("ModuleManager: Aborting");
+            this.revertModules();
             throw e;
          }
       }
@@ -386,6 +395,52 @@ export class ModuleManager {
       return this;
    }
 
+   private revertModules() {
+      if (this._stable_configs) {
+         $console.warn("ModuleManager: Reverting modules");
+         this.setConfigs(this._stable_configs as any);
+      } else {
+         $console.error("ModuleManager: No stable configs to revert to");
+      }
+   }
+
+   /**
+    * Validates received diffs for an additional security control.
+    * Checks:
+    *   - check if module is registered
+    *   - run modules onBeforeUpdate() for added protection
+    *
+    * **Important**: Throw `Error` so it won't get catched.
+    *
+    * @param diffs
+    * @private
+    */
+   private validateDiffs(diffs: $diff.DiffEntry[]): void {
+      // check top level paths, and only allow a single module to be modified in a single transaction
+      const modules = [...new Set(diffs.map((d) => d.p[0]))];
+      if (modules.length === 0) {
+         return;
+      }
+
+      for (const moduleName of modules) {
+         const name = moduleName as ModuleKey;
+         const module = this.get(name) as Module;
+         if (!module) {
+            const msg = "validateDiffs: module not registered";
+            // biome-ignore format: ...
+            $console.error(msg, JSON.stringify({ module: name, diffs }, null, 2));
+            throw new Error(msg);
+         }
+
+         // pass diffs to the module to allow it to throw
+         if (this._stable_configs?.[name]) {
+            const current = $diff.clone(this._stable_configs?.[name]);
+            const modified = $diff.apply({ [name]: current }, diffs)[name];
+            module.onBeforeUpdate(current, modified);
+         }
+      }
+   }
+
    private setConfigs(configs: ModuleConfigs): void {
       this.logger.log("setting configs");
       objectEach(configs, (config, key) => {
@@ -519,6 +574,9 @@ export class ModuleManager {
       this.logger.log("resetting flags");
       ctx.flags = Module.ctx_flags;
 
+      // storing last stable config version
+      this._stable_configs = $diff.clone(this.configs());
+
       this.logger.clear();
       return state;
    }
@@ -551,7 +609,6 @@ export class ModuleManager {
       name: Module,
    ): Pick<ReturnType<Modules[Module]["schema"]>, "set" | "patch" | "overwrite" | "remove"> {
       const module = this.modules[name];
-      const copy = structuredClone(this.configs());
 
       return new Proxy(module.schema(), {
          get: (target, prop: string) => {
@@ -560,7 +617,7 @@ export class ModuleManager {
             }
 
             return async (...args) => {
-               console.log("[Safe Mutate]", name);
+               $console.log("[Safe Mutate]", name);
                try {
                   // overwrite listener to run build inside this try/catch
                   module.setListener(async () => {
@@ -582,12 +639,12 @@ export class ModuleManager {
 
                   return result;
                } catch (e) {
-                  console.error("[Safe Mutate] failed", e);
+                  $console.error(`[Safe Mutate] failed "${name}":`, String(e));
 
                   // revert to previous config & rebuild using original listener
-                  this.setConfigs(copy);
+                  this.revertModules();
                   await this.onModuleConfigUpdated(name, module.config as any);
-                  console.log("[Safe Mutate] reverted");
+                  $console.log(`[Safe Mutate] reverted "${name}":`);
 
                   // make sure to throw the error
                   throw e;

app/src/modules/server/AdminController.tsx

@@ -72,6 +72,7 @@ export class AdminController extends Controller {
          success: configs.auth.cookie.pathSuccess ?? this.withAdminBasePath("/"),
          loggedOut: configs.auth.cookie.pathLoggedOut ?? this.withAdminBasePath("/"),
          login: this.withAdminBasePath("/auth/login"),
+         register: this.withAdminBasePath("/auth/register"),
          logout: this.withAdminBasePath("/auth/logout"),
       };
 
@@ -92,8 +93,7 @@ export class AdminController extends Controller {
       });
 
       if (auth_enabled) {
-         hono.get(
+         const redirectRouteParams = [
-            authRoutes.login,
             permission([SystemPermissions.accessAdmin, SystemPermissions.schemaRead], {
                // @ts-ignore
                onGranted: async (c) => {
@@ -107,7 +107,10 @@ export class AdminController extends Controller {
             async (c) => {
                return c.html(c.get("html")!);
             },
-         );
+         ] as const;
+
+         hono.get(authRoutes.login, ...redirectRouteParams);
+         hono.get(authRoutes.register, ...redirectRouteParams);
 
          hono.get(authRoutes.logout, async (c) => {
             await auth.authenticator?.logout(c);

app/src/modules/server/SystemController.ts

@@ -160,7 +160,6 @@ export class SystemController extends Controller {
          if (this.app.modules.get(module).schema().has(path)) {
             return c.json({ success: false, path, error: "Path already exists" }, { status: 400 });
          }
-         console.log("-- add", module, path, value);
 
          return await handleConfigUpdateResponse(c, async () => {
             await this.app.mutateConfig(module).patch(path, value);

app/src/ui/Admin.tsx

@@ -1,6 +1,6 @@
 import { MantineProvider } from "@mantine/core";
 import { Notifications } from "@mantine/notifications";
-import React from "react";
+import React, { type ReactNode } from "react";
 import { BkndProvider, type BkndAdminOptions } from "ui/client/bknd";
 import { useTheme } from "ui/client/use-theme";
 import { Logo } from "ui/components/display/Logo";
@@ -21,33 +21,32 @@ export default function Admin({
    withProvider = false,
    config,
 }: BkndAdminProps) {
-   const Component = (
+   const { theme } = useTheme();
-      <BkndProvider options={config} fallback={<Skeleton theme={config?.theme} />}>
+   const Provider = ({ children }: any) =>
-         <AdminInternal />
+      withProvider ? (
-      </BkndProvider>
-   );
-   return withProvider ? (
          <ClientProvider
             baseUrl={baseUrlOverride}
             {...(typeof withProvider === "object" ? withProvider : {})}
          >
-         {Component}
+            {children}
          </ClientProvider>
       ) : (
-      Component
+         children
       );
-}
 
-function AdminInternal() {
+   const BkndWrapper = ({ children }: { children: ReactNode }) => (
-   const { theme } = useTheme();
+      <BkndProvider options={config} fallback={<Skeleton theme={config?.theme} />}>
+         {children}
+      </BkndProvider>
+   );
 
    return (
+      <Provider>
          <MantineProvider {...createMantineTheme(theme as any)}>
             <Notifications position="top-right" />
-         <BkndModalsProvider>
+            <Routes BkndWrapper={BkndWrapper} basePath={config?.basepath} />
-            <Routes />
-         </BkndModalsProvider>
          </MantineProvider>
+      </Provider>
    );
 }
 

app/src/ui/client/BkndProvider.tsx

@@ -5,6 +5,8 @@ import { useApi } from "ui/client";
 import { type TSchemaActions, getSchemaActions } from "./schema/actions";
 import { AppReduced } from "./utils/AppReduced";
 import type { AppTheme } from "ui/client/use-theme";
+import { Message } from "ui/components/display/Message";
+import { useNavigate } from "ui/lib/routes";
 
 export type BkndAdminOptions = {
    logo_return_path?: string;
@@ -101,7 +103,6 @@ export function BkndProvider({
               fallback: true,
            } as any);
 
-
       startTransition(() => {
          const commit = () => {
             setSchema(newSchema);
@@ -109,7 +110,7 @@ export function BkndProvider({
             setFetched(true);
             set_local_version((v) => v + 1);
             fetching.current = Fetching.None;
-         }
+         };
 
          if ("startViewTransition" in document) {
             document.startViewTransition(commit);
@@ -139,22 +140,24 @@ export function BkndProvider({
          value={{ ...schema, actions, requireSecrets, app, options: app.options, hasSecrets }}
          key={local_version}
       >
-         {/*{error && (
+         {error ? <AccessDenied /> : children}
-            <Alert.Exception className="gap-2">
-               <IconAlertHexagon />
-               You attempted to load system configuration with secrets without having proper
-               permission.
-               <a href={schema.config.server.admin.basepath || "/"}>
-                  <Button variant="red">Reload</Button>
-               </a>
-            </Alert.Exception>
-         )}*/}
-
-         {children}
       </BkndContext.Provider>
    );
 }
 
+function AccessDenied() {
+   const [navigate] = useNavigate();
+   return (
+      <Message.MissingPermission
+         what="the Admin UI"
+         primary={{
+            children: "Login",
+            onClick: () => navigate("/auth/login"),
+         }}
+      />
+   );
+}
+
 export function useBknd({ withSecrets }: { withSecrets?: boolean } = {}): BkndContext {
    const ctx = useContext(BkndContext);
    if (withSecrets) ctx.requireSecrets();

app/src/ui/components/display/Message.tsx

@@ -16,9 +16,11 @@ const MissingPermission = ({
       {...props}
    />
 );
+const NotEnabled = (props: Partial<EmptyProps>) => <Empty title="Not Enabled" {...props} />;
 
 export const Message = {
    NotFound,
    NotAllowed,
+   NotEnabled,
    MissingPermission,
 };

app/src/ui/components/form/json-schema-form/Field.tsx

@@ -1,5 +1,12 @@
 import type { JsonSchema } from "json-schema-library";
-import type { ChangeEvent, ComponentPropsWithoutRef, ReactNode } from "react";
+import {
+   type ChangeEvent,
+   type ComponentPropsWithoutRef,
+   type ElementType,
+   type ReactNode,
+   useEffect,
+   useId,
+} from "react";
 import ErrorBoundary from "ui/components/display/ErrorBoundary";
 import * as Formy from "ui/components/form/Formy";
 import { useEvent } from "ui/hooks/use-event";
@@ -7,7 +14,7 @@ import { ArrayField } from "./ArrayField";
 import { FieldWrapper, type FieldwrapperProps } from "./FieldWrapper";
 import { useDerivedFieldContext, useFormValue } from "./Form";
 import { ObjectField } from "./ObjectField";
-import { coerce, isType, isTypeSchema } from "./utils";
+import { coerce, firstDefined, isType, isTypeSchema } from "./utils";
 
 export type FieldProps = {
    onChange?: (e: ChangeEvent<any>) => void;
@@ -24,6 +31,19 @@ export const Field = (props: FieldProps) => {
    );
 };
 
+export const HiddenField = ({
+   as = "div",
+   className,
+   ...props
+}: FieldProps & { as?: ElementType; className?: string }) => {
+   const Component = as;
+   return (
+      <Component className={[className, "hidden"].filter(Boolean).join(" ")}>
+         <Field {...props} />
+      </Component>
+   );
+};
+
 const fieldErrorBoundary =
    ({ name }: FieldProps) =>
    ({ error }: { error: Error }) => (
@@ -41,8 +61,9 @@ const FieldImpl = ({
    ...props
 }: FieldProps) => {
    const { path, setValue, schema, ...ctx } = useDerivedFieldContext(name);
+   const id = `${name}-${useId()}`;
    const required = typeof _required === "boolean" ? _required : ctx.required;
-   //console.log("Field", { name, path, schema });
+
    if (!isTypeSchema(schema))
       return (
          <Pre>
@@ -58,7 +79,21 @@ const FieldImpl = ({
       return <ArrayField path={name} />;
    }
 
-   const disabled = props.disabled ?? schema.readOnly ?? "const" in schema ?? false;
+   // account for `defaultValue`
+   // like <Field name="name" inputProps={{ defaultValue: "oauth" }} />
+   useEffect(() => {
+      if (inputProps?.defaultValue) {
+         setValue(path, inputProps.defaultValue);
+      }
+   }, [inputProps?.defaultValue]);
+
+   const disabled = firstDefined(
+      inputProps?.disabled,
+      props.disabled,
+      schema.readOnly,
+      "const" in schema,
+      false,
+   );
 
    const handleChange = useEvent((e: ChangeEvent<HTMLInputElement>) => {
       const value = coerce(e.target.value, schema as any, { required });
@@ -70,9 +105,10 @@ const FieldImpl = ({
    });
 
    return (
-      <FieldWrapper name={name} required={required} schema={schema} {...props}>
+      <FieldWrapper name={name} required={required} schema={schema} fieldId={id} {...props}>
          <FieldComponent
             {...inputProps}
+            id={id}
             schema={schema}
             name={name}
             required={required}
@@ -93,6 +129,7 @@ export const Pre = ({ children }) => (
 export type FieldComponentProps = {
    schema: JsonSchema;
    render?: (props: Omit<FieldComponentProps, "render">) => ReactNode;
+   "data-testId"?: string;
 } & ComponentPropsWithoutRef<"input">;
 
 export const FieldComponent = ({ schema, render, ..._props }: FieldComponentProps) => {
@@ -111,7 +148,7 @@ export const FieldComponent = ({ schema, render, ..._props }: FieldComponentProp
    if (render) return render({ schema, ...props });
 
    if (schema.enum) {
-      return <Formy.Select id={props.name} options={schema.enum} {...(props as any)} />;
+      return <Formy.Select options={schema.enum} {...(props as any)} />;
    }
 
    if (isType(schema.type, ["number", "integer"])) {
@@ -121,26 +158,17 @@ export const FieldComponent = ({ schema, render, ..._props }: FieldComponentProp
          step: schema.multipleOf,
       };
 
-      return (
+      return <Formy.Input type="number" {...props} value={props.value ?? ""} {...additional} />;
-         <Formy.Input
-            type="number"
-            id={props.name}
-            {...props}
-            value={props.value ?? ""}
-            {...additional}
-         />
-      );
    }
 
    if (isType(schema.type, "boolean")) {
-      return <Formy.Switch id={props.name} {...(props as any)} checked={value === true} />;
+      return <Formy.Switch {...(props as any)} checked={value === true} />;
    }
 
    if (isType(schema.type, "string") && schema.format === "date-time") {
       const value = props.value ? new Date(props.value as string).toISOString().slice(0, 16) : "";
       return (
          <Formy.DateInput
-            id={props.name}
             {...props}
             value={value}
             type="datetime-local"
@@ -156,7 +184,7 @@ export const FieldComponent = ({ schema, render, ..._props }: FieldComponentProp
    }
 
    if (isType(schema.type, "string") && schema.format === "date") {
-      return <Formy.DateInput id={props.name} {...props} value={props.value ?? ""} />;
+      return <Formy.DateInput {...props} value={props.value ?? ""} />;
    }
 
    const additional = {
@@ -171,7 +199,5 @@ export const FieldComponent = ({ schema, render, ..._props }: FieldComponentProp
       }
    }
 
-   return (
+   return <Formy.TypeAwareInput {...props} value={props.value ?? ""} {...additional} />;
-      <Formy.TypeAwareInput id={props.name} {...props} value={props.value ?? ""} {...additional} />
-   );
 };

app/src/ui/components/form/json-schema-form/FieldWrapper.tsx

@@ -24,6 +24,7 @@ export type FieldwrapperProps = {
    errorPlacement?: "top" | "bottom";
    description?: string;
    descriptionPlacement?: "top" | "bottom";
+   fieldId?: string;
 };
 
 export function FieldWrapper({
@@ -36,6 +37,7 @@ export function FieldWrapper({
    errorPlacement = "bottom",
    descriptionPlacement = "bottom",
    children,
+   fieldId,
    ...props
 }: FieldwrapperProps) {
    const errors = useFormError(name, { strict: true });
@@ -66,7 +68,7 @@ export function FieldWrapper({
          {label && (
             <Formy.Label
                as={wrapper === "fieldset" ? "legend" : "label"}
-               htmlFor={name}
+               htmlFor={fieldId}
                className="self-start"
             >
                {label} {required && <span className="font-medium opacity-30">*</span>}

app/src/ui/components/form/json-schema-form/utils.ts

@@ -138,3 +138,10 @@ export function omitSchema<Given extends JSONSchema>(_schema: Given, keys: strin
 export function isTypeSchema(schema?: JsonSchema): schema is JsonSchema {
    return typeof schema === "object" && "type" in schema && !isType(schema.type, "error");
 }
+
+export function firstDefined<T>(...args: T[]): T | undefined {
+   for (const arg of args) {
+      if (typeof arg !== "undefined") return arg;
+   }
+   return undefined;
+}

app/src/ui/elements/auth/AuthScreen.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { isValidElement, type ReactNode } from "react";
 import { useAuthStrategies } from "../hooks/use-auth";
 import { AuthForm } from "./AuthForm";
 
@@ -30,11 +30,13 @@ export function AuthScreen({
          {!loading && (
             <div className="flex flex-col gap-4 items-center w-96 px-6 py-7">
                {logo ? logo : null}
-               {typeof intro !== "undefined" ? (
+               {isValidElement(intro) ? (
                   intro
                ) : (
                   <div className="flex flex-col items-center">
-                     <h1 className="text-xl font-bold">Sign in to your admin panel</h1>
+                     <h1 className="text-xl font-bold">
+                        Sign {action === "login" ? "in" : "up"} to your admin panel
+                     </h1>
                      <p className="text-primary/50">Enter your credentials below to get access.</p>
                   </div>
                )}

app/src/ui/layouts/AppShell/Header.tsx

@@ -134,7 +134,7 @@ export function Header({ hasSidebar = true }) {
             <SidebarToggler />
             <UserMenu />
          </div>
-         <div className="hidden lg:flex flex-row items-center px-4 gap-2">
+         <div className="hidden md:flex flex-row items-center px-4 gap-2">
             <UserMenu />
          </div>
       </header>

app/src/ui/lib/config.ts

@@ -4,5 +4,7 @@ export const testIds = {
    data: {
       btnCreateEntity: "data-btns-create-entity",
    },
-   media: {},
+   media: {
+      switchEnabled: "media-switch-enabled",
+   },
 };

app/src/ui/routes/auth/auth.register.tsx

@@ -0,0 +1,18 @@
+import { Logo } from "ui/components/display/Logo";
+import { Link } from "ui/components/wouter/Link";
+import { Auth } from "ui/elements";
+import { useBrowserTitle } from "ui/hooks/use-browser-title";
+
+export function AuthRegister() {
+   useBrowserTitle(["Register"]);
+   return (
+      <Auth.Screen
+         action="register"
+         logo={
+            <Link href={"/"} className="link">
+               <Logo scale={0.25} />
+            </Link>
+         }
+      />
+   );
+}

app/src/ui/routes/auth/auth.strategies.tsx

@@ -24,6 +24,7 @@ import {
    Form,
    FormContextOverride,
    FormDebug,
+   HiddenField,
    ObjectField,
    Subscribe,
    useDerivedFieldContext,
@@ -36,9 +37,16 @@ import * as AppShell from "../../layouts/AppShell/AppShell";
 export function AuthStrategiesList(props) {
    useBrowserTitle(["Auth", "Strategies"]);
 
-   const { hasSecrets } = useBknd({ withSecrets: true });
+   const {
+      hasSecrets,
+      config: {
+         auth: { enabled },
+      },
+   } = useBknd({ withSecrets: true });
    if (!hasSecrets) {
       return <Message.MissingPermission what="Auth Strategies" />;
+   } else if (!enabled) {
+      return <Message.NotEnabled description="Enable Auth first." />;
    }
 
    return <AuthStrategiesListInternal {...props} />;
@@ -62,7 +70,6 @@ function AuthStrategiesListInternal() {
    );
 
    async function handleSubmit(data: any) {
-      console.log("submit", { strategies: data });
       await $auth.actions.config.set({ strategies: data });
    }
 
@@ -152,7 +159,7 @@ const Strategy = ({ type, name, unavailable }: StrategyProps) => {
                   <span className="leading-none">{autoFormatString(name)}</span>
                </div>
                <div className="flex flex-row gap-4 items-center">
-                  <StrategyToggle />
+                  <StrategyToggle type={type} />
                   <IconButton
                      Icon={TbSettings}
                      size="lg"
@@ -168,7 +175,7 @@ const Strategy = ({ type, name, unavailable }: StrategyProps) => {
                      "flex flex-col border-t border-t-muted px-4 pt-3 pb-4 bg-lightest/50 gap-4",
                   )}
                >
-                  <StrategyForm type={type} />
+                  <StrategyForm type={type} name={name} />
                </div>
             )}
          </div>
@@ -176,7 +183,7 @@ const Strategy = ({ type, name, unavailable }: StrategyProps) => {
    );
 };
 
-const StrategyToggle = () => {
+const StrategyToggle = ({ type }: { type: StrategyProps["type"] }) => {
    const ctx = useDerivedFieldContext("");
    const { value } = useFormValue("");
 
@@ -219,8 +226,10 @@ const OAUTH_BRANDS = {
    discord: TbBrandDiscordFilled,
 };
 
-const StrategyForm = ({ type }: Pick<StrategyProps, "type">) => {
+const StrategyForm = ({ type, name }: Pick<StrategyProps, "type" | "name">) => {
-   let Component = () => <ObjectField path="" wrapperProps={{ wrapper: "group", label: false }} />;
+   let Component = (p: any) => (
+      <ObjectField path="" wrapperProps={{ wrapper: "group", label: false }} />
+   );
    switch (type) {
       case "password":
          Component = StrategyPasswordForm;
@@ -230,16 +239,22 @@ const StrategyForm = ({ type }: Pick<StrategyProps, "type">) => {
          break;
    }
 
-   return <Component />;
+   return (
+      <>
+         <HiddenField name="type" inputProps={{ disabled: true, defaultValue: type }} />
+         <Component type={type} name={name} />
+      </>
+   );
 };
 
 const StrategyPasswordForm = () => {
    return <ObjectField path="config" wrapperProps={{ wrapper: "group", label: false }} />;
 };
 
-const StrategyOAuthForm = () => {
+const StrategyOAuthForm = ({ type, name }: Pick<StrategyProps, "type" | "name">) => {
    return (
       <>
+         <HiddenField name="config.name" inputProps={{ disabled: true, defaultValue: name }} />
          <Field name="config.client.client_id" required inputProps={{ type: "password" }} />
          <Field name="config.client.client_secret" required inputProps={{ type: "password" }} />
       </>

app/src/ui/routes/index.tsx

@@ -1,5 +1,4 @@
-import React, { Suspense, lazy } from "react";
+import { Suspense, lazy, type ComponentType, type ReactNode } from "react";
-import { useBknd } from "ui/client/bknd";
 import { useTheme } from "ui/client/use-theme";
 import { Route, Router, Switch } from "wouter";
 import AuthRoutes from "./auth";
@@ -10,20 +9,28 @@ import MediaRoutes from "./media";
 import { Root, RootEmpty } from "./root";
 import SettingsRoutes from "./settings";
 import { FlashMessage } from "ui/modules/server/FlashMessage";
+import { AuthRegister } from "ui/routes/auth/auth.register";
+import { BkndModalsProvider } from "ui/modals";
 
 // @ts-ignore
 const TestRoutes = lazy(() => import("./test"));
 
-export function Routes() {
+export function Routes({
-   const { app } = useBknd();
+   BkndWrapper,
+   basePath = "",
+}: { BkndWrapper: ComponentType<{ children: ReactNode }>; basePath?: string }) {
    const { theme } = useTheme();
 
    return (
       <div id="bknd-admin" className={theme + " antialiased"}>
          <FlashMessage />
-         <Router base={app.options.basepath}>
+         <Router base={basePath}>
             <Switch>
                <Route path="/auth/login" component={AuthLogin} />
+               <Route path="/auth/register" component={AuthRegister} />
+
+               <BkndWrapper>
+                  <BkndModalsProvider>
                      <Route path="/" nest>
                         <Root>
                            <Switch>
@@ -64,6 +71,8 @@ export function Routes() {
                            </Switch>
                         </Root>
                      </Route>
+                  </BkndModalsProvider>
+               </BkndWrapper>
             </Switch>
          </Router>
       </div>

app/src/ui/routes/media/media.settings.tsx

@@ -20,6 +20,7 @@ import {
 } from "ui/components/form/json-schema-form";
 import { useBrowserTitle } from "ui/hooks/use-browser-title";
 import * as AppShell from "ui/layouts/AppShell/AppShell";
+import { testIds } from "ui/lib/config";
 
 export function MediaSettings(props) {
    useBrowserTitle(["Media", "Settings"]);
@@ -79,7 +80,10 @@ function MediaSettingsInternal() {
             <AppShell.Scrollable>
                <RootFormError />
                <div className="flex flex-col gap-3 p-3">
-                  <Field name="enabled" />
+                  <Field
+                     name="enabled"
+                     inputProps={{ "data-testId": testIds.media.switchEnabled }}
+                  />
                   <div className="flex flex-col gap-3 relative">
                      <Overlay />
                      <Field name="storage.body_max_size" label="Storage Body Max Size" />

app/vite.dev.ts

@@ -50,7 +50,7 @@ if (example) {
 }
 
 let app: App;
-const recreate = import.meta.env.VITE_APP_DISABLE_FRESH !== "1";
+const recreate = import.meta.env.VITE_APP_FRESH === "1";
 let firstStart = true;
 export default {
    async fetch(request: Request) {

examples/nextjs/src/app/admin/[[...admin]]/Admin.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { type BkndAdminProps, Admin } from "bknd/ui";
+import { useEffect, useState } from "react";
+
+export function AdminComponent(props: BkndAdminProps) {
+   const [ready, setReady] = useState(false);
+
+   useEffect(() => {
+      if (typeof window !== "undefined") setReady(true);
+   }, []);
+   if (!ready) return null;
+
+   return <Admin {...props} />;
+}

examples/nextjs/src/app/admin/[[...admin]]/page.tsx

@@ -1,12 +1,12 @@
-import { Admin } from "bknd/ui";
+import { AdminComponent } from "./Admin";
-import "bknd/dist/styles.css";
 import { getApi } from "@/bknd";
+import "bknd/dist/styles.css";
 
 export default async function AdminPage() {
    const api = await getApi({ verify: true });
 
    return (
-      <Admin
+      <AdminComponent
          withProvider={{ user: api.getUser() }}
          config={{
             basepath: "/admin",