TypeScript Academy · Leçon

Intergiciel et contexte

Ajouter l’authentification et un contexte partagé aux procédures.

Intergiciel et contexte est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 4 leçons au total.

Qu’est-ce que le contexte

Chaque requête tRPC transporte un contexte : des données partagées accessibles à toutes les procédures, comme le client de base de données, la requête et l’utilisateur actuel. Vous le construisez une fois par requête avec une fonction createContext.

export async function createContext({ req }: { req: Request }) {
  const token = req.headers.get('authorization');
  const user = await getUserFromToken(token);
  return { user };
}

Typer le contexte

tRPC infère le type du contexte à partir de createContext et le transmet à chaque procédure. Vous initialisez l’instance avec ce type de contexte afin que les résolveurs voient ctx correctement typé.

import { initTRPC } from '@trpc/server';

type Context = Awaited<ReturnType<typeof createContext>>;
const t = initTRPC.context<Context>().create();

Lire ctx dans un résolveur

Dans toute procédure, le contexte est disponible sous la forme de ctx et est entièrement typé. Ici, une procédure lit l’utilisateur actuel depuis le contexte.

const me = t.procedure.query(({ ctx }) => {
  // ctx.user is typed from createContext
  return ctx.user;
});

Qu’est-ce que le middleware

Le middleware s’exécute avant le résolveur d’une procédure. Il peut vérifier les autorisations, journaliser des informations ou modifier le contexte. Il appelle next() pour continuer ou lève une exception pour rejeter la requête.

const logger = t.middleware(async ({ path, next }) => {
  console.log('calling', path);
  return next();
});

Un middleware d’authentification

Un middleware courant impose l’authentification. Si aucun utilisateur n’est présent dans le contexte, il lève une erreur UNAUTHORIZED ; sinon, il poursuit vers le résolveur.

import { TRPCError } from '@trpc/server';

const isAuthed = t.middleware(({ ctx, next }) => {
  if (!ctx.user) {
    throw new TRPCError({ code: 'UNAUTHORIZED' });
  }
  return next();
});

Raffiner le contexte avec l’étape suivante

Le middleware peut affiner le type du contexte en transmettant un nouveau ctx à next. Après la vérification de l’authentification, la présence de l’utilisateur est garantie ; nous pouvons donc restreindre user du type éventuellement nul au type non nul.

const isAuthed = t.middleware(({ ctx, next }) => {
  if (!ctx.user) throw new TRPCError({ code: 'UNAUTHORIZED' });
  return next({ ctx: { user: ctx.user } }); // user now non-null
});

Construire une procédure protégée

Associez le middleware avec .use pour créer une procédure protégée réutilisable. Toute procédure construite à partir de celle-ci exige une authentification et dispose d’un utilisateur non nul.

export const protectedProcedure = t.procedure.use(isAuthed);

const secret = protectedProcedure.query(({ ctx }) => {
  return 'Hello ' + ctx.user.name; // user is guaranteed
});

Public ou protégé

Vous disposez maintenant de deux éléments de construction : publicProcedure pour les points d’accès ouverts et protectedProcedure pour ceux qui nécessitent une authentification. Choisir la bonne base documente et impose l’accès au niveau des types comme à l’exécution.

const ping = publicProcedure.query(() => 'pong');
const account = protectedProcedure.query(({ ctx }) => ctx.user);

Propagation typée du contexte

Le contexte affiné se propage : comme protectedProcedure garantit la présence de ctx.user, chaque résolveur construit à partir de celui-ci voit le type non nul sans effectuer une nouvelle vérification. Le middleware encode une seule fois cet invariant.

// In any protectedProcedure resolver:
// ctx.user is User, not User | null

Composer des middleware

Les middleware se composent en enchaînant .use. Vous pouvez appliquer la journalisation, puis l’authentification, puis une vérification du rôle. Chaque middleware s’exécute dans l’ordre et peut affiner davantage le contexte pour le suivant.

const adminProcedure = protectedProcedure.use(({ ctx, next }) => {
  if (ctx.user.role !== 'admin') {
    throw new TRPCError({ code: 'FORBIDDEN' });
  }
  return next();
});

Vue d’ensemble

Le contexte fournit les données propres à chaque requête, le middleware les protège et les affine, et les procédures spécialisées intègrent ces garanties. Avec les schémas d’entrée et le client typé, vous obtenez une API sûre à l’exécution et à la compilation, de bout en bout.

// createContext -> ctx
// middleware -> auth + narrowing
// protectedProcedure -> guaranteed ctx.user
// typed client -> end-to-end safety

Vérification rapide

Testez votre compréhension du contexte et du middleware.

Récapitulatif

Vous avez sécurisé une API tRPC avec un contexte et un middleware.

createContext construit les données partagées propres à chaque requête, dont le type est fourni par initTRPC.context.
Le middleware s’exécute avant les résolveurs pour protéger et affiner le contexte.
Transmettre ctx à next affine son type.
protectedProcedure intègre l’authentification afin que les résolveurs obtiennent un utilisateur non nul.

Vous avez terminé le cours sur la sûreté des types de bout en bout.

Questions Fréquemment Posées

La leçon « Intergiciel et contexte » est-elle gratuite ?

Oui — le texte complet de « Intergiciel et contexte » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Intergiciel et contexte » ?

Ajouter l’authentification et un contexte partagé aux procédures. Tu pratiques TypeScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer TypeScript Academy ?

Aucune expérience préalable n'est requise. TypeScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Intergiciel et contexte » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon TypeScript Academy ?

Oui. Chaque leçon TypeScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à TypeScript Academy