ミドルウェアとコンテキスト
プロシージャに認証と共有コンテキストを追加します。
「ミドルウェアとコンテキスト」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
コンテキストとは
すべてのtRPCリクエストにはコンテキストが含まれます。コンテキストは、データベースクライアント、リクエスト、現在のユーザーなど、すべてのプロシージャから利用できる共有データです。createContext関数を使って、リクエストごとに1度構築します。
export async function createContext({ req }: { req: Request }) {
const token = req.headers.get('authorization');
const user = await getUserFromToken(token);
return { user };
}コンテキストの型付け
tRPCはcreateContextからコンテキスト型を推論し、すべてのプロシージャに引き継ぎます。インスタンスをそのコンテキスト型で初期化することで、リゾルバーからはctxを正しく型付けされた状態で利用できます。
import { initTRPC } from '@trpc/server';
type Context = Awaited<ReturnType<typeof createContext>>;
const t = initTRPC.context<Context>().create();リゾルバーでのctxの読み取り
どのプロシージャ内でも、コンテキストは完全に型付けされたctxとして利用できます。ここでは、プロシージャがコンテキストから現在のユーザーを読み取ります。
const me = t.procedure.query(({ ctx }) => {
// ctx.user is typed from createContext
return ctx.user;
});ミドルウェアとは
ミドルウェアは、プロシージャのリゾルバーより前に実行されます。権限の確認やログの記録、コンテキストの変更を行えます。継続する場合はnext()を呼び出し、リクエストを拒否する場合は例外をスローします。
const logger = t.middleware(async ({ path, next }) => {
console.log('calling', path);
return next();
});認証ミドルウェア
よく使われるミドルウェアとして、認証を強制するものがあります。コンテキストにユーザーが存在しない場合はUNAUTHORIZEDエラーをスローし、存在する場合はリゾルバーへ処理を続けます。
import { TRPCError } from '@trpc/server';
const isAuthed = t.middleware(({ ctx, next }) => {
if (!ctx.user) {
throw new TRPCError({ code: 'UNAUTHORIZED' });
}
return next();
});nextによるコンテキストの絞り込み
ミドルウェアは、新しいctxをnextに渡すことで、コンテキスト型をより限定できます。認証チェックの後はユーザーの存在が保証されるため、userの型をnullの可能性がある状態からnullではない状態へ絞り込みます。
const isAuthed = t.middleware(({ ctx, next }) => {
if (!ctx.user) throw new TRPCError({ code: 'UNAUTHORIZED' });
return next({ ctx: { user: ctx.user } }); // user now non-null
});保護されたプロシージャの構築
.useでミドルウェアを接続すると、再利用可能な保護されたプロシージャを作成できます。これを基に構築したプロシージャでは認証が必須となり、nullではないユーザーを利用できます。
export const protectedProcedure = t.procedure.use(isAuthed);
const secret = protectedProcedure.query(({ ctx }) => {
return 'Hello ' + ctx.user.name; // user is guaranteed
});パブリックと保護付き
これで、公開エンドポイント用のpublicProcedureと、認証済みユーザー向けのprotectedProcedureという2つの構築要素が使えるようになりました。適切なベースを選ぶことで、アクセス要件を型レベルと実行時の両方で文書化し、強制できます。
const ping = publicProcedure.query(() => 'pong');
const account = protectedProcedure.query(({ ctx }) => ctx.user);型付きctxの伝播
絞り込まれたコンテキストは伝播します。protectedProcedureによってctx.userの存在が保証されるため、それを基に構築されたすべてのリゾルバーでは、再確認することなくnullではない型を利用できます。ミドルウェアによって、この不変条件を1度だけ定義できます。
// In any protectedProcedure resolver:
// ctx.user is User, not User | nullミドルウェアの合成
ミドルウェアは.useを連鎖させて合成します。ログ記録、認証、ロールチェックの順に適用することもできます。それぞれが順番に実行され、次のミドルウェアに向けてコンテキストをさらに絞り込めます。
const adminProcedure = protectedProcedure.use(({ ctx, next }) => {
if (ctx.user.role !== 'admin') {
throw new TRPCError({ code: 'FORBIDDEN' });
}
return next();
});全体像
コンテキストがリクエストごとのデータを提供し、ミドルウェアがそれを保護して絞り込み、専用のプロシージャがその保証を組み込みます。入力スキーマと型付きクライアントを組み合わせることで、実行時とコンパイル時の両方で、エンドツーエンドに安全なAPIを構築できます。
// createContext -> ctx
// middleware -> auth + narrowing
// protectedProcedure -> guaranteed ctx.user
// typed client -> end-to-end safety確認テスト
コンテキストとミドルウェアについての理解度を確認します。
まとめ
コンテキストとミドルウェアを使ってtRPC APIを保護しました。
createContextがリクエストごとの共有データを構築し、initTRPC.contextによって型付けされます。- ミドルウェアはリゾルバーの前に実行され、コンテキストを保護して絞り込みます。
ctxをnextに渡すことで、その型を絞り込めます。protectedProcedureに認証を組み込むことで、リゾルバーはnullではないユーザーを利用できます。
これでエンドツーエンドの型安全性コースは完了です。
よくある質問
「ミドルウェアとコンテキスト」レッスンは無料ですか？
はい。「ミドルウェアとコンテキスト」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「ミドルウェアとコンテキスト」で何を学びますか？
プロシージャに認証と共有コンテキストを追加します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「ミドルウェアとコンテキスト」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- tRPCのアーキテクチャ
- ルーターとプロシージャの定義
- クライアントとサーバー間の型推論
- ミドルウェアとコンテキスト