Implementing the BFF Security Pattern with Auth0

Complete the following three steps to implement the BFF Security Pattern with Auth0:

  1. Configure Auth0.
  2. Create an aspnetcore API
  3. Build a BFF

Step 1.) Configure Auth0

The OidcProxy only supports the Authorization Code Flow with Proof Key for Client Exchange. That’s why it is important to configure Auth0 in a specific way.

Follow these steps to configure Auth0 correctly:

  • Go to https://manage.auth0.com and sign in

  • Go to the Applications section in the menu on the left-hand side and click Applications

  • Click + Create application in the right upper corner

  • Provide a name for your app and select `Regular web applications

  • Now, click settings, now you’ll see the following section: client-id/secret

  • Copy the client_id, the secret, and the authority into the appsettings.json, like so:

{
  ...
  "Auth0": {
    "ClientId": "iuw4kjwkj34kj3",
    "ClientSecret": "kjh423j43jkh43jk2443jhsdfgs345te4th",
    "Domain": "example.eu.auth0.com",
    "Audience": "https://example.eu.auth0.com/api/v2",
    "Scopes": [
      "openid", "profile", "offline_access"
    ]
  }
  ...
}

  • Now, configure the redirect_url. When the user has logged into Auth0, Auth0 will redirect the user to this URL. Redirecting will not work unless the redirect URL has been whitelisted: Whitelisting the redirect_uri

  • Next, scroll to the Advanced settings and configure the grant_types. Enable Authorization Code and Refresh tokens grant-types

Step 2.) Build the aspnetcore API

Create a new project:

dotnet new webapi
dotnet add package Microsoft.AspNetCore.Authentication.JwtBearer

Create the following Program.cs file:

using System.Security.Claims;
using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.IdentityModel.Tokens;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddJwtBearer(options =>
    {
        options.Authority = $"https://{builder.Configuration["Auth0:Domain"]}/";
        options.Audience = builder.Configuration["Auth0:Audience"];
        options.TokenValidationParameters = new TokenValidationParameters
        {
            NameClaimType = ClaimTypes.NameIdentifier
        };
    });

builder.Services.AddControllers();

var app = builder.Build();

app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();

app.Run();

Make sure you have configured Auth0 in your appsettings.json file:

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "Auth0": {
    "Domain": "{yourDomain}",
    "Audience": "{yourApiIdentifier}"
  },
  "AllowedHosts": "*"
}

In this example, we assume you’re running this API on port 8080. To get this API to run on that port, modify your LaunchSettings.json file to like so:

{
  "profiles": {
    "http": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "launchUrl": "/",
      "applicationUrl": "http://localhost:8080",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

Step 3.) Build the BFF

To build a BFF with aspnetcore, execute the following commands on the command line:

dotnet new web
dotnet add package OidcProxy.Net.Auth0

Create the following Program.cs file:

using OidcProxy.Net.Auth0;

var builder = WebApplication.CreateBuilder(args);

var config = builder.Configuration
    .GetSection("OidcProxy")
    .Get<Auth0ProxyConfig>();

builder.Services.AddAuth0Proxy(config);

var app = builder.Build();

app.UseAuth0Proxy();

app.Run();

Create the following appsettings.json file:

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "OidcProxy": {
    "Auth0": {
      "ClientId": "{yourClientId}",
      "ClientSecret": "{yourClientSecret}",
      "Domain": "{yourDomain}",
      "Audience": "{yourAudience}",
      "FederatedLogout": false,
      "Scopes": [
        "openid", "profile", "offline_access"
      ]
    },
    "ReverseProxy": {
      "Routes": {
        "spa": {
          "ClusterId": "spa",
          "Match": {
            "Path": "/{*any}"
          }
        },
        "api": {
          "ClusterId": "api",
          "Match": {
            "Path": "/api/{*any}"
          }
        },
      },
      "Clusters": {
        "spa": {
          "Destinations": {
            "spa": {
              "Address": "http://localhost:4200/"
            }
          }
        },
        "api": {
          "Destinations": {
            "api": {
              "Address": "http://localhost:8080/"
            }
          }
        },
      }
    }
  }
}

Use the following Properties/launchSettings.json, this launchSettings file ensures the application url matches the callback url that has been configured in Auth0:

{
  "profiles": {
    "https": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "https://localhost:8443",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

In this example we assume you are running a Single Page Application on localhost on port 4200 and you have an API running at localhost on port 8080. If that is not the case, then update the appsettings.json accordingly.

To run the BFF, type dotnet run or just hit the ‘play’-button in Visual Studio. When you run the BFF, make sure to have your API and your SPA running too.

Endpoints

The BFF relays all requests as configured in the ReverseProxy section in the appsettings.json file, except for four endpoints:

[GET] /.auth/login

To log a user in and to start an HTTP session, navigate to /.auth/login. The software will redirect to the login page of the Identity Provider to log the user in. The resulting tokens will be stored in the user session and are not available in the browser.

[GET] /.auth/login/callback

This endpoint is used by the IdentityProvider.

[GET] /.auth/me

To see the logged-in user, navigate to the /.auth/me endpoint. This endpoint shows the claims that are in the id_token.

[GET] /.auth/end-session

To revoke the tokens that have been obtained when the user logs in, navigate to /.auth/end-session endpoint. This will revoke the tokens that have been stored in the user session. This will also end the user-session on at the Identity Provider

Demo

Check out a fully working demo here.

Deploying to Azure Container Apps

Read how to deploy this demo to an Azure Container Apps Environment here.

Feedback

Help us build better software. Your feedback is valuable to us. We would like to inquire about your success in setting up this demo.