Require antiforgery in options endpoints

Author: MackinnonBuck

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWebCSharp.1/Components/Account/IdentityComponentsEndpointRouteBuilderExtensions.cs

@@ -1,5 +1,6 @@
 using System.Security.Claims;
 using System.Text.Json;
+using Microsoft.AspNetCore.Antiforgery;
 using Microsoft.AspNetCore.Authentication;
 using Microsoft.AspNetCore.Components.Authorization;
 using Microsoft.AspNetCore.Http.Extensions;
@@ -52,8 +53,11 @@ public static IEndpointConventionBuilder MapAdditionalIdentityEndpoints(this IEn
         accountGroup.MapPost("/PasskeyCreationOptions", async (
             HttpContext context,
             [FromServices] UserManager<ApplicationUser> userManager,
-            [FromServices] SignInManager<ApplicationUser> signInManager) =>
+            [FromServices] SignInManager<ApplicationUser> signInManager,
+            [FromServices] IAntiforgery antiforgery) =>
         {
+            await antiforgery.ValidateRequestAsync(context);
+
             var user = await userManager.GetUserAsync(context.User);
             if (user is null)
             {
@@ -72,10 +76,14 @@ public static IEndpointConventionBuilder MapAdditionalIdentityEndpoints(this IEn
         });
 
         accountGroup.MapPost("/PasskeyRequestOptions", async (
+            HttpContext context,
             [FromServices] UserManager<ApplicationUser> userManager,
             [FromServices] SignInManager<ApplicationUser> signInManager,
+            [FromServices] IAntiforgery antiforgery,
             [FromQuery] string? username) =>
         {
+            await antiforgery.ValidateRequestAsync(context);
+
             var user = string.IsNullOrEmpty(username) ? null : await userManager.FindByNameAsync(username);
             var optionsJson = await signInManager.MakePasskeyRequestOptionsAsync(user);
             return TypedResults.Content(optionsJson, contentType: "application/json");

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWebCSharp.1/Components/Account/Shared/PasskeySubmit.razor

@@ -1,7 +1,21 @@
-<button type="submit" name="__passkeySubmit" @attributes="AdditionalAttributes">@ChildContent</button>
-<passkey-submit operation="@Operation" name="@Name" email-name="@EmailName"></passkey-submit>
+@using Microsoft.AspNetCore.Antiforgery
+@inject IServiceProvider Services
+
+<button type="submit" name="__passkeySubmit" @attributes="AdditionalAttributes">@ChildContent</button>
+<passkey-submit
+    operation="@Operation"
+    name="@Name"
+    email-name="@EmailName"
+    request-token-name="@tokens?.HeaderName"
+    request-token-value="@tokens?.RequestToken">
+</passkey-submit>
 
 @code {
+    private AntiforgeryTokenSet? tokens;
+
+    [CascadingParameter]
+    private HttpContext HttpContext { get; set; } = default!;
+
     [Parameter]
     [EditorRequired]
     public PasskeyOperation Operation { get; set; }
@@ -18,4 +32,9 @@
 
     [Parameter(CaptureUnmatchedValues = true)]
     public IDictionary<string, object>? AdditionalAttributes { get; set; }
+
+    protected override void OnInitialized()
+    {
+        tokens = Services.GetRequiredService<IAntiforgery>()?.GetTokens(HttpContext);
+    }
 }

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWebCSharp.1/Components/Account/Shared/PasskeySubmit.razor.js

@@ -17,19 +17,21 @@ async function fetchWithErrorHandling(url, options = {}) {
     return response;
 }
 
-async function createCredential(signal) {
+async function createCredential(headers, signal) {
     const optionsResponse = await fetchWithErrorHandling('/Account/PasskeyCreationOptions', {
         method: 'POST',
+        headers,
         signal,
     });
     const optionsJson = await optionsResponse.json();
     const options = PublicKeyCredential.parseCreationOptionsFromJSON(optionsJson);
     return await navigator.credentials.create({ publicKey: options, signal });
 }
 
-async function requestCredential(email, mediation, signal) {
+async function requestCredential(email, mediation, headers, signal) {
     const optionsResponse = await fetchWithErrorHandling(`/Account/PasskeyRequestOptions?username=${email}`, {
         method: 'POST',
+        headers,
         signal,
     });
     const optionsJson = await optionsResponse.json();
@@ -46,6 +48,8 @@ customElements.define('passkey-submit', class extends HTMLElement {
             operation: this.getAttribute('operation'),
             name: this.getAttribute('name'),
             emailName: this.getAttribute('email-name'),
+            requestTokenName: this.getAttribute('request-token-name'),
+            requestTokenValue: this.getAttribute('request-token-value'),
         };
 
         this.internals.form.addEventListener('submit', (event) => {
@@ -67,12 +71,16 @@ customElements.define('passkey-submit', class extends HTMLElement {
             throw new Error('Some passkey features are missing. Please update your browser.');
         }
 
+        const headers = {
+            [this.attrs.requestTokenName]: this.attrs.requestTokenValue,
+        };
+
         if (this.attrs.operation === 'Create') {
-            return await createCredential(signal);
+            return await createCredential(headers, signal);
         } else if (this.attrs.operation === 'Request') {
             const email = new FormData(this.internals.form).get(this.attrs.emailName);
             const mediation = useConditionalMediation ? 'conditional' : undefined;
-            return await requestCredential(email, mediation, signal);
+            return await requestCredential(email, mediation, headers, signal);
         } else {
             throw new Error(`Unknown passkey operation '${this.attrs.operation}'.`);
         }
@@ -88,11 +96,14 @@ customElements.define('passkey-submit', class extends HTMLElement {
             const credentialJson = JSON.stringify(credential);
             formData.append(`${this.attrs.name}.CredentialJson`, credentialJson);
         } catch (error) {
+            if (error.name === 'AbortError') {
+                // The user explicitly canceled the operation - return without error.
+                return;
+            }
             console.error(error);
-            if (useConditionalMediation || error.name === 'AbortError') {
-                // We do not relay the error to the user if:
-                // 1. We are attempting conditional mediation, meaning the user did not initiate the operation.
-                // 2. The user explicitly canceled the operation.
+            if (useConditionalMediation) {
+                // An error occurred during conditional mediation, which is not user-initiated.
+                // We log the error in the console but do not relay it to the user.
                 return;
             }
             const errorMessage = error.name === 'NotAllowedError'