Creating Passwordless FIDO2 experience

How many websites natively support FIDO2 (WebAuthn)? Just a few.

• Microsoft and other big Identity providers have something in place.
• Demo sites like webauthn.io
• Individual companies (to provide the best level of security), e.g. Bitwarden password manager.
• Start-ups, prototypes, e.g. my fido2me.com creation (also open-source)

So how can we easily build a website supporting FIDO2 (WebAuthn)?

Use FIDO2 libraries

Webauthn website contains a list of open-source libraries for many programming languages:

• Python
• Go
• TypeScript
• Ruby
• Java
• dotnet

The repositories are great, and fido2me uses a customized version of this project.

If you are a developer, I recommend reviewing these repositories. They will provide flexibility in exchange for your time to learn new technology. But it is also rewarding and quite fascinating.

These projects are focused on supporting all available features of FIDO2. It is not a solution, but rather a framework to build one.

FIDO2 integrations

If you don't want to start from scratch, choose one of the 3 options.

• API style, e.g. passwordless.dev
• Components, e.g. fido2-for-aspnet
• OpenId Connect (OIDC): B2B (via Identity providers) or B2C (Social login identity providers)

I built fido2me as a social login identity provider. You need to create a new account and you will be able to access any website that accepts fido2me. Let's quickly build one.

Enable FIDO2me authentication for Azure Functions

Azure Functions service has built-in OIDC support - a great candidate to start. Similarly, you can enable a new OIDC provider for Azure App Service.

The official guide covers integration with a generic OIDC provider. You will need to know:

• The metadata URL
• Client ID
• Client Secret

Create a new function app, go to the Authentication section, and add a new identity provider selecting "OpenID Connect" as a type.

The metadata URL will be: https://fido2me.com/.well-known/openid-configuration

Client ID and Client Secret need to be created on fido2me.com. Let's do it.

Visit https://fido2me.com/apps and click on "New Client".

Complete fields, 2 of them are required: application Name and Callback URL (Redirect URI).

Copy and paste Client ID / Client Secret into Azure Portal.

Can use Secret needs to be selected. We use a confidential client.

Unselect Proof Key (PKCE). The authorization code grant with PKCE flow is recommended even for confidential clients. But it is not supported by Azure right now.

Enter your callback URL - https://your website/.auth/login/Azure App OIDC provider name/callback

My function is hosted at https://fido2metest2.azurewebsites.net. I called my identity provider as fido2me2 in Azure Function App. Thus, my callback URL: https://fido2metest2.azurewebsites.net/.auth/login/fido2me2/callback

Save the app on fido2me.com and complete the creation of a new OIDC provider at Azure Function App. You may need to accept additional changes related to changing the authentication methods in Azure Function App.

Testing FIDO2me OIDC

1. Visit Azure Function URL.
2. Complete FIDO2 Sign In.
3. You are now authenticated and redirected back to your Function.

Note: FIDO2 challenge and related authentication cookies will expire after a few minutes. You will need to refresh the page to try to sign in again.

Congratulations: Now we have one more FIDO2-enabled website. In the next article, I will show how to develop a new web application with dotnet that actually supports the authorization code grant with PKCE flow!