Intégrer tRPC à React Query et à l’authentification

Le contexte tRPC est un objet créé à chaque requête par la fonction createTRPCContext. Il peut contenir le client de base de données, la session authentifiée, les en-têtes de la requête ou toute donnée propre à la requête dont vos procédures ont besoin.

La création du contexte s’exécute avant toute procédure, ce qui en fait l’endroit approprié pour configurer l’authentification et la connexion à la base de données.

Dans createTRPCContext, appelez getServerSession(authOptions) depuis next-auth/next. Ajoutez le résultat à l’objet de contexte : return { session: await getServerSession(authOptions), db }. Toutes les procédures ont désormais accès à ctx.session.

Si session vaut null, l’utilisateur n’est pas authentifié. Les procédures peuvent le vérifier pour renvoyer conditionnellement des données ou lever une erreur.

Définissez un middleware qui vérifie ctx.session : const isAuthenticated = t.middleware(({ ctx, next }) => { if (!ctx.session) throw new TRPCError({ code: 'UNAUTHORIZED' }); return next({ ctx: { session: ctx.session } }); }).

L’appel next() transmet le contexte restreint (session non nulle) aux middlewares suivants et au gestionnaire de la procédure.

Composez le middleware avec publicProcedure : const protectedProcedure = publicProcedure.use(isAuthenticated). Désormais, tout gestionnaire défini avec protectedProcedure.query() ou protectedProcedure.mutation() dispose automatiquement d’une session non nulle dans ctx.

TypeScript déduit que ctx.session est non nul dans les procédures protégées, car le middleware aurait levé une erreur avant d’atteindre le gestionnaire.

Remplacez publicProcedure par protectedProcedure pour les points de terminaison qui nécessitent une authentification : protectedProcedure.query(({ ctx }) => getProfileFor(ctx.session.user.id)). TypeScript sait que ctx.session n’est pas nul ici ; l’accès à ctx.session.user.id est donc sûr sans vérification de nullité.

Les requêtes non authentifiées reçoivent automatiquement une réponse 401 UNAUTHORIZED avant l’exécution du gestionnaire.

Transmettez une fonction headers à httpBatchLink : links: [httpBatchLink({ url: '/api/trpc', headers: async () => { const token = await getToken(); return { Authorization: 'Bearer ' + token }; } })]. La fonction s’exécute avant chaque lot de requêtes.

Cette méthode est utilisée pour authentifier tRPC depuis un client React Native ou tout client non-Next.js qui gère ses propres jetons d’authentification.

Pour le rendu côté serveur avec le routeur Pages de Next.js, créez une aide côté serveur : createServerSideHelpers({ router: appRouter, ctx: await createContext({ req, res }) }). Utilisez helpers.post.getAll.prefetch() dans getServerSideProps.

Déshydratez l’état préchargé avec dehydrate(queryClient) et transmettez-le comme propriétés. Côté client, QueryClient s’hydrate à partir de cet état, ce qui évite une nouvelle récupération au premier chargement.

Entourez votre _app.tsx Next.js de Hydrate provenant de @tanstack/react-query. Transmettez pageProps.trpcState à la propriété state. Cela restaure côté client le cache de requêtes préchargé à partir de l’état serveur sérialisé.

Avec cette configuration, les utilisateurs voient immédiatement des pages entièrement remplies, sans indicateur de chargement côté client lors de la navigation initiale.

Levez TRPCError avec des codes sémantiques HTTP appropriés : UNAUTHORIZED (401), FORBIDDEN (403), NOT_FOUND (404), BAD_REQUEST (400), INTERNAL_SERVER_ERROR (500). Le client tRPC les convertit en états d’erreur appropriés dans le résultat du hook.

Le champ message peut contenir des détails destinés à l’utilisateur, mais évitez de divulguer des informations sensibles du serveur dans les messages d’erreur en production.

tRPC fonctionne avec les clients React Native en utilisant le même type AppRouter. Remplacez httpBatchLink par httpLink (la récupération RN fonctionne de la même manière) et configurez les en-têtes d’authentification. L’adaptateur @trpc/react-query fonctionne exactement comme dans la configuration web.

Cela signifie qu’un monorepo peut partager un routeur tRPC entre une application web Next.js et une application Expo React Native, avec une sécurité de typage complète dans les deux cas.

Étendez le modèle de middleware pour gérer l’accès selon les rôles : vérifiez ctx.session.user.role et levez TRPCError({ code: 'FORBIDDEN' }) si le rôle est insuffisant. Créez adminProcedure = publicProcedure.use(isAdmin) pour les points de terminaison réservés aux administrateurs.

Empilez plusieurs middlewares pour les autorisations complexes : publicProcedure.use(isAuthenticated).use(hasFeatureFlag('beta')).query(...).

Comment créer une procédure protégée dans tRPC pour imposer l’authentification ?

Le contexte tRPC est créé pour chaque requête et contient la session, le client de base de données ainsi que d’autres données propres à la requête. Les procédures protégées sont créées en composant un middleware de vérification de session avec publicProcedure à l’aide de .use(). Le rendu côté serveur utilise createServerSideHelpers pour le préchargement et Hydrate pour restaurer le cache côté client.

Les en-têtes d’authentification des clients non-Next.js sont transmis via l’option headers de httpBatchLink.