updated adapters to automatically verify auth

This commit is contained in:
dswbx
2025-01-25 09:09:09 +01:00
parent f64e5dac03
commit b0c5f6307a
11 changed files with 60 additions and 57 deletions

View File

@@ -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");

View File

@@ -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() {