BFF Pattern — Securing Modern SPAs with ASP.NET Core and YARP

var builder = WebApplication.CreateBuilder(args);

// 1. Authentication: Cookie + OIDC
builder.Services.AddAuthentication(options =>
{
    options.DefaultScheme = "cookie";
    options.DefaultChallengeScheme = "oidc";
    options.DefaultSignOutScheme = "oidc";
})
.AddCookie("cookie", options =>
{
    options.Cookie.Name = "__Host-bff";
    options.Cookie.SameSite = SameSiteMode.Lax;
    options.Cookie.HttpOnly = true;
    options.Cookie.SecurePolicy = CookieSecurePolicy.Always;
    options.ExpireTimeSpan = TimeSpan.FromHours(8);
    options.SlidingExpiration = true;

    // When cookie expires or is invalid → return 401 instead of redirect
    options.Events.OnRedirectToLogin = ctx =>
    {
        ctx.Response.StatusCode = 401;
        return Task.CompletedTask;
    };
})
.AddOpenIdConnect("oidc", options =>
{
    options.Authority = builder.Configuration["Oidc:Authority"];
    options.ClientId = builder.Configuration["Oidc:ClientId"];
    options.ClientSecret = builder.Configuration["Oidc:ClientSecret"];

    options.ResponseType = "code";        // Authorization Code Flow
    options.ResponseMode = "query";       // SameSite cookie compatible
    options.UsePkce = true;               // PKCE is mandatory
    options.SaveTokens = true;            // Store tokens in session
    options.MapInboundClaims = false;     // Keep original claim names

    options.Scope.Clear();
    options.Scope.Add("openid");
    options.Scope.Add("profile");
    options.Scope.Add("offline_access");  // For refresh token
    options.Scope.Add("api");             // Downstream API scope

    options.GetClaimsFromUserInfoEndpoint = true;
});

// 2. YARP Reverse Proxy
builder.Services.AddReverseProxy()
    .LoadFromConfig(builder.Configuration.GetSection("ReverseProxy"))
    .AddTransforms(ctx =>
    {
        ctx.AddRequestTransform(async transformCtx =>
        {
            var token = await transformCtx.HttpContext
                .GetTokenAsync("access_token");
            if (!string.IsNullOrEmpty(token))
            {
                transformCtx.ProxyRequest.Headers
                    .Authorization = new("Bearer", token);
            }
        });
    });

var app = builder.Build();

// 3. Middleware pipeline
app.UseAuthentication();
app.UseAuthorization();

// 4. BFF endpoints
app.MapGet("/bff/login", () => Results.Challenge(
    new AuthenticationProperties { RedirectUri = "/" }))
    .AllowAnonymous();

app.MapGet("/bff/logout", async (HttpContext ctx) =>
{
    await ctx.SignOutAsync("cookie");
    await ctx.SignOutAsync("oidc");
}).RequireAuthorization();

app.MapGet("/bff/user", (HttpContext ctx) =>
{
    var user = ctx.User;
    if (user.Identity?.IsAuthenticated != true)
        return Results.Json(new { isAuthenticated = false });

    return Results.Json(new
    {
        isAuthenticated = true,
        claims = user.Claims.Select(c => new { c.Type, c.Value })
    });
}).AllowAnonymous();

// 5. YARP proxy — authenticated requests only
app.MapReverseProxy().RequireAuthorization();

// 6. SPA fallback
app.MapFallbackToFile("index.html");

app.Run();

{
  "Oidc": {
    "Authority": "https://login.microsoftonline.com/{tenant-id}/v2.0",
    "ClientId": "your-client-id",
    "ClientSecret": "your-client-secret"
  },
  "ReverseProxy": {
    "Routes": {
      "api-route": {
        "ClusterId": "api-cluster",
        "Match": { "Path": "/api/{**catch-all}" },
        "Transforms": [
          { "PathRemovePrefix": "/api" }
        ]
      }
    },
    "Clusters": {
      "api-cluster": {
        "Destinations": {
          "primary": { "Address": "https://api.myapp.com" }
        }
      }
    }
  }
}

// BffCsrfMiddleware.cs
public class BffCsrfMiddleware
{
    private readonly RequestDelegate _next;

    public BffCsrfMiddleware(RequestDelegate next) => _next = next;

    public async Task InvokeAsync(HttpContext context)
    {
        // Only check for API proxy routes, skip /bff/* endpoints
        if (context.Request.Path.StartsWithSegments("/api"))
        {
            if (!context.Request.Headers.ContainsKey("X-CSRF"))
            {
                context.Response.StatusCode = 403;
                await context.Response
                    .WriteAsync("Missing X-CSRF header");
                return;
            }
        }
        await _next(context);
    }
}

// Register in Program.cs (before MapReverseProxy):
app.UseMiddleware<BffCsrfMiddleware>();

