Update template passkey functionality

Author: MackinnonBuck

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/.template.config/template.json

@@ -135,6 +135,7 @@
           "exclude": [
             "BlazorWeb-CSharp/Components/Account/**",
             "BlazorWeb-CSharp/Data/**",
+            "BlazorWeb-CSharp/wwwroot/BlazorWeb-CSharp.lib.module.js",
             "BlazorWeb-CSharp.Client/UserInfo.cs",
             "BlazorWeb-CSharp.Client/Pages/Auth.razor"
           ]

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

@@ -49,6 +49,39 @@ public static IEndpointConventionBuilder MapAdditionalIdentityEndpoints(this IEn
             return TypedResults.LocalRedirect($"~/{returnUrl}");
         });
 
+        accountGroup.MapPost("/PasskeyCreationOptions", async (
+            HttpContext context,
+            [FromServices] UserManager<ApplicationUser> userManager,
+            [FromServices] SignInManager<ApplicationUser> signInManager) =>
+        {
+            var user = await userManager.GetUserAsync(context.User);
+            if (user is null)
+            {
+                return Results.NotFound($"Unable to load user with ID '{userManager.GetUserId(context.User)}'.");
+            }
+
+            var userId = await userManager.GetUserIdAsync(user);
+            var userName = await userManager.GetUserNameAsync(user) ?? "User";
+            var userEntity = new PasskeyUserEntity(userId, userName, displayName: userName);
+            var passkeyCreationArgs = new PasskeyCreationArgs(userEntity);
+            var options = await signInManager.ConfigurePasskeyCreationOptionsAsync(passkeyCreationArgs);
+            return TypedResults.Content(options.AsJson(), contentType: "application/json");
+        });
+
+        accountGroup.MapPost("/PasskeyRequestOptions", async (
+            [FromServices] UserManager<ApplicationUser> userManager,
+            [FromServices] SignInManager<ApplicationUser> signInManager,
+            [FromQuery] string? email) =>
+        {
+            var user = string.IsNullOrEmpty(email) ? null : await userManager.FindByEmailAsync(email);
+            var passkeyRequestArgs = new PasskeyRequestArgs<ApplicationUser>
+            {
+                User = user,
+            };
+            var options = await signInManager.ConfigurePasskeyRequestOptionsAsync(passkeyRequestArgs);
+            return TypedResults.Content(options.AsJson(), contentType: "application/json");
+        });
+
         var manageGroup = accountGroup.MapGroup("/Manage").RequireAuthorization();
 
         manageGroup.MapPost("/LinkExternalLogin", async (

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Account/Pages/Login.razor

@@ -17,7 +17,6 @@
 <div class="row">
     <div class="col-lg-6">
         <section>
-            <PasskeyHandler CurrentRequestOptions="@currentPasskeyRequestOptions" OnResponse="LoginUserWithPasskey" OnError="SetPasskeyError" />
             <StatusMessage Message="@errorMessage" />
             <EditForm EditContext="editContext" method="post" OnSubmit="LoginUser" FormName="login">
                 <DataAnnotationsValidator />
@@ -41,12 +40,12 @@
                     </label>
                 </div>
                 <div>
-                    <button type="submit" class="w-100 btn btn-lg btn-primary" disabled="@(currentPasskeyRequestOptions is not null)">Log in</button>
+                    <button type="submit" class="w-100 btn btn-lg btn-primary">Log in</button>
                 </div>
                 <hr />
                 <div class="d-flex flex-column">
                     <span class="text-secondary mx-auto mt-2">OR</span>
-                    <button type="submit" name="Input.UsePasskey" value="true" class="btn btn-link mx-auto" disabled="@(currentPasskeyRequestOptions is not null)">Log in with a passkey</button>
+                    <PasskeySubmit Operation="PasskeyOperation.Request" Name="Input.Passkey" EmailName="Input.Email" class="btn btn-link mx-auto">Log in with a passkey</PasskeySubmit>
                 </div>
                 <hr />
                 <div>
@@ -74,14 +73,12 @@
 
 @code {
     private string? errorMessage;
-
     private EditContext editContext = default!;
-    private string? currentPasskeyRequestOptions;
 
     [CascadingParameter]
     private HttpContext HttpContext { get; set; } = default!;
 
-    [SupplyParameterFromForm(FormName = "login")]
+    [SupplyParameterFromForm]
     private InputModel Input { get; set; } = new();
 
     [SupplyParameterFromQuery]
@@ -100,32 +97,38 @@
 
     public async Task LoginUser()
     {
-        // When performing passkey sign-in, don't perform form validation.
-        // If provided, we use the email as a hint to suggest which user is likely being signed in.
-        if (Input.UsePasskey)
+        if (!string.IsNullOrEmpty(Input.Passkey?.Error))
         {
-            var user = Input.Email is { Length: > 0 } email
-                ? await UserManager.FindByEmailAsync(email)
-                : null;
-
-            var passkeyRequestArgs = new PasskeyRequestArgs<ApplicationUser>
-            {
-                User = user,
-            };
-            var options = await SignInManager.ConfigurePasskeyRequestOptionsAsync(passkeyRequestArgs);
-            currentPasskeyRequestOptions = options.AsJson();
+            errorMessage = $"Error: Could not log in using the provided passkey: {Input.Passkey.Error}";
             return;
         }
 
-        // If doing a password sign-in, validate the form.
-        if (!editContext.Validate())
+        SignInResult result;
+        if (!string.IsNullOrEmpty(Input.Passkey?.CredentialJson))
         {
-            return;
+            // When performing passkey sign-in, don't perform form validation.
+            var options = await SignInManager.RetrievePasskeyRequestOptionsAsync();
+            if (options is null)
+            {
+                errorMessage = "Error: Could not complete passkey login. Please try again.";
+                return;
+            }
+
+            result = await SignInManager.PasskeySignInAsync(Input.Passkey.CredentialJson, options);
+        }
+        else
+        {
+            // If doing a password sign-in, validate the form.
+            if (!editContext.Validate())
+            {
+                return;
+            }
+
+            // This doesn't count login failures towards account lockout
+            // To enable password failures to trigger account lockout, set lockoutOnFailure: true
+            result = await SignInManager.PasswordSignInAsync(Input.Email, Input.Password, Input.RememberMe, lockoutOnFailure: false);
         }
 
-        // This doesn't count login failures towards account lockout
-        // To enable password failures to trigger account lockout, set lockoutOnFailure: true
-        var result = await SignInManager.PasswordSignInAsync(Input.Email, Input.Password, Input.RememberMe, lockoutOnFailure: false);
         if (result.Succeeded)
         {
             Logger.LogInformation("User logged in.");
@@ -148,33 +151,6 @@
         }
     }
 
-    public async Task LoginUserWithPasskey(string responseJson)
-    {
-        var options = await SignInManager.RetrievePasskeyRequestOptionsAsync();
-        if (options is null)
-        {
-            errorMessage = "Error: Could not complete passkey login. Please try again.";
-            return;
-        }
-
-        var result = await SignInManager.PasskeySignInAsync(responseJson, options);
-        if (result.Succeeded)
-        {
-            Logger.LogInformation("User logged in.");
-            RedirectManager.RedirectTo(ReturnUrl);
-        }
-        else
-        {
-            errorMessage = "Error: Could not log in using the provided passkey.";
-            return;
-        }
-    }
-
-    public void SetPasskeyError(string? error)
-    {
-        errorMessage = $"Error: Could not log in using the provided passkey{(string.IsNullOrEmpty(error) ? "." : $": {error}")}";
-    }
-
     private sealed class InputModel
     {
         [Required]
@@ -188,6 +164,6 @@
         [Display(Name = "Remember me?")]
         public bool RememberMe { get; set; }
 
-        public bool UsePasskey { get; set; }
+        public PasskeyInputModel? Passkey { get; set; }
     }
 }