The article shows how an Angular nx Standalone UI hosted in an ASP.NET Core application can be secured using cookies. OpenIddict is used as the identity provider. The trusted application is protected using the Open ID Connect code flow with a secret and using PKCE. The API calls are protected using the secure cookie and anti-forgery tokens to protect against CSRF. This architecture is also known as the Backend for Frontend (BFF) security pattern.

Code: https://github.com/damienbod/bff-openiddict-aspnetcore-angular

Architecture Setup

The application is setup to authenticate as one and remove the sensitive data from the client browser. The solutions exists of the UI logic implemented in Angular and the server logic, including the security flows, implemented in ASP.NET Core. The server part of the application handles all request from the client application and the client application should only use the APIs from the same ASP.NET Core implemented host. Cookies are used to send the secure API requests. The UI implementation is greatly simplified and the backend application can add additional security features as it is a confidential client, or trusted client.

OpenIddict Setup

The OpenIddict server is used to issue tokens using OpenID Connect. The server allows a OIDC confidential client to get tokens and to authenticate the user and the application.

await manager.CreateAsync(new OpenIddictApplicationDescriptor
{
    ClientId = "oidc-pkce-confidential",
    ConsentType = ConsentTypes.Explicit,
    DisplayName = "OIDC confidential Code Flow PKCE",
    DisplayNames =
    {
        [CultureInfo.GetCultureInfo("fr-FR")] = "Application cliente MVC"
    },
    PostLogoutRedirectUris =
    {
        new Uri("https://localhost:5001/signout-callback-oidc")
    },
    RedirectUris =
    {
        new Uri("https://localhost:5001/signin-oidc")
    },
    ClientSecret = "oidc-pkce-confidential_secret",
    Permissions =
    {
        Permissions.Endpoints.Authorization,
        Permissions.Endpoints.Logout,
        Permissions.Endpoints.Token,
        Permissions.Endpoints.Revocation,
        Permissions.GrantTypes.AuthorizationCode,
        Permissions.GrantTypes.RefreshToken,
        Permissions.ResponseTypes.Code,
        Permissions.Scopes.Email,
        Permissions.Scopes.Profile,
        Permissions.Scopes.Roles,
        Permissions.Prefixes.Scope + "dataEventRecords"
    },
    Requirements =
    {
        Requirements.Features.ProofKeyForCodeExchange
    }
});

ASP.NET Core Setup

The ASP.NET Core application implements the OIDC confidential client. The client uses OIDC to authenticate and stores this data in a session. This is really simple and does not require anything else. It is a confidential client, which means it does must be able to keep a secret. The default ASP.NET Core AddOpenIdConnect method is used and no secret client wrappers are required to implement the client as it is standard OpenID Connect. Using standards simplifies your security and as soon as you move away from standards, you increase the complexity which is always bad and usually reduce the security.

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.Authority = configuration["OpenIDConnectSettings:Authority"];
    options.ClientId = configuration["OpenIDConnectSettings:ClientId"];
    options.ClientSecret = configuration["OpenIDConnectSettings:ClientSecret"];

    options.SignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;
    options.ResponseType = OpenIdConnectResponseType.Code;

    options.SaveTokens = true;
    options.GetClaimsFromUserInfoEndpoint = true;
    options.TokenValidationParameters = new TokenValidationParameters
    {
        NameClaimType = "name"
    };
});

Angular Setup

The Angular solution for development and production is setup like described in this blog:

The UI part of the application implements no OpenID connect flows and is always part of the server application. The UI can only access APIs from the single hosting application. The Angular UI uses an interceptor to apply the CSRF and also uses the CSP from the server part of the application.

Links

https://github.com/damienbod/bff-aspnetcore-angular

https://github.com/damienbod/bff-auth0-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/openiddict