Creating Passwordless FIDO2 experience
Tags: webauthn, passwordless, fido, auth
Published: 2022-10-07 22:36:59



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

- Microsoft and other big Identity providers have [something](https://learn.microsoft.com/en-us/azure/active-directory/authentication/concept-authentication-passwordless) in place.
- Demo sites like [webauthn.io](https://webauthn.io/)
- Individual companies (to provide the best level of security), e.g. [Bitwarden](https://bitwarden.com/help/setup-two-step-login-fido/) password manager.
- Start-ups, prototypes, e.g. my [fido2me.com](https://fido2me.com/) creation (also [open-source](https://github.com/Fido2me/fido2me))

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

## Use FIDO2 libraries

[Webauthn](https://webauthn.io/) 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](https://github.com/passwordless-lib/fido2-net-lib/).

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](https://www.passwordless.dev/)
- **Components**, e.g. [fido2-for-aspnet](https://www.identityserver.com/products/fido2-for-aspnet)
- **OpenId Connect (OIDC)**: B2B (via [Identity providers](https://help.okta.com/oie/en-us/Content/Topics/identity-engine/authenticators/configure-webauthn.htm)) or B2C ([Social login identity providers](https://www.apple.com/ca/newsroom/2022/05/apple-google-and-microsoft-commit-to-expanded-support-for-fido-standard/))

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](https://learn.microsoft.com/en-us/azure/app-service/configure-authentication-provider-openid-connect) 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xa7zb69497w1cooju87t.png)

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](https://fido2me.com/apps) and click on "New Client".

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wys6u1xs612pzdylp3nb.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmxl2itli21lgtp9oxxh.png)

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!