TypeScript Academy · Les

Middleware en context

Voeg authenticatie en gedeelde context toe aan procedures

Les 4 van 413 stappen

Middleware en context is een gratis TypeScript Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject TypeScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus TypeScript Academy bevat in totaal 4 lessen.

Wat is context

Elk tRPC-verzoek bevat een context: gedeelde gegevens die beschikbaar zijn voor alle procedures, zoals de databaseclient, het verzoek en de huidige gebruiker. Je maakt deze één keer per verzoek aan met een functie createContext.

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

De context typeren

tRPC leidt het contexttype af uit createContext en geeft het door aan elke procedure. Je initialiseert de instantie met dat contexttype, zodat resolvers ctx correct getypeerd zien.

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

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

ctx in een resolver lezen

Binnen elke procedure is de context beschikbaar als ctx en volledig getypeerd. Hier leest een procedure de huidige gebruiker uit de context.

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

Wat is middleware

Middleware wordt vóór een procedure-resolver uitgevoerd. Deze kan machtigingen controleren, gegevens vastleggen of de context wijzigen. De middleware roept next() aan om door te gaan of werpt een fout op om het verzoek af te wijzen.

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

Authenticatiemiddleware

Een gebruikelijke middleware dwingt authenticatie af. Als er geen gebruiker in de context staat, werpt de middleware een fout UNAUTHORIZED op; anders gaat ze door naar de resolver.

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

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

De context verfijnen met next

Middleware kan het contexttype verfijnen door een nieuwe ctx aan next door te geven. Na de authenticatiecontrole weet je zeker dat de gebruiker aanwezig is, dus verfijnen we user van mogelijk null naar niet-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
});

Een beveiligde procedure bouwen

Koppel de middleware met .use om een herbruikbare beveiligde procedure te maken. Elke procedure die hierop wordt gebaseerd, vereist authenticatie en ziet een niet-null gebruiker.

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

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

Openbaar tegenover beveiligd

Je hebt nu twee bouwstenen: publicProcedure voor openbare eindpunten en protectedProcedure voor eindpunten waarvoor authenticatie nodig is. Door de juiste basis te kiezen, documenteer en dwing je toegang af op type- en uitvoeringsniveau.

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

Doorgifte van getypeerde ctx

De verfijnde context wordt verder doorgegeven: omdat protectedProcedure garandeert dat ctx.user bestaat, ziet elke daarop gebaseerde resolver het niet-null-type zonder opnieuw te controleren. De middleware legt deze vaste voorwaarde één keer vast.

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

Middleware combineren

Je combineert middleware door .use aan elkaar te koppelen. Je kunt bijvoorbeeld eerst gegevens vastleggen, daarna authenticatie uitvoeren en vervolgens een rol controleren. Elke middleware wordt in volgorde uitgevoerd en kan de context voor de volgende verder verfijnen.

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

Het volledige beeld

Context levert gegevens per verzoek, middleware beveiligt en verfijnt die gegevens en gespecialiseerde procedures nemen deze garanties op. In combinatie met invoerschema's en de getypeerde client krijg je een API die zowel tijdens de uitvoering als tijdens de compilatie veilig is, van begin tot eind.

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

Korte controle

Controleer je begrip van context en middleware.

Beantwoord dit in de interactieve les

Samenvatting

Je hebt een tRPC-API beveiligd met context en middleware.

createContext maakt gedeelde gegevens per verzoek aan, getypeerd via initTRPC.context.
Middleware wordt vóór resolvers uitgevoerd om de context te beveiligen en te verfijnen.
Door ctx aan next door te geven, verfijn je het type ervan.
protectedProcedure neemt authenticatie op, zodat resolvers een niet-null gebruiker krijgen.

Je hebt de cursus over typeveiligheid van begin tot eind voltooid.

Gratis beginnen

Leer TypeScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 101
Lessen: 352

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Middleware en context” gratis?

Ja — de volledige tekst van “Middleware en context” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus TypeScript Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus TypeScript Academy bevat in totaal 4 lessen.

Wat leer ik in “Middleware en context”?

Voeg authenticatie en gedeelde context toe aan procedures Je oefent met TypeScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met TypeScript Academy te beginnen?

Ervaring vooraf is niet nodig. TypeScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.

Hoe lang duurt de les “Middleware en context”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over TypeScript Academy?

Ja. Elke les over TypeScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar TypeScript Academy