WebAuthn
Web Authentication API (Password-less/Passkey)
How to use the WebAuthn class of the bit Butil?
Usage
To use the WebAuthn api of Butil you need to inject the Bit.Butil.WebAuthn class and use it like this:
@inject Bit.Butil.WebAuthn webAuthn
@code {
var result = await webAuthn.CreateCredential(new { ... });
}
Note: For optimal security, it is advisable to implement Web Authentication alongside a server-side counterpart
that securely stores essential data for future verification. This approach, similar to our existing integration with
the FIDO2 infrastructure,
ensures robust authentication and safeguards against potential threats.
You can check it out in action in the Passwordless tab on the settings page of
bit Boilerplate project template
Methods
CreateCredential:
Creates a new credential using the provided options. (MDN).
@inject Bit.Butil.WebAuthn webAuthn
<BitButton OnClick="@Create">Create</BitButton>
<div>Result:</div>
<div>@createResult?.ToString()?.Replace(",", ",\n")</div>
@if (string.IsNullOrWhiteSpace(createError) is false)
{
<div>error: @createError</div>
}
@code {
private object? createResult;
private string? createError;
private async Task Create()
{
try
{
createError = null;
createResult = await webAuthn.CreateCredential(new
{
challenge = "testChallenge",
rp = new { name = "testRp" },
attestation = "direct",
user = new { id = "userId", name = "testUser", displayName = "testUser" },
authenticatorSelection = new { authenticatorAttachment = "platform" },
pubKeyCredParams = new object[]
{
new { alg = -7, type = "public-key" },
new { alg = -8, type = "public-key" },
new { alg = -257, type = "public-key" }
}
});
}
catch (Exception ex)
{
createError = ex.ToString();
}
}
}GetCredential:
Gets a credential using the provided options. (MDN).
@inject Bit.Butil.WebAuthn webAuthn
<BitButton OnClick="@Get">Get</BitButton>
<div>Result:</div>
<div>@getResult?.ToString()?.Replace(",", ",\n")</div>
@if (string.IsNullOrWhiteSpace(getError) is false)
{
<div>error: @getError</div>
}
@code {
private object? getResult;
private string? getError;
private async Task Get()
{
try
{
getError = null;
var id = ((JsonElement?)createResult)?.GetProperty("rawId").ToString();
var options = id is null
? new { challenge = "test", allowCredentials = new object[] { } }
: new { challenge = "test", allowCredentials = new object[] { new { id, type = "public-key" } } };
getResult = await webAuthn.GetCredential(options);
}
catch (Exception ex)
{
getError = ex.ToString();
}
}
}Verify:
Verifies a user using the credential api of the browser.
@inject Bit.Butil.WebAuthn webAuthn
<BitButton OnClick="@Verify">Verify</BitButton>
<div>Result: @verifyResult</div>
@code {
private bool? verifyResult;
private async Task Verify()
{
verifyResult = await webAuthn.Verify();
}
}