tRPC'yi React Query ve Kimlik Doğrulamayla Entegrasyon

tRPC bağlamı, createTRPCContext işlevi tarafından her istek için baştan oluşturulan bir nesnedir. Bu nesne, yordamlarınızın ihtiyaç duyduğu veritabanı istemcisini, kimliği doğrulanmış oturumu, istek üstbilgilerini veya istek başına diğer verileri içerebilir.

Bağlam oluşturma işlemi herhangi bir yordamdan önce gerçekleşir; bu nedenle kimlik doğrulama ve veritabanı bağlantısı kurulumunu yapmak için doğru yerdir.

createTRPCContext içinde next-auth/next kaynağından getServerSession(authOptions) çağrısını yapın. Sonucu bağlam nesnesine ekleyin: return { session: await getServerSession(authOptions), db }. Artık tüm yordamlar ctx.session değerine erişebilir.

Oturum null ise kullanıcı kimlik doğrulaması yapmamıştır. Yordamlar bunu denetleyerek verileri koşullu olarak döndürebilir veya hata fırlatabilir.

ctx.session değerini denetleyen bir ara katman yazılımı tanımlayın: const isAuthenticated = t.middleware(({ ctx, next }) => { if (!ctx.session) throw new TRPCError({ code: 'UNAUTHORIZED' }); return next({ ctx: { session: ctx.session } }); }).

next() çağrısı, daraltılmış bağlamı (null olmayan oturumla) sonraki ara katman yazılımlarına ve yordam işleyicisine aktarır.

Ara katman yazılımını publicProcedure ile birleştirin: const protectedProcedure = publicProcedure.use(isAuthenticated). Artık protectedProcedure.query() veya protectedProcedure.mutation() ile tanımlanan her işleyici, ctx içinde null olmayan bir oturuma otomatik olarak sahip olur.

TypeScript, işleyiciye ulaşmadan önce ara katman yazılımı hata fırlatmış olacağından, korumalı yordamların içinde ctx.session değerinin null olmadığını çıkarır.

Kimlik doğrulaması gerektiren uç noktalar için publicProcedure yerine protectedProcedure kullanın: protectedProcedure.query(({ ctx }) => getProfileFor(ctx.session.user.id)). TypeScript burada ctx.session değerinin null olmadığını bilir; bu nedenle ctx.session.user.id değerine null denetimi yapmadan güvenle erişebilirsiniz.

Kimlik doğrulaması yapılmamış istekler, işleyici çalıştırılmadan önce otomatik olarak 401 UNAUTHORIZED yanıtı alır.

httpBatchLink'e bir üstbilgi işlevi aktarın: links: [httpBatchLink({ url: '/api/trpc', headers: async () => { const token = await getToken(); return { Authorization: 'Bearer ' + token }; } })]. Bu işlev, her istek grubundan önce çalışır.

Bu yöntem, React Native istemcisinden veya kendi kimlik doğrulama belirteçlerini yöneten Next.js dışı herhangi bir istemciden tRPC ile kimlik doğrulaması yapılırken kullanılır.

Next.js Sayfalar Yönlendiricisi'nde SSR için sunucu taraflı bir yardımcı oluşturun: createServerSideHelpers({ router: appRouter, ctx: await createContext({ req, res }) }). getServerSideProps içinde helpers.post.getAll.prefetch() kullanın.

Önceden getirilen durumu dehydrate(queryClient) ile ayrıştırın ve props olarak aktarın. İstemci tarafında QueryClient bu durumdan hidrate olur ve ilk yüklemede yeniden veri alınmasını önler.

Next.js içindeki _app.tsx dosyasını @tanstack/react-query paketindeki Hydrate ile sarın. pageProps.trpcState değerini state özelliğine aktarın. Bu işlem, serileştirilmiş sunucu durumundaki önceden getirilmiş sorgu önbelleğini istemcide geri yükler.

Bu kurulumla kullanıcılar, ilk gezinmede istemci tarafı yükleme göstergeleri görmeden içeriği tamamen doldurulmuş sayfaları hemen görür.

Uygun HTTP anlamsal kodlarıyla TRPCError fırlatın: UNAUTHORIZED (401), FORBIDDEN (403), NOT_FOUND (404), BAD_REQUEST (400), INTERNAL_SERVER_ERROR (500). tRPC istemcisi bunları kanca sonucundaki uygun hata durumlarına dönüştürür.

Mesaj alanı, kullanıcıya gösterilecek ayrıntıları içerebilir; ancak üretim ortamındaki hata mesajlarında hassas sunucu bilgilerinin açığa çıkmasını önleyin.

tRPC, aynı AppRouter türünü kullanan React Native istemcileriyle çalışır. httpBatchLink'i httpLink ile değiştirin (RN fetch aynı şekilde çalışır) ve kimlik doğrulama üstbilgilerini yapılandırın. @trpc/react-query bağdaştırıcısı, web kurulumuyla aynı şekilde çalışır.

Bu, bir monorepo'nun bir Next.js web uygulaması ile bir Expo React Native uygulaması arasında tek bir tRPC yönlendiricisini paylaşabilmesi ve her ikisinde de tam tür güvenliği sağlaması anlamına gelir.

Rol tabanlı erişim için ara katman yazılımı desenini genişletin: ctx.session.user.role değerini denetleyin ve rol yetersizse TRPCError({ code: 'FORBIDDEN' }) fırlatın. Yalnızca yöneticilere açık uç noktalar için adminProcedure = publicProcedure.use(isAdmin) oluşturun.

Karmaşık yetkilendirme için birden çok ara katman yazılımını üst üste ekleyin: publicProcedure.use(isAuthenticated).use(hasFeatureFlag('beta')).query(...).

Kimlik doğrulamayı zorunlu kılmak için tRPC'de korumalı bir yordam nasıl oluşturulur?

tRPC bağlamı istek başına oluşturulur ve oturumu, veritabanı istemcisini ve istek kapsamındaki diğer verileri içerir. Korumalı yordamlar, oturumu denetleyen bir ara katman yazılımının .use() ile publicProcedure üzerine birleştirilmesiyle oluşturulur. Sunucu taraflı oluşturma, önceden veri getirmek için createServerSideHelpers'ı; istemcide önbelleği geri yüklemek için ise Hydrate'ı kullanır.

Next.js dışındaki istemciler için kimlik doğrulama üstbilgileri, httpBatchLink üzerindeki headers seçeneği aracılığıyla aktarılır.