blazor-bff-patterns

Implements Blazor BFF patterns for YARP proxying, token forwarding, and cookie-based authentication.

7|3|Updated Sep 23, 2025
One-click install
npx skills add https://github.com/islamu-ngo/Event --skill blazor-bff-patterns-islamu-ngo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: blazor-bff-patterns
Source: https://github.com/islamu-ngo/Event/tree/main/.agents/skills/blazor-bff-patterns
Command: npx skills add https://github.com/islamu-ngo/Event --skill blazor-bff-patterns-islamu-ngo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Blazor Web Apps using the BFF (Backend for Frontend) pattern often mishandle token storage, YARP proxy configuration, and InteractiveAuto rendering constraints, leading to leaked tokens, 401 loops, and broken tenant resolution. ## Core Features & Use Cases - YARP Proxy Configuration: Routes /api/* calls through the BFF with server-side Bearer token attachment and tenant/setup header forwarding. - Token Forwarding Rules: Enforces the handler chain (AccessTokenForwardingHandler, TenantHeaderForwardingHandler, SetupSecretForwardingHandler) so tokens never reach the browser. - Service Layer Patterns: Wraps NSwag API clients behind service interfaces with ApiException handling and safe default returns. - Use Case: When a Blazor WASM component gets repeated 401 errors calling the API, apply this Skill to configure the BFF cookie session, YARP transforms, and a 401 redirect handler instead of exposing tokens client-side. ## Quick Start Apply the blazor-bff-patterns skill to configure YARP proxying and token forwarding for my Blazor InteractiveAuto app.

Frequently Asked Questions about blazor-bff-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I forward access tokens from Blazor BFF to a downstream API?▼

Extract the access token from the server-side cookie session and attach it as a Bearer header using YARP request transforms or an AccessTokenForwardingHandler. Never expose tokens to WebAssembly or browser storage.

How to configure YARP proxy in a Blazor Web App?▼

Proxy /api/* routes through YARP from the Blazor BFF to the API, attaching Bearer tokens server-side and forwarding X-Tenant-Slug and X-Setup-Secret headers when authoritative hints exist. Map Blazor routes before proxy catch-all routes.

Why does HttpContext fail in Blazor InteractiveServer components?▼

HttpContext is unavailable during SignalR circuit execution in InteractiveServer mode. Use a scoped token cache service that captures the token during the initial HTTP request and provides it to HttpClient handlers for the circuit lifetime.

Should Blazor WASM components call the API directly with HttpClient?▼

No. WASM components should call the BFF base address using cookie authentication with a 401 redirect handler. All API calls flow through the BFF, which attaches tokens server-side, keeping the browser free of raw access tokens.

How do I handle API errors in Blazor service layers?▼

Wrap NSwag clients behind service interfaces, catch ApiException, and return safe defaults like empty collections or null. Log warnings at the service layer and let the auth layer handle 401/403 redirects rather than throwing to UI components.