Blazor WASM loads configuration from these files by default:

  • wwwroot/appsettings.json
  • wwwroot/appsettings.{ENVIRONMENT}.json

To read configuration files other than these, use an HttpClient.

Important Notes

  • Configuration and settings files in Blazor WASM apps are visible to end users.
  • Do not use these configuration providers in Blazor WASM:
    • Azure Key Vault (the client secret cannot be secured client-side)
    • Azure App (Blazor WASM apps don’t run on the server)
  • Logging configuration, even if in one of these files, is not loaded by default.

Using Configuration Data

Inject an IConfiguration instance into a component:

@page "/configuration-example"
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration

<h1 style="font-size:@Configuration["h1FontSize"]">
    Configuration example

Memory Configuration Source

In Program.cs:

using Microsoft.Extensions.Configuration.Memory;

var vehicleData = new Dictionary<string, string>()
    { "color", "blue" },
    { "type", "car" },
    { "wheels:count", "3" },
    { "wheels:brand", "Blazin" },
    { "wheels:brand:type", "rally" },
    { "wheels:year", "2008" },

var memoryConfig = new MemoryConfigurationSource { InitialData = vehicleData };


To access the memory configuration source, in Pages/MemoryConfig.razor:

@page "/memory-config"
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration

<h1>Memory configuration example</h1>

<h2>General specifications</h2>

    <li>Color: @Configuration["color"]</li>
    <li>Type: @Configuration["type"]</li>


    <li>Count: @Configuration["wheels:count"]</li>
    <li>Brand: @Configuration["wheels:brand"]</li>
    <li>Type: @Configuration["wheels:brand:type"]</li>
    <li>Year: @Configuration["wheels:year"]</li>

To get just the wheels section of this sample configuration:

@code {
    protected override void OnInitialized()
        var wheelsSection = Configuration.GetSection("wheels");


Authentication Configuration

Provide auth configuration like normal, for example in wwwroot/appsettings.json:

  "Local": {
    "Authority": "{AUTHORITY}",
    "ClientId": "{CLIENT ID}"

Load the configuration in Program.cs:

builder.Services.AddOidcAuthentication(options =>
    builder.Configuration.Bind("Local", options.ProviderOptions));

Logging Configuration

First, add Microsoft.Extensions.Logging.Configuration to the app.
Then, in Program.cs:


Using Configuration in HostBuilder

You can read configuration from WebAssemblyHostBuilder.Configuration in Program.cs:

var hostname = builder.Configuration["HostName"];

Using Options Configuration

First, add Microsoft.Extensions.Options.ConfigurationExtensions to the app.
Then, in Program.cs:


Note: In Razor components, IOptionsSnapshot<TOptions> and IOptionsMonitor<TOptions> is supported, but calling StateHasChanged does not update snapshot or monitored option values. The app must be reopened in a new browser tab or reloaded via the browser’s reload button.