Backend For Frontend (BFF) Samples

This section contains a collection of clients using our BFF security framework.

JavaScript Frontend

This sample demonstrates a vanilla JavaScript SPA secured by the BFF. You will learn how to call /bff/user to retrieve session claims, wire up login/logout links, and make CSRF-protected API calls using X-CSRF: 1 — without any JS framework dependencies.

JavaScript Frontend Sample Vanilla JS SPA with BFF: session claims, login/logout, and CSRF-protected API calls

ReactJs Frontend

This sample shows how to integrate React with the BFF framework. You will learn how to manage login state via /bff/user, protect routes based on session claims, and proxy API requests through the BFF with automatic token forwarding.

ReactJS Frontend Sample React SPA with BFF: session-driven auth state, protected routes, and token-forwarded API calls

Angular Frontend

This sample shows how to integrate Angular with the BFF framework. You will learn how to build an Angular auth service backed by /bff/user, add an HTTP interceptor for the CSRF header, and handle 401 redirects gracefully.

Angular Frontend Sample Angular SPA with BFF: auth service, CSRF interceptor, and 401 redirect handling

Vue Frontend Community

This sample (contributed by @Marco Cabrera) shows how to integrate Vue 3 with the BFF framework. You will learn how to expose session state from /bff/user in a Vue composable and make authenticated API calls with CSRF protection.

Vue Frontend Sample (Community) Vue 3 SPA with BFF: session composable, CSRF-protected API calls

Blazor WASM

This sample shows how to use Blazor WebAssembly as the frontend with the BFF host. You will learn how to configure AuthorizationMessageHandler to forward tokens from the BFF session and call backend APIs securely from client-side Blazor code.

Blazor WASM Sample Blazor WASM with BFF: AuthorizationMessageHandler and secure API calls from the browser

Blazor Auto Rendering

This sample demonstrates Blazor Auto rendering mode (server-side prerender + WASM hydration) combined with BFF authentication. You will learn how to share auth state across render modes and avoid common pitfalls with interactive components that call protected APIs.

Blazor Auto Rendering Sample Blazor Auto mode with BFF: shared auth state across server-side and WASM render modes

YARP Integration

This sample shows how to use the Duende BFF extensions for Microsoft YARP to proxy API requests. You will learn how to configure YARP routes with BFF token forwarding, eliminating the need for manual AddRemoteApis registration.

YARP Integration Sample BFF with YARP: token-forwarding reverse proxy routes for remote APIs

OpenAPI

This sample shows how to expose and consume an OpenAPI (Swagger) spec from a BFF-protected API. You will learn how to configure Swagger UI to authenticate via the BFF session and make test requests without needing a separate bearer token.

OpenAPI Sample BFF with OpenAPI: Swagger UI authenticated via BFF session cookies

Separate Host for UI

This sample shows how to run the frontend (e.g. a dev Vite server) on a different origin from the BFF host and use CORS to allow cross-site session and API requests. You will learn how to configure AllowedOrigins, CORS policy, and cookie SameSite settings for split-host development and production deployments.

Separate Host for UI Sample Split-host BFF: CORS configuration for frontend and backend on different origins

Docker Hosting Community

This sample (contributed by @Marco Cabrera) shows how to run the BFF host and IdentityServer together using Docker Compose. You will learn how to configure networking between containers, set authority URLs, and handle Data Protection key persistence in a containerized environment.

Docker Sample (Community) BFF + IdentityServer in Docker Compose: container networking and Data Protection key persistence

DPoP

This sample shows how to configure the BFF for DPoP (Demonstrating Proof of Possession) so that all tokens are sender-constrained. You will learn how to enable DPoP on both the BFF and the downstream API, preventing token replay attacks even if tokens are intercepted.

DPoP Sample BFF with DPoP: sender-constrained tokens to prevent token replay attacks

Token Exchange using the IAccessTokenRetriever

This sample shows how to implement a custom IAccessTokenRetriever that performs RFC 8693 token exchange for impersonation. When logged in as Alice you receive a token scoped to Bob, and vice versa — demonstrating how to swap or enrich tokens before they are forwarded to downstream APIs.

Token Exchange Sample Custom IAccessTokenRetriever with RFC 8693 token exchange for user impersonation

New User Onboarding with Blazor Auto Rendering Community

This sample (contributed by @hugh-maaskant) shows how to handle a new-user onboarding flow where additional profile data is collected by the application — not the identity provider. You will learn how to intercept post-login redirects, store onboarding data in the application database, and resume the original request after onboarding completes.

New User Onboarding Sample (Community) New user onboarding with Blazor Auto: intercept post-login, collect profile data in app DB

Feedback

Feel free to ask the developer community if you are looking for a particular sample and can’t find it here.

Developer Community Forum Join the Duende Developer Community for discussions and feedback