This article shows how to implement a web application using backend for frontend security architecture for authentication and consumes data from a downstream API protected using a JWT access token which can only be accessed using an app-to-app access token. The access token is acquired using the OAuth2 client credentials flow and the API does not accept user access tokens from the UI application. OpenIddict is used as the OpenID Connect server. The STS provides both the OAuth2 client and the OpenID Connect client as well as the scope definitions.
Code: https://github.com/damienbod/bff-aspnetcore-angular-downstream-api
The BFF web application is implemented using ASP.NET Core and Angular as the UI tech stack. The Angular part of the web application can only use the ASP.NET Core APIs and secure same site cookies are used to protect the access. The whole application is authenticated using an OpenID Connect confidential code flow client (PKCE). If the web application requires data from the downstream API, a second OAuth client credentials flow is used to acquire the access token. The downstream API does not accept the user delegated access tokens from the UI application.
BFF OIDC code flow client
Implementing the OpenID Connect confidential client is really simple in ASP.NET Core. The AddAuthentication method is used with cookies and OpenID Connect. The cookies are used to store the session and the OpenID Connect is used for the challenge. All server rendered applications are setup like this with small changes required for the OIDC challenge. Due to these small differences, the different OIDC implementations provide specific implementations of the client. These are normally focused and optimized for the specific OIDC servers and do not work good with other OIDC servers. Once you use more than one OIDC server or require multiple clients from the same OIDC server, the client wrappers cause problems and you should revert back to the standards.
var stsServer = configuration["OpenIDConnectSettings:Authority"];
services.AddAuthentication(options =>
{
options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
options.DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme;
})
.AddCookie()
.AddOpenIdConnect(options =>
{
configuration.GetSection("OpenIDConnectSettings").Bind(options);
options.SignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;
options.ResponseType = OpenIdConnectResponseType.Code;
options.SaveTokens = true;
options.GetClaimsFromUserInfoEndpoint = true;
options.TokenValidationParameters = new TokenValidationParameters
{
NameClaimType = "name"
};
});
Yarp Proxy
The Angular UI can only request data from the ASP.NET Core backend using secure http only cookies. The Angular UI is deployed as part of the ASP.NET Core application in production builds. When creating applications, software developers need to use their preferred tools and YARP is used to support this in the development setup. As a further downstream API is used, YARP can also be used to support this. The proxy takes the API request, validates the cookie, uses another access token and forwards the request to the downstream API. YARP has an ITransformProvider interface which is used to implement this. This also means we have two different YARP configuration setups for development and deployments. (test, integration, production).
using System.Net.Http.Headers;
using Yarp.ReverseProxy.Transforms;
using Yarp.ReverseProxy.Transforms.Builder;
namespace BffOpenIddict.Server.ApiClient;
public class JwtTransformProvider : ITransformProvider
{
private readonly ApiTokenCacheClient _apiTokenClient;
public JwtTransformProvider(ApiTokenCacheClient apiTokenClient)
{
_apiTokenClient = apiTokenClient;
}
public void Apply(TransformBuilderContext context)
{
if (context.Route.RouteId == "downstreamapiroute")
{
context.AddRequestTransform(async transformContext =>
{
var access_token = await _apiTokenClient.GetApiToken(
"CC",
"dataEventRecords",
"cc_secret");
transformContext.ProxyRequest.Headers.Authorization
= new AuthenticationHeaderValue("Bearer", access_token);
});
}
}
public void ValidateCluster(TransformClusterValidationContext context)
{
}
public void ValidateRoute(TransformRouteValidationContext context)
{
}
}
The AddReverseProxy is used to add the YARP services.
builder.Services.AddReverseProxy()
.LoadFromConfig(builder.Configuration.GetSection("ReverseProxy"))
.AddTransforms<JwtTransformProvider>();
And the middleware:
app.MapReverseProxy();
API client credentials client
The YARP proxy uses the OAuth client credentials client to get an access token to access the downstream API. The token is stored in a cache and only rotated when it expires or is missing. The app-to-app security has nothing to do with the delegated client from the web application.
using IdentityModel.Client;
using Microsoft.Extensions.Caching.Distributed;
namespace BffOpenIddict.Server.ApiClient;
public class ApiTokenCacheClient
{
private readonly ILogger<ApiTokenCacheClient> _logger;
private readonly HttpClient _httpClient;
private static readonly object _lock = new();
private readonly IDistributedCache _cache;
private readonly IConfiguration _configuration;
private const int cacheExpirationInDays = 1;
private class AccessTokenItem
{
public string AccessToken { get; set; } = string.Empty;
public DateTime ExpiresIn { get; set; }
}
public ApiTokenCacheClient(
IHttpClientFactory httpClientFactory,
ILoggerFactory loggerFactory,
IConfiguration configuration,
IDistributedCache cache)
{
_httpClient = httpClientFactory.CreateClient();
_logger = loggerFactory.CreateLogger<ApiTokenCacheClient>();
_cache = cache;
_configuration = configuration;
}
public async Task<string> GetApiToken(string api_name, string api_scope, string secret)
{
var accessToken = GetFromCache(api_name);
if (accessToken != null)
{
if (accessToken.ExpiresIn > DateTime.UtcNow)
{
return accessToken.AccessToken;
}
else
{
// remove => NOT Needed for this cache type
}
}
_logger.LogDebug("GetApiToken new from STS for {api_name}", api_name);
// add
var newAccessToken = await GetApiTokenInternal(api_name, api_scope, secret);
AddToCache(api_name, newAccessToken);
return newAccessToken.AccessToken;
}
private async Task<AccessTokenItem> GetApiTokenInternal(string api_name, string api_scope, string secret)
{
try
{
var disco = await HttpClientDiscoveryExtensions.GetDiscoveryDocumentAsync(
_httpClient,
_configuration["OpenIDConnectSettings:Authority"]);
if (disco.IsError)
{
_logger.LogError("disco error Status code: {discoIsError}, Error: {discoError}", disco.IsError, disco.IsError);
throw new ApplicationException($"Status code: {disco.IsError}, Error: {disco.Error}");
}
var tokenResponse = await HttpClientTokenRequestExtensions.RequestClientCredentialsTokenAsync(_httpClient, new ClientCredentialsTokenRequest
{
Scope = api_scope,
ClientSecret = secret,
Address = disco.TokenEndpoint,
ClientId = api_name
});
if (tokenResponse.IsError || tokenResponse.AccessToken == null)
{
_logger.LogError("tokenResponse.IsError Status code: {tokenResponseIsError}, Error: {tokenResponseError}", tokenResponse.IsError, tokenResponse.Error);
throw new ApplicationException($"Status code: {tokenResponse.IsError}, Error: {tokenResponse.Error}");
}
return new AccessTokenItem
{
ExpiresIn = DateTime.UtcNow.AddSeconds(tokenResponse.ExpiresIn),
AccessToken = tokenResponse.AccessToken
};
}
catch (Exception e)
{
_logger.LogError("Exception {e}", e);
throw new ApplicationException($"Exception {e}");
}
}
private void AddToCache(string key, AccessTokenItem accessTokenItem)
{
var options = new DistributedCacheEntryOptions()
.SetSlidingExpiration(TimeSpan.FromDays(cacheExpirationInDays));
lock (_lock)
{
_cache.SetString(key, System.Text.Json.JsonSerializer.Serialize(accessTokenItem), options);
}
}
private AccessTokenItem? GetFromCache(string key)
{
var item = _cache.GetString(key);
if (item != null)
{
return System.Text.Json.JsonSerializer.Deserialize<AccessTokenItem>(item);
}
return null;
}
}
Downstream API
The downstream API is protected using JWT access tokens. This is setup using the AddJwtBearer method. The scope and other claims should also be validated.
services.AddAuthentication()
.AddJwtBearer("Bearer", options =>
{
options.Audience = "rs_dataEventRecordsApi";
options.Authority = "https://localhost:44318/";
options.TokenValidationParameters = new TokenValidationParameters
{
ValidateIssuer = true,
ValidateAudience = true,
ValidateIssuerSigningKey = true,
ValidAudiences = ["rs_dataEventRecordsApi"],
ValidIssuers = ["https://localhost:44318/"],
};
});
Notes
This setup can be used for all server rendered applications. You should always use an external identity provider in enterprise setups and never roll out your own identity system as this is expensive to maintain and many enterprise environments no longer accept this due to the extra operation costs. Replacing Angular with react, Vue.js, Svelte or Blazor WASM does not require changes to the authentication. The different UI have differences on how the scripts are loaded or used and some require weaker session security setups.
You should also avoid downstream APIs if not required. Modular monoliths have performance advantages.
Links
https://github.com/damienbod/bff-aspnetcore-angular
https://learn.microsoft.com/en-us/aspnet/core/introduction-to-aspnet-core
https://nx.dev/getting-started/intro
https://github.com/isolutionsag/aspnet-react-bff-proxy-example
https://github.com/damienbod/bff-auth0-aspnetcore-angular
https://github.com/damienbod/bff-azureadb2c-aspnetcore-angular
https://github.com/damienbod/bff-aspnetcore-vuejs
https://github.com/damienbod/bff-MicrosoftEntraExternalID-aspnetcore-angular
https://microsoft.github.io/reverse-proxy/articles/transforms.html
https://github.com/microsoft/reverse-proxy/tree/main/samples/ReverseProxy.Transforms.Sample
Software Engineering 
[…] BFF secured ASP.NET Core application using downstream API and an OAuth client credentials JWT (Damien Bowden) […]