next-safe-actionplayground
Overview
  • Home
Core
  • Core Actions
  • Validation Errors
  • Middleware
Hooks
  • React Hooks
  • Optimistic Updates
Integrations
  • Form Integration
  • React Hook Form
  • TanStack Query
Framework
  • Navigation & Framework
  • GitHub

Middleware

Logging, auth chains, error handling, and rate limiting.

Logging Middleware
Built-in logging middleware on the base action client that tracks execution time and logs inputs/outputs.

Check the server console for timing logs.

Result:
-
Auth Chain
Two chained .use() middleware calls building context: first adds userId, second adds sessionId.
Result:
-
Error Handling Middleware
Middleware that catches DatabaseError and transforms it into a user-friendly ActionError.
Result:
-
Rate Limiting Middleware
In-memory rate limiter that allows max 5 calls per 10 seconds. Click rapidly to trigger the limit.

Click more than 5 times in 10 seconds to see the rate limit error.

Result:
-
Validated Middleware (useValidated)
Post-validation middleware that receives typed parsedInput. Here it checks resource ownership: post-1 and post-3 are owned by the user, post-2 is not.

useValidated() runs after input validation and receives typed parsedInput. Empty input fails validation (useValidated is skipped entirely), non-owned posts are rejected by the middleware, and owned posts succeed.

Result:
-