Middleware Autentikasi
Implementasikan pemeriksaan autentikasi menggunakan middleware tRPC untuk melindungi prosedur API Anda.
Middleware Autentikasi adalah pelajaran tRPC End-to-End Type Safe APIs gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar tRPC End-to-End Type Safe APIs, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus tRPC End-to-End Type Safe APIs mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
Protect Your API with Auth
Welcome to this lesson on tRPC authentication middleware! Securing your API is crucial to ensure only authorized users can access sensitive data or perform critical actions.
Middleware in tRPC provides an elegant way to centralize these security checks before any procedure runs.
Why Auth Middleware?
Using middleware for authentication offers significant advantages:
- Centralized Logic: Define authentication rules once and apply them everywhere.
- Reduced Duplication: Avoid writing the same security checks in every API procedure.
- Clean Code: Keep your business logic separate from security concerns.
- Consistency: Ensure all protected endpoints adhere to the same security standards.
Authentication Basics
Before implementing, let's briefly recall common authentication methods:
- Tokens: Such as JWTs (JSON Web Tokens) or API keys, typically sent in an
Authorizationheader. - Sessions: Often managed with cookies, where the server stores session data and the client sends a session ID.
Our middleware will be responsible for validating these credentials.
Context for User Data
Remember that the tRPC context is an object available to all procedures, carrying request-specific data. For authentication, this means our createContext function (from a previous lesson) should parse incoming authentication information (e.g., from headers) and populate the context with user data if available.
Our middleware will then *read* this user data from the context.
Building Auth Middleware
tRPC's t.middleware() function is where the magic happens. It takes an asynchronous function that receives an object with ctx (the context) and next (a function to call the next middleware or the procedure itself).
Inside, you'll check for authentication. If successful, you call next(). If not, you throw a TRPCError.
Simple Authentication Middleware
Here's a runnable TypeScript example that simulates a basic authentication middleware. It checks if a user object exists in the context.
class TRPCError extends Error {
code: string;
constructor(opts: { code: string }) {
super(`TRPCError: ${opts.code}`);
this.code = opts.code;
}
}
type MockContext = { user?: { id: string; name: string } };
type MiddlewareFn = (opts: { ctx: MockContext; next: Function }) => Promise<any>;
const isAuthenticated: MiddlewareFn = async ({ ctx, next }) => {
if (!ctx.user) {
throw new TRPCError({ code: 'UNAUTHORIZED' });
}
return next({
ctx: {
...ctx,
user: ctx.user,
},
});
};
async function runMiddlewareDemo() {
console.log("--- Test with authenticated user ---");
try {
await isAuthenticated({
ctx: { user: { id: "123", name: "Alice" } },
next: async (opts: { ctx: MockContext }) => {
console.log("Middleware passed. User:", opts.ctx.user?.name);
return "Success";
}
});
} catch (error) {
console.error("Error:", error instanceof TRPCError ? error.code : String(error));
}
console.log("\n--- Test with unauthenticated user ---");
try {
await isAuthenticated({
ctx: {}, // No user in context
next: async (opts: { ctx: MockContext }) => {
console.log("Middleware passed (should not happen)");
return "Success";
}
});
} catch (error) {
console.error("Error:", error instanceof TRPCError ? error.code : String(error));
}
}
runMiddlewareDemo();Applying Middleware to Procedures
Once defined, you can apply middleware using the .use() method. This can be done on individual procedures or even entire routers to protect multiple procedures at once.
Middleware can also be chained together, allowing you to combine multiple checks (e.g., authentication then authorization).
A Protected Query Example
Here's how you might apply the isAuthenticated middleware to a specific query procedure. The ctx.user will be guaranteed to exist inside the procedure if the middleware passes.
import { t } from './trpc'; // Your tRPC instance
import { isAuthenticated } from './middleware'; // Your auth middleware
// Imagine 'z' is imported for input validation from Zod
// import { z } from 'zod';
const appRouter = t.router({
publicGreeting: t.procedure
.query(() => {
return "Hello, stranger!";
}),
protectedGreeting: t.procedure
.use(isAuthenticated) // Apply the middleware here
.query(({ ctx }) => {
// ctx.user is guaranteed to exist here due to middleware
return `Welcome, ${ctx.user.name}! You are authenticated.`;
}),
});
// This is a conceptual snippet and not runnable standalone.Handling Unauthorized Access
When the middleware detects an unauthenticated request and throws a TRPCError (e.g., with code: 'UNAUTHORIZED'), tRPC automatically catches this error.
It then sends a standardized error response to the client, allowing your frontend application to gracefully handle the unauthorized access, perhaps by redirecting the user to a login page.
Test Your Auth Middleware Knowledge
You have an isAdmin middleware. You want to protect all procedures within an adminRouter so only administrators can access them. Which is the correct way to apply the middleware?
Authentication Middleware Recap
You've learned how to implement authentication checks using tRPC middleware!
- Authentication middleware centralizes security logic.
- It leverages the tRPC context to access user information.
- You define it using
t.middleware(). - You apply it to procedures or entire routers using
.use(). TRPCErrorensures proper error handling for unauthorized requests.
Next, explore how to build custom middleware chains for more complex scenarios!
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Middleware Autentikasi” gratis?
Ya — teks lengkap “Middleware Autentikasi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus tRPC End-to-End Type Safe APIs, upgrade ke CoddyKit PRO. Kursus tRPC End-to-End Type Safe APIs mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Middleware Autentikasi”?
Implementasikan pemeriksaan autentikasi menggunakan middleware tRPC untuk melindungi prosedur API Anda. Kamu berlatih tRPC End-to-End Type Safe APIs dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai tRPC End-to-End Type Safe APIs?
Tidak diperlukan pengalaman sebelumnya. tRPC End-to-End Type Safe APIs di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Middleware Autentikasi” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran tRPC End-to-End Type Safe APIs ini?
Ya. Setiap pelajaran tRPC End-to-End Type Safe APIs menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Membuat Konteks tRPC
- Middleware Autentikasi
- Rantai Middleware Khusus
- Middleware Logging dan Pengukuran Kinerja