Functional Middleware for Secure Server Actions

Snippet

Functional Middleware for Secure Server Actions

Higher-order functions can act as middleware for React Server Actions. This pattern centralizes security concerns like authentication and logging, ensuring they are consistently applied without cluttering individual action logic.

snippet.js

javascript

type Action<T> = (formData: FormData) => Promise<T>;
 
function withAuth<T>(action: Action<T>): Action<T> {
  return async (formData: FormData) => {
    const session = await getSession();
    if (!session) throw new Error("Unauthorized");
    
    // Log action for security auditing
    console.log(`User ${session.userId} performing action`);
    
    return action(formData);
  };
}
 
// Usage in a component or server file
const deletePost = withAuth(async (formData) => {
  'use server';
  await db.posts.delete(formData.get('id'));
});

react

Breakdown

function withAuth<T>(action: Action<T>): Action<T>

A wrapper that takes an action and returns a new version with injected security logic.

if (!session) throw new Error("Unauthorized");

Enforces authorization at the function boundary before the core logic executes.

return action(formData);

Delegates execution to the original action once all checks have passed.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Functional Middleware for Secure Server Actions

Related