Open touch\face ID\biometric auth in blazor wasm app - authentication

Question

I need to add the biometric authentication to my blazor wasm app.
I've found some hard to implement\understand libraries that uses a third part authentication server side.
I only need to open the biometric's dialog from the device (iOS, Android, desktop browser..etc..) then I would to manage manually the authentication with my actual method.
It is possible? If yes, how?
Thanks! :)

Answer 1

Haven't found anything built into blazor yet, so it seems for now you'll have to use jsinterop. Haven't actually tried it in Blazor, but I'd expect it to happen mostly in the js code anyway. There's a nice website just for this, since you have to add a few options and figure out asymmetric keys: https://webauthn.guide/
Might try it soon to find out if there's a more compressed way of presenting an MCVE - if I do figure it out I will update this.
Update
Tried it, this opens the dialog for me.
The actual call happens in JS:
async function doIt(options) {
var newCreds = await navigator.credentials.create({ publicKey: options });
console.log("Created new credentials:", newCreds);
return newCreds;
}
window.doIt = doit;
Put a button into my razor:
<button #onclick="DoIt">Do it</button>
Then the corresponding method and types in the #code block:
private async void DoIt()
{
var credOptions = new PublicKeyCredentialCreationOptions();
Console.WriteLine("Sending options for " + credOptions.user.displayName);
var cred = await Js.InvokeAsync<PublicKeyCredential>("doIt", credOptions);
Console.WriteLine("Received cred");
Console.WriteLine(cred);
}
// Do all the things (I think this is like pattern/faceID/touchID/etc)
static readonly int[] Algs = { -7, -8, -35, -36, -37, -38, -39, -257, -258, -259, -65535 };
private static PublicKeyCredentialCreationOptions.PublicKeyCredentialParameters Alg(int alg)
{
return new PublicKeyCredentialCreationOptions.PublicKeyCredentialParameters("public-key", alg);
}
public class PublicKeyCredentialCreationOptions
{
public byte[] challenge { get; set; } = DateTime.Now.ToString().Select(c => (byte)c).ToArray(); // Just random stuff here I think?
public RelyingParty rp { get; set; } = new ("WebAuthnExample"); // If I understand correctly, id will be auto filled with the current domain
public User user { get; set; } =
new("metallkiller".Select(c => (byte)c).ToArray(), "metallkiller", "Metallkiller");
public PublicKeyCredentialParameters[] pubKeyCredParams { get; set; } = Algs.Select(Alg).ToArray();
public long timeout { get; set; } = 60000; // Not entirely sure what this does - docs has more info
public string attestation { get; set; } = "direct"; // No idea I just copied this
public record RelyingParty(string name);
public record User(byte[] id, string name, string displayName);
public record PublicKeyCredentialParameters(string type, int alg);
}
Good news: This opens the biometric auth dialog and creates a credential.
Bad news: Can't get the credential back to dotnet, maybe I forgot to do some jsinterop-magic or it just doesn't work with credentials, then we might have to read all the things in JS and return them in our own object or something. I'd appreciate anyone telling me what's going on here.
Edit: Source for the return types: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e57ff15825e1a05c923f80f39dbb7966d20db950/types/webappsec-credential-management/index.d.ts