Mengintegrasikan tRPC dengan React Query dan Autentikasi

Konteks tRPC adalah objek yang dibuat baru untuk setiap permintaan oleh fungsi createTRPCContext. Konteks ini dapat berisi klien basis data, sesi terautentikasi, header permintaan, atau data per permintaan apa pun yang diperlukan prosedur Anda.

Pembuatan konteks berjalan sebelum prosedur apa pun, sehingga menjadi tempat yang tepat untuk autentikasi dan penyiapan koneksi basis data.

Di createTRPCContext, panggil getServerSession(authOptions) dari next-auth/next. Lampirkan hasilnya ke objek konteks: return { session: await getServerSession(authOptions), db }. Semua prosedur sekarang memiliki akses ke ctx.session.

Jika session bernilai null, pengguna belum terautentikasi. Prosedur dapat memeriksanya untuk mengembalikan data secara kondisional atau melempar kesalahan.

Tentukan middleware yang memeriksa ctx.session: const isAuthenticated = t.middleware(({ ctx, next }) => { if (!ctx.session) throw new TRPCError({ code: 'UNAUTHORIZED' }); return next({ ctx: { session: ctx.session } }); }).

Panggilan next() meneruskan konteks yang dipersempit (sesi yang bukan null) ke middleware berikutnya dan penangan prosedur.

Gabungkan middleware dengan publicProcedure: const protectedProcedure = publicProcedure.use(isAuthenticated). Sekarang setiap penangan yang ditentukan dengan protectedProcedure.query() atau protectedProcedure.mutation() secara otomatis memiliki sesi yang bukan null di ctx.

TypeScript menyimpulkan bahwa ctx.session bukan null di dalam prosedur terlindungi karena middleware akan melempar kesalahan sebelum mencapai penangan.

Ganti publicProcedure dengan protectedProcedure untuk titik akhir yang memerlukan autentikasi: protectedProcedure.query(({ ctx }) => getProfileFor(ctx.session.user.id)). TypeScript mengetahui ctx.session bukan null di sini, sehingga mengakses ctx.session.user.id aman tanpa pemeriksaan null.

Permintaan yang tidak terautentikasi otomatis menerima respons 401 UNAUTHORIZED sebelum penangan dijalankan.

Teruskan fungsi header ke httpBatchLink: links: [httpBatchLink({ url: '/api/trpc', headers: async () => { const token = await getToken(); return { Authorization: 'Bearer ' + token }; } })]. Fungsi tersebut dijalankan sebelum setiap kumpulan permintaan.

Ini digunakan saat mengautentikasi tRPC dari klien React Native atau klien non-Next.js apa pun yang mengelola token autentikasinya sendiri.

Untuk SSR di Next.js Pages Router, buat pembantu sisi server: createServerSideHelpers({ router: appRouter, ctx: await createContext({ req, res }) }). Gunakan helpers.post.getAll.prefetch() dalam getServerSideProps.

Lakukan dehidrasi pada status yang telah diambil sebelumnya dengan dehydrate(queryClient) dan teruskan sebagai props. Di klien, QueryClient melakukan hidrasi dari status ini, sehingga pengambilan ulang pada pemuatan pertama dapat dihindari.

Bungkus _app.tsx Next.js Anda dengan Hydrate dari @tanstack/react-query. Teruskan pageProps.trpcState ke prop state. Ini memulihkan cache kueri yang telah diambil sebelumnya di klien dari status server yang diserialisasi.

Dengan penyiapan ini, pengguna melihat halaman yang terisi penuh segera tanpa indikator pemuatan sisi klien saat navigasi awal.

Lempar TRPCError dengan kode semantik HTTP yang sesuai: UNAUTHORIZED (401), FORBIDDEN (403), NOT_FOUND (404), BAD_REQUEST (400), INTERNAL_SERVER_ERROR (500). Klien tRPC memetakan ini ke status kesalahan yang sesuai dalam hasil hook.

Bidang message dapat berisi detail yang ditujukan kepada pengguna, tetapi hindari membocorkan informasi sensitif server dalam pesan kesalahan produksi.

tRPC berfungsi dengan klien React Native menggunakan tipe AppRouter yang sama. Ganti httpBatchLink dengan httpLink (RN fetch berfungsi sama) dan konfigurasikan header autentikasi. Adaptor @trpc/react-query berfungsi identik dengan penyiapan web.

Ini berarti satu repositori dapat berbagi satu perute tRPC antara aplikasi web Next.js dan aplikasi Expo React Native, dengan keamanan tipe penuh pada keduanya.

Perluas pola middleware untuk akses berbasis peran: periksa ctx.session.user.role dan lempar TRPCError({ code: 'FORBIDDEN' }) jika perannya tidak memadai. Buat adminProcedure = publicProcedure.use(isAdmin) untuk titik akhir khusus admin.

Tumpuk beberapa middleware untuk otorisasi kompleks: publicProcedure.use(isAuthenticated).use(hasFeatureFlag('beta')).query(...).

Bagaimana prosedur terlindungi dibuat di tRPC untuk memberlakukan autentikasi?

Konteks tRPC dibuat per permintaan dan menyimpan sesi, klien basis data, serta data lain yang tercakup dalam permintaan. Prosedur terlindungi dibuat dengan menggabungkan middleware pemeriksa sesi ke publicProcedure menggunakan .use(). Perenderan sisi server menggunakan createServerSideHelpers untuk mengambil data sebelumnya dan Hydrate untuk memulihkan cache di klien.

Header autentikasi untuk klien non-Next.js diteruskan melalui opsi headers pada httpBatchLink.