Merge remote-tracking branch 'origin/feat/adapter-api-async' into feat/adapter-auth-env

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

@@ -13,11 +13,13 @@ 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;

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,5 +1,6 @@
 import { type FrameworkBkndConfig, createFrameworkApp } from "adapter";
 import type { App } from "bknd";
+import { Api } from "bknd/client";
 
 export type RemixBkndConfig<Args = RemixContext> = FrameworkBkndConfig<Args>;
 
@@ -18,3 +19,19 @@ export function serve<Args extends RemixContext = RemixContext>(
       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/remix.mdx

@@ -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/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/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>