{ "version": "https://jsonfeed.org/version/1", "title": "Securing a Blazor Web App", "description": "", "home_page_url": "https://blazorcode.uk/blazorauthentication", "feed_url": "https://blazorcode.uk/blazorauthentication/feed.json", "user_comment": "", "author": { "name": "Christopher J Bell" }, "items": [ { "id": "https://blazorcode.uk/blazorauthentication/sign-in-sign-out-code/", "url": "https://blazorcode.uk/blazorauthentication/sign-in-sign-out-code/", "title": "Sign in / Sign out code", "summary": "This code works! Program.cs using BlazorEntra.Components; using Microsoft.AspNetCore.Authentication.OpenIdConnect; using Microsoft.Identity.Web; using Microsoft.Identity.Web.UI; var builder = WebApplication.CreateBuilder(args); // Add services to the container. builder.Services.AddRazorComponents() .AddInteractiveServerComponents() .AddMicrosoftIdentityConsentHandler();…", "content_html": "\n

\n This code works!\n

\n\n

\n Program.cs\n

\n
using BlazorEntra.Components;\nusing Microsoft.AspNetCore.Authentication.OpenIdConnect;\nusing Microsoft.Identity.Web;\nusing Microsoft.Identity.Web.UI;\n\nvar builder = WebApplication.CreateBuilder(args);\n\n// Add services to the container.\nbuilder.Services.AddRazorComponents()\n    .AddInteractiveServerComponents()\n    .AddMicrosoftIdentityConsentHandler();          //Added to handle consent and conditional access challenges - 2025-11-20\n\n\nbuilder.Services\n  .AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)\n  .AddMicrosoftIdentityWebApp(builder.Configuration.GetSection(\"AzureAd\"))\n  .EnableTokenAcquisitionToCallDownstreamApi() // optional if you'll call APIs\n  .AddInMemoryTokenCaches();\n\nbuilder.Services.Configure<OpenIdConnectOptions>(\n    OpenIdConnectDefaults.AuthenticationScheme,\n    options =>\n    {\n        options.Events.OnRedirectToIdentityProviderForSignOut = context =>\n        {\n            context.ProtocolMessage.PostLogoutRedirectUri =\n                $\"{context.Request.Scheme}://{context.Request.Host}/\";\n            return Task.CompletedTask;\n        };\n    });\n\n\nbuilder.Services.AddAuthorizationBuilder();\n\nbuilder.Services.AddControllersWithViews()\n    .AddMicrosoftIdentityUI();\n\nvar app = builder.Build();\n\n// Configure the HTTP request pipeline.\nif (!app.Environment.IsDevelopment())\n{\n    app.UseExceptionHandler(\"/Error\", createScopeForErrors: true);\n    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.\n    app.UseHsts();\n}\napp.UseStatusCodePagesWithReExecute(\"/not-found\", createScopeForStatusCodePages: true);\napp.UseHttpsRedirection();\napp.UseStaticFiles();\n\napp.UseAuthentication();\napp.UseAuthorization();\n\napp.UseAntiforgery();\n\napp.MapStaticAssets();\napp.MapRazorComponents<App>()\n    .AddInteractiveServerRenderMode();\n\napp.MapControllers();\n\n\napp.Run();
\n\n

\n App.razor\n

\n
<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <base href=\"/\" />\n    <ResourcePreloader />\n    <link rel=\"stylesheet\" href=\"@Assets[\"lib/bootstrap/dist/css/bootstrap.min.css\"]\" />\n    <link rel=\"stylesheet\" href=\"@Assets[\"app.css\"]\" />\n    <link rel=\"stylesheet\" href=\"@Assets[\"BlazorEntra.styles.css\"]\" />\n    <ImportMap />\n    <link rel=\"icon\" type=\"image/png\" href=\"favicon.png\" />\n    <HeadOutlet />\n</head>\n\n<body>\n    <CascadingAuthenticationState>\n        <Router AppAssembly=\"@typeof(App).Assembly\">\n            <Found Context=\"routeData\">\n                <RouteView RouteData=\"@routeData\" DefaultLayout=\"@typeof(MainLayout)\" />\n                <FocusOnNavigate RouteData=\"@routeData\" Selector=\"h1\" />\n            </Found>\n            <NotFound>\n                <PageTitle>Not found</PageTitle>\n                <LayoutView Layout=\"@typeof(MainLayout)\">\n                    <p>Sorry, there's nothing at this address.</p>\n                </LayoutView>\n            </NotFound>\n        </Router>\n    </CascadingAuthenticationState>\n    <ReconnectModal />\n    <script src=\"@Assets[\"_framework/blazor.web.js\"]\"></script>\n</body>\n\n</html>
\n\n

\n MainLayout.razor\n

\n
@inherits LayoutComponentBase\n@using BlazorEntra.Components.Shared\n@using Microsoft.AspNetCore.Components.Web\n@using Microsoft.Identity.Web.UI\n\n<div class=\"page\">\n    <div class=\"sidebar\">\n        <NavMenu />\n    </div>\n\n    <main>\n        <div class=\"top-row px-4\">\n            <MyLoginDisplay />\n            <a href=\"https://learn.microsoft.com/aspnet/core/\" target=\"_blank\">About</a>\n        </div>\n\n        <article class=\"content px-4\">\n            @Body\n        </article>\n    </main>\n</div>\n\n<div id=\"blazor-error-ui\" data-nosnippet>\n    An unhandled error has occurred.\n    <a href=\".\" class=\"reload\">Reload</a>\n    <span class=\"dismiss\">đź—™</span>\n</div>
\n\n

\n MyLoginDisplay.razor\n

\n
@using Microsoft.AspNetCore.Components.Authorization\n\n<AuthorizeView>\n    <Authorized>\n        @* Hello, @context.User.Identity?.Name! *@\n        Hello, @GetDisplayName(context)!\n\n        <a href=\"MicrosoftIdentity/Account/SignOut\">Sign out</a>\n    </Authorized>\n    <NotAuthorized>\n        <a href=\"MicrosoftIdentity/Account/SignIn\">Sign in</a>\n    </NotAuthorized>\n</AuthorizeView>\n\n@code {\n    private string GetDisplayName(AuthenticationState? context)\n    {\n        var user = (context?.User);\n        if (user == null) return string.Empty;\n\n        // Try the \"name\" claim first (display name)\n        var displayName = user.FindFirst(\"name\")?.Value;\n\n        // Fallback to email/UPN if \"name\" isn’t present\n        return displayName ?? user.Identity?.Name ?? string.Empty;\n    }\n\n    private void SignIn() => Nav.NavigateTo(\"MicrosoftIdentity/Account/SignIn\", true);\n    private void SignOut() => Nav.NavigateTo(\"MicrosoftIdentity/Account/SignOut\", true);\n\n    [Inject] NavigationManager Nav { get; set; } = default!;\n}
\n\n

\n appsettings.json\n

\n
{\n  \"Logging\": {\n    \"LogLevel\": {\n      \"Default\": \"Information\",\n      \"Microsoft.AspNetCore\": \"Warning\"\n    }\n  },\n  \"AllowedHosts\": \"*\",\n\n  \"AzureAd\": {\n    \"Instance\": \"https://BlazorcodeEntra.ciamlogin.com/\",\n    \"Domain\": \"BlazorcodeEntra.onmicrosoft.com\",\n    \"TenantId\": \"3806082c-cff7-4294-8c49-128e4f7bf757\",\n    \"ClientId\": \"fe1803e6-9cce-474f-9a38-4429cf136528\",\n    \"ClientSecret\": \"hb68Q~_unpHABHrtPuhaBjoAiPBBsraWqD~Nfc5F\",\n    \"CallbackPath\": \"/signin-oidc\",\n    \"SignedOutCallbackPath\": \"/signout-callback-oidc\",\n    \"SignedOutRedirectUri\": \"/\",\n    \"RemoteSignOutPath\": \"/signout-oidc\" // optional but good to include\n  }\n}
\n\n

\n Counter.razor\n

\n
@page \"/counter\"\n@using Microsoft.AspNetCore.Authorization\n@rendermode InteractiveServer\n@attribute [Authorize]\n\n<PageTitle>Counter</PageTitle>\n\n<h1>Counter</h1>\n\n<p role=\"status\">Current count: @currentCount</p>\n\n<button class=\"btn btn-primary\" @onclick=\"IncrementCount\">Click me</button>\n\n@code {\n    private int currentCount = 0;\n\n    private void IncrementCount()\n    {\n        currentCount++;\n    }\n}
\n\n

\n BlazorEntra.csproj\n

\n
<Project Sdk=\"Microsoft.NET.Sdk.Web\">\n\n  <PropertyGroup>\n    <TargetFramework>net10.0</TargetFramework>\n    <Nullable>enable</Nullable>\n    <ImplicitUsings>enable</ImplicitUsings>\n    <BlazorDisableThrowNavigationException>true</BlazorDisableThrowNavigationException>\n  </PropertyGroup>\n\n  <ItemGroup>\n    <PackageReference Include=\"Microsoft.Identity.Web\" Version=\"4.1.0\" />\n    <PackageReference Include=\"Microsoft.Identity.Web.UI\" Version=\"4.1.0\" />\n  </ItemGroup>\n\n</Project>
\n\n

\n Entra Authorisation\n

\n\n
\n
\n
\n \n \"\"\n \n
Entra Authorisation - Redirect URI
\n
\n \n \"\"\n \n
Entra Authorisation - Settings
\n
\n
\n
\n\n

\n Note that for the Redirect URIs I have not specified a port number for localhost.  The same applies 'Front-channel logout URL'. This no longer seems necessary. However, I found that including the port number also worked. It also worked when the Redirect URIs included entries with both localhost + port number and just localhost.\n

", "author": { "name": "Christopher J Bell" }, "tags": [ ], "date_published": "2025-11-22T11:29:00+00:00", "date_modified": "2025-11-23T11:04:09+00:00" }, { "id": "https://blazorcode.uk/blazorauthentication/enhancing-blazor-web-app/", "url": "https://blazorcode.uk/blazorauthentication/enhancing-blazor-web-app/", "title": "Enhancing Blazor Web App", "summary": "Introduction So far we have our Blazor web app linked to Entra External ID and have authentication/authorisation on the Counter page, forcing a user to…", "content_html": "\n

\n Introduction\n

\n\n

\n So far we have our Blazor web app linked to Entra External ID and have authentication/authorisation on the Counter page, forcing a user to log in before being given access.  However, once logged in there is no method to allow the user to log out and other than selecting the Counter page there is no other way to log in.\n

\n\n

\n Here we will add specific Sign in and Sign out options\n

\n\n

\n The changes we need to make are:\n

\n\n

\n _Imports.razor\n

\n\n

\n Add the following to _Imports. This allows us to use authorization attributes and identity UI helpers anywhere in our components. It ensures that [Authorise] works in all .razor pages and we can drop the built-in login/logout UI.\n

\n
@using Microsoft.AspNetCore.Authorization\n@using Microsoft.AspNetCore.Components.Authorization\n@using Microsoft.Identity.Web\n@using Microsoft.Identity.Web.UI
\n\n

\n The full _Imports.razor should now be:\n

\n
@using System.Net.Http\n@using System.Net.Http.Json\n@using Microsoft.AspNetCore.Components.Forms\n@using Microsoft.AspNetCore.Components.Routing\n@using Microsoft.AspNetCore.Components.Web\n@using static Microsoft.AspNetCore.Components.Web.RenderMode\n@using Microsoft.AspNetCore.Components.Web.Virtualization\n@using Microsoft.JSInterop\n@using BlazorEntra\n@using BlazorEntra.Components\n@using BlazorEntra.Components.Layout\n@using Microsoft.AspNetCore.Authorization\n@using Microsoft.AspNetCore.Components.Authorization\n@using Microsoft.Identity.Web\n@using Microsoft.Identity.Web.UI
\n\n

\n Program.cs\n

\n\n

\n We need to make some change to Program.cs, and rather than do this piecemeal, the new version of Program.cs is shown below. I have attempted to structure the code so that it is grouped by concern (Blazor services, authentication/token services, OIDC options, authorisation/UI), chained related service registrations for readability with clear separation between Services and Middleware pipeline. \n

\n
using BlazorEntra.Components;\nusing Microsoft.AspNetCore.Authentication.OpenIdConnect;\nusing Microsoft.Identity.Web;\nusing Microsoft.Identity.Web.UI;\n\nvar builder = WebApplication.CreateBuilder(args);\n\n// =======================================\n// Services\n// =======================================\n\n// Blazor + UI services\nbuilder.Services\n    .AddRazorComponents()\n        .AddInteractiveServerComponents()\n        .AddMicrosoftIdentityConsentHandler(); // handles consent & conditional access\n\n// Authentication + Token services\nbuilder.Services\n    .AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)\n        .AddMicrosoftIdentityWebApp(builder.Configuration.GetSection(\"AzureAd\"))\n        .EnableTokenAcquisitionToCallDownstreamApi() // optional if you call APIs\n        .AddInMemoryTokenCaches();\n\n// Configure OpenID Connect options (logout redirect)\nbuilder.Services.Configure<OpenIdConnectOptions>(\n    OpenIdConnectDefaults.AuthenticationScheme,\n    options =>\n    {\n        options.Events.OnRedirectToIdentityProviderForSignOut = context =>\n        {\n            context.ProtocolMessage.PostLogoutRedirectUri =\n                $\"{context.Request.Scheme}://{context.Request.Host}/\";\n            return Task.CompletedTask;\n        };\n    });\n\n// Authorization + Identity UI\nbuilder.Services\n    .AddAuthorization();\nbuilder.Services\n    .AddControllersWithViews()\n    .AddMicrosoftIdentityUI();\n\nvar app = builder.Build();\n\n// =======================================\n// Middleware pipeline\n// =======================================\n\nif (!app.Environment.IsDevelopment())\n{\n    app.UseExceptionHandler(\"/Error\", createScopeForErrors: true);\n    app.UseHsts();\n}\n\napp.UseStatusCodePagesWithReExecute(\"/not-found\", createScopeForStatusCodePages: true);\napp.UseHttpsRedirection();\napp.UseStaticFiles();\n\napp.UseAuthentication();\napp.UseAuthorization();\napp.UseAntiforgery();\n\napp.MapStaticAssets();\napp.MapRazorComponents<App>()\n    .AddInteractiveServerRenderMode();\n\napp.MapControllers();\n\napp.Run();
\n\n

\n appsettings.json\n

\n\n

\n To handle logging out we need to add three lines to appsetings.json as shown below:\n

\n
  {\n  \"Logging\": {\n    \"LogLevel\": {\n      \"Default\": \"Information\",\n      \"Microsoft.AspNetCore\": \"Warning\"\n    }\n  },\n  \"AllowedHosts\": \"*\",\n\n  \"AzureAd\": {\n    \"Instance\": \"https://{your-tenant}.ciamlogin.com/\",\n    \"Domain\": \"{your-tenant}.onmicrosoft.com\",\n    \"TenantId\": \"{GUID-of-external-tenant}\",\n    \"ClientId\": \"{APP-REGISTRATION-CLIENT-ID}\",\n    \"ClientSecret\": \"{APP-REGISTRATION-CLIENT-SECRET-VALUE}\",\n    \"CallbackPath\": \"/signin-oidc\",   \n    \"SignedOutCallbackPath\": \"/signout-callback-oidc\",\n    \"SignedOutRedirectUri\": \"/\",\n    \"RemoteSignOutPath\": \"/signout-oidc\" // optional but good to include\n  }\n}\n
\n\n

\n App.razor\n

\n\n

\n This is the code we need for App.razor. The significant change is the addition of the CascadingAuthenticationState section.\n

\n
<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <base href=\"/\" />\n    <ResourcePreloader />\n    <link rel=\"stylesheet\" href=\"@Assets[\"lib/bootstrap/dist/css/bootstrap.min.css\"]\" />\n    <link rel=\"stylesheet\" href=\"@Assets[\"app.css\"]\" />\n    <link rel=\"stylesheet\" href=\"@Assets[\"BlazorEntra.styles.css\"]\" />\n    <ImportMap />\n    <link rel=\"icon\" type=\"image/png\" href=\"favicon.png\" />\n    <HeadOutlet />\n</head>\n\n<body>\n    <CascadingAuthenticationState>\n        <Router AppAssembly=\"@typeof(App).Assembly\">\n            <Found Context=\"routeData\">\n                <RouteView RouteData=\"@routeData\" DefaultLayout=\"@typeof(MainLayout)\" />\n                <FocusOnNavigate RouteData=\"@routeData\" Selector=\"h1\" />\n            </Found>\n            <NotFound>\n                <PageTitle>Not found</PageTitle>\n                <LayoutView Layout=\"@typeof(MainLayout)\">\n                    <p>Sorry, there's nothing at this address.</p>\n                </LayoutView>\n            </NotFound>\n        </Router>\n    </CascadingAuthenticationState>\n    <ReconnectModal />\n    <script src=\"@Assets[\"_framework/blazor.web.js\"]\"></script>\n</body>\n\n</html>
\n\n

\n The key elements of the above are:\n

\n\n \n\n

\n In short, App.razor wires up authentication, routing, layouts, accessibility, error handling and connection resilience - it's the \"engine room\" of the Blazor application.\n

\n\n

\n \n

\n\n

\n \n

\n\n

\n MainLayout.razor\n

\n
@inherits LayoutComponentBase\n@using BlazorEntra.Components.Shared\n@using Microsoft.Identity.Web.UI\n\n<div class=\"page\">\n    <div class=\"sidebar\">\n        <NavMenu />\n    </div>\n\n    <main>\n        <div class=\"top-row px-4\">\n            <MyLoginDisplay />\n            <a href=\"https://learn.microsoft.com/aspnet/core/\" target=\"_blank\">About</a>\n        </div>\n\n        <article class=\"content px-4\">\n            @Body\n        </article>\n    </main>\n</div>\n\n<div id=\"blazor-error-ui\" data-nosnippet>\n    An unhandled error has occurred.\n    <a href=\".\" class=\"reload\">Reload</a>\n    <span class=\"dismiss\">đź—™</span>\n</div>
\n\n

\n The significant change to MainLayout.razor is the inclusion of the <MyLoginDisplay> component and the @using statements at the top of the file.\n

\n\n

\n I have specifically called the 'login display' component 'MyLoginDisplay' component because I believe older Blazor templates automatically included a 'LoginDisplay' component and I didn't want any possible confusion.  We will come to MyLoginDisplay' shortly, but it will be saved in a new sub-folder of Components called 'Shared', hence the inclusion of this folder in the using statements.\n

\n\n

\n Adding  the <MyLoginDisplay> component will insert a 'Sign in' link to the top bar.\n

\n\n

\n \n

\n\n

\n MyLoginDisplay.razor\n

\n\n \n
<AuthorizeView>\n    <Authorized>\n        Hello, @context.User.Identity?.Name!\n        <a href=\"MicrosoftIdentity/Account/SignOut\">Sign out</a>\n    </Authorized>\n    <NotAuthorized>\n        <a href=\"MicrosoftIdentity/Account/SignIn\">Sign in</a>\n    </NotAuthorized>\n</AuthorizeView>\n
\n\n

\n This is the minimum that's required, but we will enhance this later.\n

\n\n

\n Entra External ID\n

\n\n

\n We need to make a change to Entra External ID to ensure that sign-outs are handled correctly; this is to add a 'Front-channel logout URL'.\n

\n\n

\n The full instructions are:\n

\n\n \n\n
\n
\n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n
\n
\n\n

\n Save & Test\n

\n\n

\n Return to Visual Studio, save all the files and test.\n

\n\n

\n You should be able to sign into the application, open the Counter page and sign out. Sign out should return you to the application, enabling you to sign in again if you wish.\n

\n\n
\n
\n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n
\n
\n\n

\n One Last Thing\n

\n\n

\n You will notice that although the code in MyLoginDisplay.razor implied that the greeting at the top of the screen would welcome the user by name it actually displays the user's email address.\n

\n\n

\n When we created the user flow in Entra we had a choice of which 'User attributes' we wanted to collect from the user when they registered. Our choice was to keep it simple and just collect the 'Display name'. (We could have collected the user's 'Given name', 'Surname', and/or address elements, etc.) I think it would be better to greet the user by name rather than email address.\n

\n\n

\n To do this we need to alter MyDisplayLogin.razor to:\n

\n
<AuthorizeView>\n    <Authorized>\n        @* Hello, @context.User.Identity?.Name! *@\n        Hello, @GetDisplayName(context)!\n\n        <a href=\"MicrosoftIdentity/Account/SignOut\">Sign out</a>\n    </Authorized>\n    <NotAuthorized>\n        <a href=\"MicrosoftIdentity/Account/SignIn\">Sign in</a>\n    </NotAuthorized>\n</AuthorizeView>\n\n@code {\n    private string GetDisplayName(AuthenticationState? context)\n    {\n        var user = (context?.User);\n        if (user == null) return string.Empty;\n\n        // Try the \"name\" claim first (display name)\n        var displayName = user.FindFirst(\"name\")?.Value;\n\n        // Fallback to email/UPN if \"name\" isn’t present\n        return displayName ?? user.Identity?.Name ?? string.Empty;\n    }\n\n    private void SignIn() => Nav.NavigateTo(\"MicrosoftIdentity/Account/SignIn\", true);\n    private void SignOut() => Nav.NavigateTo(\"MicrosoftIdentity/Account/SignOut\", true);\n\n    [Inject] NavigationManager Nav { get; set; } = default!;\n}\n
\n\n

\n This code attempts to get the \"name\" claim from the signed in user (confusingly called 'name', whereas the Entra ID user flow calls id 'Display name') and assigns it to the variable 'displayName' (somewhat ironically!), otherwise it returns the 'name', i.e. email address.\n

\n\n

\n The little block starting with 'private void...' is there to make the sign in and sign out links work correctly in Blazor Server.  That code injects NavigationManager so the component can programmatically navigate to the Entra sign in/out endpoints, forcing a full reload. It prevents Blazor’s router from swallowing the navigation and ensures the authentication flow works reliably.\n

\n\n

\n If we re-run the application it will now display:\n

\n\n
\n
\n
\n \n \"\"\n \n \n
\n
\n
", "author": { "name": "Christopher J Bell" }, "tags": [ ], "date_published": "2025-11-20T12:32:09+00:00", "date_modified": "2025-11-28T09:59:52+00:00" }, { "id": "https://blazorcode.uk/blazorauthentication/blazor-server-web-app/", "url": "https://blazorcode.uk/blazorauthentication/blazor-server-web-app/", "title": "Blazor Server Web App", "summary": "Creating a new Blazor Web App Open Visual Studio (I'm using Visual Studio 2026 - Community Edition) These can be added either by using the…", "content_html": "\n

\n Creating a new Blazor Web App\n

\n\n

\n Open Visual Studio (I'm using Visual Studio 2026 - Community Edition)\n

\n\n \n\n
\n
\n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n
\n
\n\n

\n Adding Microsoft Identity to a Blazor Server App\n

\n\n

\n Add NuGet packages\n

\n\n \n\n

\n These can be added either by using the CLI (Command Line Interface - e.g. NuGet Package Manager Console, Bash or Powershell making sure you are in the solution folder.) These are the commands:\n

\n
dotnet add package Microsoft.Identity.Web\ndotnet add package Microsoft.Identity.Web.UI
\n\n
\n
\n
\n \n \"\"\n \n \n
\n
\n
\n\n

\n In the above example I used the NuGet Package Manager Console, but note that I had to change directory to ..\\repos\\BlazorEntra\\BlazorEntra\n

\n\n

\n Alternatively, use the NuGet Package Manager within Visual Studio.\n

\n\n
\n
\n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n
\n
\n\n

\n Configure appsettings.json\n

\n\n

\n I will not be uploading this code to GitHub, so for simplicity will be making changes directly in appsettings.json. Insert the following placeholder code in sppsettings.json.\n

\n
  \"AzureAd\": {\n    \"Instance\": \"https://{your-tenant}.ciamlogin.com/\",\n    \"Domain\": \"{your-tenant}.onmicrosoft.com\",\n    \"TenantId\": \"{GUID-of-external-tenant}\",\n    \"ClientId\": \"{APP-REGISTRATION-CLIENT-ID}\",\n    \"ClientSecret\": \"{APP-REGISTRATION-CLIENT-SECRET-VALUE}\",\n    \"CallbackPath\": \"/signin-oidc\"\n  }
\n\n
\n
\n
\n \n \"\"\n \n \n
\n
\n
\n\n

\n We now need to replace the placeholders with data from Entra ID.\n

\n\n

\n Replace {your-tenant} with the name of your Entra ID tenant. To find the {tenant-name} open the Azure portal switch to the Entra ID tenant. \n

\n\n \n\n
\n
\n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n
\n
\n\n

\n Amend Program.cs to use Authentication\n

\n\n

\n Program.cs\n

\n\n \n
using Microsoft.AspNetCore.Authentication.OpenIdConnect;\nusing Microsoft.Identity.Web;
\n\n \n
  builder.Services\n  .AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)\n  .AddMicrosoftIdentityWebApp(builder.Configuration.GetSection(\"AzureAd\"))\n    .EnableTokenAcquisitionToCallDownstreamApi() // optional if you'll call APIs\n    .AddInMemoryTokenCaches();\n
\n\n \n
app.UseAuthentication();\napp.UseAuthorization();
\n\n
\n
\n
\n \n \"\"\n \n \n
\n
\n
\n\n

\n Counter.cs\n

\n\n

\n We'll use the Counter page to illustrate the amendments needed to require a user to log in to access the page.\n

\n\n \n
@using Microsoft.AspNetCore.Authorization\n@attribute [Authorize]\n
\n\n

\n That's it! That's all that's needed to add authentication to the Counter page.\n

\n\n

\n Save & Test\n

\n\n

\n Save all files and run the application. The application should run and display the 'standard' Blazor application. However, as we have added authorisation to the Counter page, clicking on the \n

\n\n

\n Code\n

\n\n

\n The full code for the files changed is:\n

\n\n

\n appsettings.json\n

\n
{\n  \"Logging\": {\n    \"LogLevel\": {\n      \"Default\": \"Information\",\n      \"Microsoft.AspNetCore\": \"Warning\"\n    }\n  },\n  \"AllowedHosts\": \"*\",\n\n  \"AzureAd\": {\n    \"Instance\": \"https://{your-tenant}.ciamlogin.com/\",\n    \"Domain\": \"{your-tenant}.onmicrosoft.com\",\n    \"TenantId\": \"{GUID-of-external-tenant}\",\n    \"ClientId\": \"{APP-REGISTRATION-CLIENT-ID}\",\n    \"ClientSecret\": \"{APP-REGISTRATION-CLIENT-SECRET-VALUE}\",\n    \"CallbackPath\": \"/signin-oidc\"\n  }\n}
\n\n

\n Program.cs\n

\n
using BlazorEntra.Components;\nusing Microsoft.AspNetCore.Authentication.OpenIdConnect;\nusing Microsoft.Identity.Web;\n\nvar builder = WebApplication.CreateBuilder(args);\n\n// Add services to the container.\nbuilder.Services.AddRazorComponents()\n    .AddInteractiveServerComponents();\n\nbuilder.Services\n  .AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)\n  .AddMicrosoftIdentityWebApp(builder.Configuration.GetSection(\"AzureAd\"))\n    .EnableTokenAcquisitionToCallDownstreamApi() // optional if you'll call APIs\n    .AddInMemoryTokenCaches();\n\nvar app = builder.Build();\n\n// Configure the HTTP request pipeline.\nif (!app.Environment.IsDevelopment())\n{\n    app.UseExceptionHandler(\"/Error\", createScopeForErrors: true);\n    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.\n    app.UseHsts();\n}\napp.UseStatusCodePagesWithReExecute(\"/not-found\", createScopeForStatusCodePages: true);\napp.UseHttpsRedirection();\napp.UseStaticFiles();\n\napp.UseAuthentication();\napp.UseAuthorization();\n\napp.UseAntiforgery();\n\napp.MapStaticAssets();\napp.MapRazorComponents<App>()\n    .AddInteractiveServerRenderMode();\n\napp.Run();
\n\n

\n Counter.razor\n

\n
@page \"/counter\"\n@using Microsoft.AspNetCore.Authorization\n@rendermode InteractiveServer\n@attribute [Authorize]\n\n<PageTitle>Counter</PageTitle>\n\n<h1>Counter</h1>\n\n<p role=\"status\">Current count: @currentCount</p>\n\n<button class=\"btn btn-primary\" @onclick=\"IncrementCount\">Click me</button>\n\n@code {\n    private int currentCount = 0;\n\n    private void IncrementCount()\n    {\n        currentCount++;\n    }\n}
", "author": { "name": "Christopher J Bell" }, "tags": [ ], "date_published": "2025-11-16T11:21:09+00:00", "date_modified": "2025-11-23T11:59:11+00:00" }, { "id": "https://blazorcode.uk/blazorauthentication/entra-getting-started/", "url": "https://blazorcode.uk/blazorauthentication/entra-getting-started/", "title": "Entra - Getting Started", "summary": "Creating an Entra Tenant Add a new tenant This assumes you already have an Azure subscription; if you don't have a subscription you can sign…", "content_html": "\n

\n Creating an Entra Tenant\n

\n\n

\n Add a new tenant\n

\n\n

\n This assumes you already have an Azure subscription; if you don't have a subscription you can sign up for a free trial here: https://azure.microsoft.com/en-us/pricing/purchase-options/azure-account. Once the free trial has expired you can convert the account to 'Pay as you go', although there is no charge as far as we are concerned, with regards to Entra External ID so long as the Monthly User Accesses remain under 50,000.\n

\n\n \n\n
\n
\n
\n \n \"\"\n \n
Slide 1 - Entra ID home page
\n
\n \n \"\"\n \n
Slide 2 - Overview
\n
\n \n \"\"\n \n
Slide 3 - Manage tenants
\n
\n \n \"\"\n \n
Slide 4 - Create tenant - External
\n
\n \n \"\"\n \n
Slide 5 - Create tenant - Add Azure subscription
\n
\n \n \"\"\n \n
Slide 6 - Create tenant - Tenant name, Domain name & Country/Region
\n
\n \n \"\"\n \n
Slide 7 - Create tenant - Add subscription and Resource group
\n
\n \n \"\"\n \n
Slide 8 - Create tenant - Review + create
\n
\n \n \"\"\n \n
Slide 9 - Create tenant - complete
\n
\n
\n
\n\n

\n That will create the Entra tenant and give you the option to switch to it. If you select to switch to the new tenant you will be forced to enable Multifactor Authentication (see next section), otherwise, to see the new tenant listed, select 'Overview' under 'Entra ID' in the left-hand menu followed by 'Manage tenants'. The new tenant will be shown with the 'Tenant type' of 'External'.\n

\n\n
\n
\n
\n \n \"\"\n \n \n
\n
\n
\n\n

\n As an aside, there are 5 tenants shown in the above, the one we have just created plus two of tenant type 'Workforce' and two of type 'Azure AD B2C'. The two 'Workforce' are defaults associated with my two Azure subscriptions, one as a result of my 'Microsoft Outlook' account (i.e. personal account) and the other my workplace account (Microsoft 365 Business, linked with blazorcode.uk). The 'Azure AD B2C' tenants are two tenants I created some time ago and for unknown reasons I cannot delete!\n

\n\n

\n  Switch to the new tenant\n

\n\n

\n The first time you switch to the new tenant you are forced to enable Multifactor Authentication (MFA). This is simply a matter of stepping through the prompts.  If you don't already have the Microsoft Authenticator app on your phone you will need to download it, otherwise just follow the prompts.\n

\n\n
\n
\n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n
\n
\n\n

\n As an aside I have had terrible frustrations with Azure tenants MFA. From one of the screenshots above you will notice that I have 2 old Azure B2C tenants - I now seem to be totally locked out of these.\n

\n\n

\n Create Sign-up/Sign-in User Flow\n

\n\n

\n It might seem that we are jumping the gun here by creating a user flow before we have created the Blazor web app, but at this stage we don't need any information about the web app.\n

\n\n \n\n
\n
\n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n
\n
\n\n

\n Register the Blazor Server app\n

\n\n \n\n
\n
\n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n
\n
\n\n

\n Add the App to the User flow\n

\n\n \n\n
\n
\n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n
\n
\n\n

\n Create a Client Secret\n

\n\n

\n Eventually our Blazor Server app will be treated as a confidential client and as such it will have to provide a client secret (or certificate).  The simplest approach is a client secret, so we need to add one to the Entra External ID app registration.  To do this:\n

\n\n \n\n

\n Why is this required? Because a Blazor server app runs on the server, not the browser, it is considered to be a confidential client in OAuth terms. Confidential clients must prove their identity to Entra External ID by presenting a client credential. In our case we are using a client secret, but a certificate could be an alternative.\n

\n\n
\n
\n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n
\n
\n\n

\n Warning: Secrets expire - if an error along the lines of \"Msal Client Exception: One client credential type required...\" check the expiry date of the client secret.\n

\n\n

\n Resources\n

\n\n

\n Code with Anjuli - Microsoft Entra External ID for customers\n

\n\n

\n Microsoft Learn - Create a sign-up and sign-in user flow for an external tenant app\n

\n\n

\n Microsoft Learn - Add your application to the user flow\n

", "author": { "name": "Christopher J Bell" }, "tags": [ ], "date_published": "2025-11-10T10:18:46+00:00", "date_modified": "2025-11-28T15:38:38+00:00" }, { "id": "https://blazorcode.uk/blazorauthentication/microsoft-entra-external-id/", "url": "https://blazorcode.uk/blazorauthentication/microsoft-entra-external-id/", "title": "Microsoft Entra External ID", "summary": "Introduction First, a confession.  I have previously used Azure B2C, the predecessor to Entra External ID.  However, Azure B2C is no longer available for new…", "content_html": "\n

\n Introduction\n

\n\n

\n First, a confession.  I have previously used Azure B2C, the predecessor to Entra External ID.  However, Azure B2C is no longer available for new customers, although existing tenants can continue to use it and it will continue to be supported, probably until 2030.\n

\n\n

\n In many ways Entra External ID is the obvious security provider to use with a Blazor application.  Both Blazor and Entra External ID are Microsoft products and one would hope their integration will be straightforward.\n

\n\n

\n Cost\n

\n\n

\n Entra External ID is free for the first 50,000 MAU for email authentication. SMS and voice Multifactor Authentication (MFA) are billed per attempt.\n

\n\n

\n \n

\n\n

\n \n

\n\n

\n Resources\n

\n\n

\n \n

", "author": { "name": "Christopher J Bell" }, "tags": [ ], "date_published": "2025-11-09T10:26:40+00:00", "date_modified": "2025-11-09T11:44:36+00:00" }, { "id": "https://blazorcode.uk/blazorauthentication/what-and-how/", "url": "https://blazorcode.uk/blazorauthentication/what-and-how/", "title": "Securing a Blazor Web App - Why?", "summary": "The answer to the \"Why?\" question is simple. For any application beyond a static website, the data being entered is almost always specific to the…", "content_html": "\n

\n The answer to the \"Why?\" question is simple.\n

\n\n

\n For any application beyond a static website, the data being entered is almost always specific to the user providing it. In such cases, it's essential to keep that data hidden from other users. Therefore, we need a mechanism that allows each user to log in to the application and ensures that they can access only the data they \"own.\"\n

\n\n

\n Authentication is the process of identifying and verifying a user. This is typically achieved through a login form, which requires the user to provide credentials—commonly an identifier such as an email address and a secret such as a password.
\n

\n\n

\n Once a user has gained access to the application, they may be restricted to certain menu options depending on who they are or what role they hold. This is known as Authorisation. 
\n

\n\n

\n How\n

\n\n

\n There are a number of ways of adding security to a Blazor application. The most obvious is to write one's own security layer - but I am going to dismiss this immediately. The reason for this being that it would entail recording users' logins and passwords. Ensuring this data is not exposed to any 'leaks' adds a responsibility I am not prepared to take.\n

\n\n

\n Fortunately there are a number of third-party security applications that we can hook into from a Blazor application.  All these have the advantage that the provider bears the responsibility for data security.\n

\n\n

\n From some brief research the following third party security providers rose to the top.\n

\n\n \n\n

\n When searching for security providers, my criteria included that the service should be free for up to 50,000 MAU (Monthly User Accesses). I believe the three listed above fulfil this criterion, though this may be open to interpretation.\n

\n\n

\n It is also probably no coincidence that the three providers also happen to be amongst the largest IT companies. To a certain extent I take some comfort from this - hopefully they can be trusted to safeguard users' credentials.\n

\n\n

\n I am going to investigate all three providers and report my findings. My principal focus will be on how simple it is to integrate these security providers with a basic Blazor server web application.\n

\n\n

\n At this stage I am aware that I have have unknown unknowns and this is a journey into the unknown!\n

", "author": { "name": "Christopher J Bell" }, "tags": [ ], "date_published": "2025-11-08T10:05:27+00:00", "date_modified": "2025-11-28T11:14:11+00:00" } ] }