Zenn
🗂

oRPC + Better Authで認証情報付きでRPCを呼び出す

に公開
Better Auth
oRPC
tech

結論

import type { RouterClient } from "@orpc/server";
import { createORPCClient } from "@orpc/client";
import { RPCLink } from "@orpc/client/fetch";
import { router } from "../../../apps/backend/routes";

const link = new RPCLink({
    url: "http://localhost:8000/rpc",
+   fetch: (request, init) => {
+       return globalThis.fetch(request, {
+           ...init,
+           credentials: "include",
+       });
+   },
});

export const orpcClient: RouterClient<typeof router> = createORPCClient(link);
  • fetchをオーバーライドしてあげて、credentials: includeを付けてあげればいい
  • クロスオリジンの場合に必要な作業。同一オリジン（Next.jsのAPI Routeとして使ってる場合など）は不要（勝手にCookieが付加される）

解説

バックエンドとフロントエンドを別々に実行している環境では

  • フロントエンド: localhost:3000
  • バックエンド: localhost:8000

みたいな環境になる。
この場合のフロントエンドとバックエンド間の通信はクロスオリジン扱いとなり、明示的に認証情報を含める設定を行わない限り、Cookieが付加されない。

Better AuthはBearerトークンとしてアクセストークンを付加するような設計ではなく、Cookieで認証情報を管理しているため、原則認証情報はCookieに含める必要がある。

oRPCは内部でfetchを使っているが、単にoptionとして credentials: "include" は指定できなかったので、このようにする必要がある。

調べても出てこなかったけどドキュメントを読み直したらoRPCのドキュメントに乗ってたので、備忘録として残しておく

https://orpc.unnoq.com/docs/client/rpc-link

以上

Discussion