// composables/useAuth.ts
export function useAuth() {
  const user = ref<UserInfo | null>(null)
  const isLoading = ref(true)

  async function fetchUser() {
    try {
      const res = await fetch('/bff/user', {
        credentials: 'include'   // Send cookies
      })
      user.value = await res.json()
    } finally {
      isLoading.value = false
    }
  }

  function login() {
    window.location.href = '/bff/login'
  }

  function logout() {
    window.location.href = '/bff/logout'
  }

  onMounted(fetchUser)

  return { user, isLoading, login, logout }
}

// composables/useApi.ts
export function useApi() {
  async function apiFetch(path: string, options: RequestInit = {}) {
    const res = await fetch(`/api${path}`, {
      ...options,
      credentials: 'include',
      headers: {
        ...options.headers,
        'X-CSRF': '1',           // Anti-CSRF header
        'Content-Type': 'application/json',
      },
    })

    if (res.status === 401) {
      window.location.href = '/bff/login'
      throw new Error('Unauthorized')
    }
    return res
  }

  return { apiFetch }
}

// Handle token refresh in YARP Transform
ctx.AddRequestTransform(async transformCtx =>
{
    var httpCtx = transformCtx.HttpContext;
    var token = await httpCtx.GetTokenAsync("access_token");
    var expiresAt = await httpCtx.GetTokenAsync("expires_at");

    // Check if token is about to expire (60-second buffer)
    if (DateTimeOffset.TryParse(expiresAt, out var exp)
        && exp <= DateTimeOffset.UtcNow.AddSeconds(60))
    {
        var refreshToken = await httpCtx.GetTokenAsync("refresh_token");
        var newTokens = await RefreshAccessTokenAsync(
            httpCtx, refreshToken);

        if (newTokens != null)
        {
            token = newTokens.AccessToken;
            // Update session with new tokens
            var authResult = await httpCtx
                .AuthenticateAsync("cookie");
            authResult.Properties.UpdateTokenValue(
                "access_token", newTokens.AccessToken);
            authResult.Properties.UpdateTokenValue(
                "refresh_token", newTokens.RefreshToken);
            authResult.Properties.UpdateTokenValue(
                "expires_at", newTokens.ExpiresAt.ToString("o"));
            await httpCtx.SignInAsync("cookie",
                authResult.Principal, authResult.Properties);
        }
    }

    if (!string.IsNullOrEmpty(token))
    {
        transformCtx.ProxyRequest.Headers
            .Authorization = new("Bearer", token);
    }
});

// When running BFF on multiple instances (k8s, Azure Container Apps)
// you need to share the Data Protection key ring
builder.Services.AddDataProtection()
    .PersistKeysToAzureBlobStorage(
        connectionString, "data-protection", "keys.xml")
    .ProtectKeysWithAzureKeyVault(
        new Uri("https://mykeyvault.vault.azure.net/keys/dp-key"),
        new DefaultAzureCredential());

// Or with Redis:
builder.Services.AddDataProtection()
    .PersistKeysToStackExchangeRedis(
        ConnectionMultiplexer.Connect("redis:6379"),
        "DataProtection-Keys");

{
  "ReverseProxy": {
    "Routes": {
      "users": {
        "ClusterId": "user-service",
        "Match": { "Path": "/api/users/{**rest}" },
        "Transforms": [
          { "PathPattern": "/users/{**rest}" }
        ]
      },
      "orders": {
        "ClusterId": "order-service",
        "Match": { "Path": "/api/orders/{**rest}" },
        "Transforms": [
          { "PathPattern": "/orders/{**rest}" }
        ]
      },
      "products": {
        "ClusterId": "product-service",
        "Match": { "Path": "/api/products/{**rest}" },
        "Transforms": [
          { "PathPattern": "/products/{**rest}" }
        ]
      }
    },
    "Clusters": {
      "user-service": {
        "Destinations": {
          "primary": { "Address": "https://users.internal:5001" }
        }
      },
      "order-service": {
        "Destinations": {
          "primary": { "Address": "https://orders.internal:5002" }
        }
      },
      "product-service": {
        "Destinations": {
          "primary": { "Address": "https://products.internal:5003" }
        }
      }
    }
  }
}

# Docker Compose
services:
  bff:
    build: ./MyApp.Bff
    ports:
      - "443:8080"
    environment:
      - ASPNETCORE_URLS=http://+:8080
    volumes:
      - ./MyApp.Web/dist:/app/wwwroot  # SPA static files

# BFF serves both SPA files (MapFallbackToFile)
# and proxies API requests (YARP)
# → Same origin, zero CORS issues

// If SPA is on CDN (spa.myapp.com) and BFF at api.myapp.com
// → CORS + credentials required

builder.Services.AddCors(options =>
{
    options.AddPolicy("spa", policy =>
    {
        policy.WithOrigins("https://spa.myapp.com")
            .AllowAnyHeader()
            .AllowAnyMethod()
            .AllowCredentials();  // Required for cookies
    });
});

// Cookie config must change:
options.Cookie.SameSite = SameSiteMode.None;  // Cross-site
options.Cookie.SecurePolicy = CookieSecurePolicy.Always;
options.Cookie.Domain = ".myapp.com";  // Shared parent domain