Merge pull request #59 from bknd-io/feat/adapter-auth-env

Adapter: verified auth & env-specific construction

app/build.ts

@@ -180,6 +180,14 @@ function baseConfig(adapter: string): tsup.Options {
    };
 }
 
+// base adapter handles
+await tsup.build({
+   ...baseConfig(""),
+   entry: ["src/adapter/index.ts"],
+   outDir: "dist/adapter"
+});
+
+// specific adatpers
 await tsup.build(baseConfig("remix"));
 await tsup.build(baseConfig("bun"));
 await tsup.build(baseConfig("astro"));

app/package.json

@@ -148,6 +148,10 @@
       "import": "./dist/adapter/cloudflare/index.js",
       "require": "./dist/adapter/cloudflare/index.cjs"
     },
+    "./adapter": {
+      "types": "./dist/types/adapter/index.d.ts",
+      "import": "./dist/adapter/index.js"
+    },
     "./adapter/vite": {
       "types": "./dist/types/adapter/vite/index.d.ts",
       "import": "./dist/adapter/vite/index.js",

app/src/adapter/astro/astro.adapter.ts

@@ -1,7 +1,7 @@
 import { type FrameworkBkndConfig, createFrameworkApp } from "adapter";
 import { Api, type ApiOptions, type App } from "bknd";
 
-export type AstroBkndConfig = FrameworkBkndConfig;
+export type AstroBkndConfig<Args = TAstro> = FrameworkBkndConfig<Args>;
 
 type TAstro = {
    request: Request;
@@ -13,18 +13,20 @@ export type Options = {
       host?: string;
    };
 
-export function getApi(Astro: TAstro, options: Options = { mode: "static" }) {
-   return new Api({
+export async function getApi(Astro: TAstro, options: Options = { mode: "static" }) {
+   const api = new Api({
       host: new URL(Astro.request.url).origin,
       headers: options.mode === "dynamic" ? Astro.request.headers : undefined
    });
+   await api.verifyAuth();
+   return api;
 }
 
 let app: App;
-export function serve(config: AstroBkndConfig = {}) {
-   return async (args: TAstro) => {
+export function serve<Context extends TAstro = TAstro>(config: AstroBkndConfig<Context> = {}) {
+   return async (args: Context) => {
       if (!app) {
-         app = await createFrameworkApp(config);
+         app = await createFrameworkApp(config, args);
       }
       return app.fetch(args.request);
    };

app/src/adapter/cloudflare/cloudflare-workers.adapter.ts

@@ -1,4 +1,3 @@
-import type { CreateAppConfig } from "bknd";
 import { Hono } from "hono";
 import { serveStatic } from "hono/cloudflare-workers";
 import type { FrameworkBkndConfig } from "../index";
@@ -6,10 +5,9 @@ import { getCached } from "./modes/cached";
 import { getDurable } from "./modes/durable";
 import { getFresh, getWarm } from "./modes/fresh";
 
-export type CloudflareBkndConfig<Env = any> = Omit<FrameworkBkndConfig, "app"> & {
-   app: CreateAppConfig | ((env: Env) => CreateAppConfig);
+export type CloudflareBkndConfig<Env = any> = FrameworkBkndConfig<Context<Env>> & {
    mode?: "warm" | "fresh" | "cache" | "durable";
-   bindings?: (env: Env) => {
+   bindings?: (args: Context<Env>) => {
       kv?: KVNamespace;
       dobj?: DurableObjectNamespace;
    };
@@ -21,15 +19,15 @@ export type CloudflareBkndConfig<Env = any> = Omit<FrameworkBkndConfig, "app"> &
    html?: string;
 };
 
-export type Context = {
+export type Context<Env = any> = {
    request: Request;
-   env: any;
+   env: Env;
    ctx: ExecutionContext;
 };
 
-export function serve(config: CloudflareBkndConfig) {
+export function serve<Env = any>(config: CloudflareBkndConfig<Env>) {
    return {
-      async fetch(request: Request, env: any, ctx: ExecutionContext) {
+      async fetch(request: Request, env: Env, ctx: ExecutionContext) {
          const url = new URL(request.url);
          const manifest = config.manifest;
 

app/src/adapter/cloudflare/modes/cached.ts

@@ -2,7 +2,7 @@ import { createRuntimeApp } from "adapter";
 import { App } from "bknd";
 import type { CloudflareBkndConfig, Context } from "../index";
 
-export async function getCached(config: CloudflareBkndConfig, { env, ctx }: Context) {
+export async function getCached(config: CloudflareBkndConfig, { env, ctx, ...args }: Context) {
    const { kv } = config.bindings?.(env)!;
    if (!kv) throw new Error("kv namespace is not defined in cloudflare.bindings");
    const key = config.key ?? "app";
@@ -37,7 +37,7 @@ export async function getCached(config: CloudflareBkndConfig, { env, ctx }: Cont
          },
          adminOptions: { html: config.html }
       },
-      env
+      { env, ctx, ...args }
    );
 
    if (!cachedConfig) {

app/src/adapter/cloudflare/modes/durable.ts

@@ -1,5 +1,5 @@
 import { DurableObject } from "cloudflare:workers";
-import { createRuntimeApp } from "adapter";
+import { createRuntimeApp, makeConfig } from "adapter";
 import type { CloudflareBkndConfig, Context } from "adapter/cloudflare";
 import type { App, CreateAppConfig } from "bknd";
 
@@ -17,7 +17,7 @@ export async function getDurable(config: CloudflareBkndConfig, ctx: Context) {
    const id = dobj.idFromName(key);
    const stub = dobj.get(id) as unknown as DurableBkndApp;
 
-   const create_config = typeof config.app === "function" ? config.app(ctx.env) : config.app;
+   const create_config = makeConfig(config, ctx);
 
    const res = await stub.fire(ctx.request, {
       config: create_config,

app/src/adapter/cloudflare/modes/fresh.ts

@@ -2,13 +2,13 @@ import { createRuntimeApp } from "adapter";
 import type { App } from "bknd";
 import type { CloudflareBkndConfig, Context } from "../index";
 
-export async function makeApp(config: CloudflareBkndConfig, { env }: Context) {
+export async function makeApp(config: CloudflareBkndConfig, ctx: Context) {
    return await createRuntimeApp(
       {
          ...config,
          adminOptions: config.html ? { html: config.html } : undefined
       },
-      env
+      ctx
    );
 }
 

app/src/adapter/index.ts

@@ -5,16 +5,16 @@ import type { MiddlewareHandler } from "hono";
 import { StorageLocalAdapter } from "media/storage/adapters/StorageLocalAdapter";
 import type { AdminControllerOptions } from "modules/server/AdminController";
 
-export type BkndConfig<Env = any> = CreateAppConfig & {
-   app?: CreateAppConfig | ((env: Env) => CreateAppConfig);
+export type BkndConfig<Args = any> = CreateAppConfig & {
+   app?: CreateAppConfig | ((args: Args) => CreateAppConfig);
    onBuilt?: (app: App) => Promise<void>;
    beforeBuild?: (app: App) => Promise<void>;
    buildConfig?: Parameters<App["build"]>[0];
 };
 
-export type FrameworkBkndConfig<Env = any> = BkndConfig<Env>;
+export type FrameworkBkndConfig<Args = any> = BkndConfig<Args>;
 
-export type RuntimeBkndConfig<Env = any> = BkndConfig<Env> & {
+export type RuntimeBkndConfig<Args = any> = BkndConfig<Args> & {
    distPath?: string;
 };
 
@@ -46,14 +46,14 @@ export function registerLocalMediaAdapter() {
    registries.media.register("local", StorageLocalAdapter);
 }
 
-export function makeConfig<Env = any>(config: BkndConfig<Env>, env?: Env): CreateAppConfig {
+export function makeConfig<Args = any>(config: BkndConfig<Args>, args?: Args): CreateAppConfig {
    let additionalConfig: CreateAppConfig = {};
    if ("app" in config && config.app) {
       if (typeof config.app === "function") {
-         if (!env) {
-            throw new Error("env is required when config.app is a function");
+         if (!args) {
+            throw new Error("args is required when config.app is a function");
          }
-         additionalConfig = config.app(env);
+         additionalConfig = config.app(args);
       } else {
          additionalConfig = config.app;
       }
@@ -62,11 +62,11 @@ export function makeConfig<Env = any>(config: BkndConfig<Env>, env?: Env): Creat
    return { ...config, ...additionalConfig };
 }
 
-export async function createFrameworkApp<Env = any>(
+export async function createFrameworkApp<Args = any>(
    config: FrameworkBkndConfig,
-   env?: Env
+   args?: Args
 ): Promise<App> {
-   const app = App.create(makeConfig(config, env));
+   const app = App.create(makeConfig(config, args));
 
    if (config.onBuilt) {
       app.emgr.onEvent(

app/src/adapter/nextjs/nextjs.adapter.ts

@@ -29,8 +29,10 @@ export function createApi({ req }: GetServerSidePropsContext) {
 }
 
 export function withApi<T>(handler: (ctx: GetServerSidePropsContext & { api: Api }) => T) {
-   return (ctx: GetServerSidePropsContext & { api: Api }) => {
-      return handler({ ...ctx, api: createApi(ctx) });
+   return async (ctx: GetServerSidePropsContext & { api: Api }) => {
+      const api = createApi(ctx);
+      await api.verifyAuth();
+      return handler({ ...ctx, api });
    };
 }
 

app/src/adapter/remix/AdminPage.tsx

@@ -1,9 +1,11 @@
+import { useAuth } from "bknd/client";
 import type { BkndAdminProps } from "bknd/ui";
 import { Suspense, lazy, useEffect, useState } from "react";
 
 export function adminPage(props?: BkndAdminProps) {
    const Admin = lazy(() => import("bknd/ui").then((mod) => ({ default: mod.Admin })));
    return () => {
+      const auth = useAuth();
       const [loaded, setLoaded] = useState(false);
       useEffect(() => {
          if (typeof window === "undefined") return;
@@ -13,7 +15,7 @@ export function adminPage(props?: BkndAdminProps) {
 
       return (
          <Suspense>
-            <Admin {...props} />
+            <Admin withProvider={{ user: auth.user }} {...props} />
          </Suspense>
       );
    };

app/src/adapter/remix/remix.adapter.ts

@@ -1,14 +1,37 @@
 import { type FrameworkBkndConfig, createFrameworkApp } from "adapter";
 import type { App } from "bknd";
+import { Api } from "bknd/client";
 
-export type RemixBkndConfig = FrameworkBkndConfig;
+export type RemixBkndConfig<Args = RemixContext> = FrameworkBkndConfig<Args>;
+
+type RemixContext = {
+   request: Request;
+};
 
 let app: App;
-export function serve(config: RemixBkndConfig = {}) {
-   return async (args: { request: Request }) => {
+export function serve<Args extends RemixContext = RemixContext>(
+   config: RemixBkndConfig<Args> = {}
+) {
+   return async (args: Args) => {
       if (!app) {
-         app = await createFrameworkApp(config);
+         app = await createFrameworkApp(config, args);
       }
       return app.fetch(args.request);
    };
 }
+
+export function withApi<Args extends { request: Request; context: { api: Api } }, R>(
+   handler: (args: Args, api: Api) => Promise<R>
+) {
+   return async (args: Args) => {
+      if (!args.context.api) {
+         args.context.api = new Api({
+            host: new URL(args.request.url).origin,
+            headers: args.request.headers
+         });
+         await args.context.api.verifyAuth();
+      }
+
+      return handler(args, args.context.api);
+   };
+}

docs/integration/astro.mdx

@@ -65,7 +65,7 @@ import "bknd/dist/styles.css";
 
 import { getApi } from "bknd/adapter/astro";
 
-const api = getApi(Astro, { mode: "dynamic" });
+const api = await getApi(Astro, { mode: "dynamic" });
 const user = api.getUser();
 
 export const prerender = false;
@@ -94,7 +94,7 @@ Here is an example of using the API in static context:
 ```jsx
 ---
 import { getApi } from "bknd/adapter/astro";
-const api = getApi(Astro);
+const api = await getApi(Astro);
 const { data } = await api.data.readMany("todos");
 ---
 
@@ -109,7 +109,7 @@ On SSR pages, you can also access the authenticated user:
 ```jsx
 ---
 import { getApi } from "bknd/adapter/astro";
-const api = getApi(Astro, { mode: "dynamic" });
+const api = await getApi(Astro, { mode: "dynamic" });
 const user = api.getUser();
 const { data } = await api.data.readMany("todos");
 

docs/integration/cloudflare.mdx

@@ -16,11 +16,11 @@ and then install bknd as a dependency:
 If you don't choose anything specific, the following code will use the `warm` mode. See the
 chapter [Using a different mode](#using-a-different-mode) for available modes.
 
-``` ts
+```ts
 import { serve } from "bknd/adapter/cloudflare";
 
-export default serve({
-   app: (env: Env) => ({
+export default serve<Env>({
+   app: ({ env }) => ({
       connection: {
          type: "libsql",
          config: {
@@ -50,12 +50,12 @@ bucket = "node_modules/bknd/dist/static"
 ```
 
 And then modify the worker entry as follows:
-``` ts {2, 14, 15}
+```ts {2, 14, 15}
 import { serve } from "bknd/adapter/cloudflare";
 import manifest from "__STATIC_CONTENT_MANIFEST";
 
-export default serve({
-   app: (env: Env) => ({
+export default serve<Env>({
+   app: ({ env }) => ({
       connection: {
          type: "libsql",
          config: {
@@ -75,8 +75,8 @@ You can also add custom routes by defining them after the app has been built, li
 import { serve } from "bknd/adapter/cloudflare";
 import manifest from "__STATIC_CONTENT_MANIFEST";
 
-export default serve({
-   app: (env: Env) => ({
+export default serve<Env>({
+   app: ({ env }) => ({
       connection: {
          type: "libsql",
          config: {
@@ -111,7 +111,7 @@ mode`, like so:
 import { serve } from "bknd/adapter/cloudflare";
 
 export default serve({
-   /* ... */,
+   // ...
    mode: "fresh" // mode: "fresh" | "warm" | "cache" | "durable"
 });
 ```
@@ -119,13 +119,14 @@ export default serve({
 ### Mode: `cache`
 For the cache mode to work, you also need to specify the KV to be used. For this, use the
 `bindings` property:
+
 ```ts
 import { serve } from "bknd/adapter/cloudflare";
 
-export default serve({
-   /* ... */,
+export default serve<Env>({
+   // ...
    mode: "cache",
-   bindings: (env: Env) => ({ kv: env.KV })
+   bindings: ({ env }) => ({ kv: env.KV })
 });
 ```
 
@@ -136,10 +137,10 @@ environment, and additionally export the `DurableBkndApp` class:
 import { serve, DurableBkndApp } from "bknd/adapter/cloudflare";
 
 export { DurableBkndApp };
-export default serve({
-   /* ... */,
+export default serve<Env>({
+   // ...
    mode: "durable",
-   bindings: (env: Env) => ({ dobj: env.DOBJ }),
+   bindings: ({ env }) => ({ dobj: env.DOBJ }),
    keepAliveSeconds: 60 // optional
 });
 ```
@@ -164,9 +165,9 @@ import type { App } from "bknd";
 import { serve, DurableBkndApp } from "bknd/adapter/cloudflare";
 
 export default serve({
-   /* ... */,
+   // ...
    mode: "durable",
-   bindings: (env: Env) => ({ dobj: env.DOBJ }),
+   bindings: ({ env }) => ({ dobj: env.DOBJ }),
    keepAliveSeconds: 60 // optional
 });
 

docs/integration/remix.mdx

@@ -10,7 +10,7 @@ Install bknd as a dependency:
 
 ## Serve the API
 Create a new api splat route file at `app/routes/api.$.ts`:
-``` tsx
+```ts
 // app/routes/api.$.ts
 import { serve } from "bknd/adapter/remix";
 
@@ -32,6 +32,9 @@ Now make sure that you wrap your root layout with the `ClientProvider` so that a
 share the same context:
 ```tsx
 // app/root.tsx
+import { withApi } from "bknd/adapter/remix"
+import { type Api, ClientProvider } from "bknd/client";
+
 export function Layout(props) {
    // nothing to change here, just for orientation
    return (
@@ -48,21 +51,12 @@ declare module "@remix-run/server-runtime" {
 }
 
 // export a loader that initiates the API
-// and pass it through the context
-export const loader = async (args: LoaderFunctionArgs) => {
-   const api = new Api({
-      host: new URL(args.request.url).origin,
-      headers: args.request.headers
-   });
-
-   // get the user from the API
-   const user = api.getUser();
-
-   // add api to the context
-   args.context.api = api;
-
-   return { user };
-};
+// and passes it down to args.context.api
+export const loader = withApi(async (args: LoaderFunctionArgs, api: Api) => {
+   return {
+      user: api.getUser()
+   };
+});
 
 export default function App() {
    const { user } = useLoaderData<typeof loader>();
@@ -93,15 +87,9 @@ Since the API has already been constructed in the root layout, you can now use i
 import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { useLoaderData } from "@remix-run/react";
 
-export const loader = async (args: LoaderFunctionArgs) => {
-   const { api } = args.context;
-
-   // get the authenticated user
-   const user = api.getAuthState().user;
-
-   // get the data from the API
+export const loader = async ({ context: { api } }: LoaderFunctionArgs) => {
    const { data } = await api.data.readMany("todos");
-   return { data, user };
+   return { data, user: api.getUser() };
 };
 
 export default function Index() {

examples/astro/src/pages/admin/[...admin].astro

@@ -4,8 +4,7 @@ import "bknd/dist/styles.css";
 
 import { getApi } from "bknd/adapter/astro";
 
-const api = getApi(Astro, { mode: "dynamic" });
-await api.verifyAuth();
+const api = await getApi(Astro, { mode: "dynamic" });
 const user = api.getUser();
 
 export const prerender = false;

examples/astro/src/pages/api/[...api].ts

@@ -1,3 +1,4 @@
+import type { APIContext } from "astro";
 import { App } from "bknd";
 import { serve } from "bknd/adapter/astro";
 import { registerLocalMediaAdapter } from "bknd/adapter/node";
@@ -23,7 +24,7 @@ declare module "bknd/core" {
    interface DB extends Database {}
 }
 
-export const ALL = serve({
+export const ALL = serve<APIContext>({
    // we can use any libsql config, and if omitted, uses in-memory
    connection: {
       type: "libsql",

examples/astro/src/pages/index.astro

@@ -2,7 +2,8 @@
 import { getApi } from "bknd/adapter/astro";
 import Card from "../components/Card.astro";
 import Layout from "../layouts/Layout.astro";
-const api = getApi(Astro);
+
+const api = await getApi(Astro);
 const { data } = await api.data.readMany("todos");
 ---
 

examples/astro/src/pages/ssr.astro

@@ -2,8 +2,7 @@
 import { getApi } from "bknd/adapter/astro";
 import Card from "../components/Card.astro";
 import Layout from "../layouts/Layout.astro";
-const api = getApi(Astro, { mode: "dynamic" });
-await api.verifyAuth();
+const api = await getApi(Astro, { mode: "dynamic" });
 
 const { data } = await api.data.readMany("todos");
 const user = api.getUser();

examples/cloudflare-worker/src/index.ts

@@ -3,7 +3,7 @@ import { serve } from "bknd/adapter/cloudflare";
 import manifest from "__STATIC_CONTENT_MANIFEST";
 
 export default serve({
-   app: (env: Env) => ({
+   app: (args) => ({
       connection: {
          type: "libsql",
          config: {

examples/remix/app/root.tsx

@@ -1,12 +1,7 @@
 import type { LoaderFunctionArgs } from "@remix-run/node";
 import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from "@remix-run/react";
-import { Api, ClientProvider } from "bknd/client";
-
-declare module "@remix-run/server-runtime" {
-   export interface AppLoadContext {
-      api: Api;
-   }
-}
+import { withApi } from "bknd/adapter/remix";
+import { type Api, ClientProvider } from "bknd/client";
 
 export function Layout({ children }: { children: React.ReactNode }) {
    return (
@@ -26,20 +21,17 @@ export function Layout({ children }: { children: React.ReactNode }) {
    );
 }
 
-export const loader = async (args: LoaderFunctionArgs) => {
-   const api = new Api({
-      host: new URL(args.request.url).origin,
-      headers: args.request.headers
-   });
+declare module "@remix-run/server-runtime" {
+   export interface AppLoadContext {
+      api: Api;
+   }
+}
 
-   // add api to the context
-   args.context.api = api;
-
-   await api.verifyAuth();
+export const loader = withApi(async (args: LoaderFunctionArgs, api: Api) => {
    return {
-      user: api.getAuthState()?.user
+      user: api.getUser()
    };
-};
+});
 
 export default function App() {
    const data = useLoaderData<typeof loader>();

examples/remix/app/routes/_index.tsx

@@ -1,19 +1,20 @@
 import { type MetaFunction, useLoaderData } from "@remix-run/react";
 import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { useAuth } from "bknd/client";
 
 export const meta: MetaFunction = () => {
    return [{ title: "Remix & bknd" }, { name: "description", content: "Welcome to Remix & bknd!" }];
 };
 
-export const loader = async (args: LoaderFunctionArgs) => {
-   const api = args.context.api;
-   await api.verifyAuth();
+export const loader = async ({ context: { api } }: LoaderFunctionArgs) => {
    const { data } = await api.data.readMany("todos");
    return { data, user: api.getUser() };
 };
 
 export default function Index() {
    const { data, user } = useLoaderData<typeof loader>();
+   const auth = useAuth();
+   console.log("auth", auth);
 
    return (
       <div>