My Passkeys lib, now with authenticator icons
Tags: webauthn, passkeys, authentication, webdev
Published: 2024-02-26 21:14:38

Hello folks!

Since I have little time to cater about [Passwordless.ID](https://passwordless.id/) lately, I wanted to at publish some little update. So here we go, the [WebAuthn library](https://webauthn.passwordless.id/) (to enable passwordless login using passkeys) now also delivers more information about the "authenticator". In particular the icon and whether it is a multi-device or device-bound credential. (The latter one is actually just interpreting the existing flags)

👇 Check out the [simple demo](https://webauthn.passwordless.id/demos/basic.html) if you want.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1708965557829/0ae8c2f3-84ee-454c-a3ab-9b0321c5f599.png)

👇 Or the list of [authenticators](https://webauthn.passwordless.id/demos/authenticators.html).

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1708965618988/aa3ff3ec-5770-46d6-aef8-c81d5fb7e6a4.png)

👇 Or the [playground](https://webauthn.passwordless.id/demos/playground.html) to experiment with the various options.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1708965673392/a056b457-be2e-4e02-8eff-3fc30b348230.png)

> ⚠️ As a side note, please do not forget that the challenge should be randomly generated server side! I have found repositories on GitHub using hardcoded challenges, which is of course a red flag regarding security since it opens the way to replay attacks!

Read [here](https://passwordless.id/protocols/webauthn/1_introduction) or [here](https://webauthn.passwordless.id/) if you want a brief introduction of how the WebAuthn protocol behind Passkeys works.

---

Starting from version 1.4.0+, the parsed registration payload now looks as follows, with extra properties `synced`, `icon_light` and `icon_dark`.

```json
{
  "username": "Arnaud",
  "credential": {...},
  "client": {...},
  "authenticator": {
    "rpIdHash": "T7IIVvJKaufa_CeBCQrIR3rm4r0HJmAjbMYUxvt8LqA=",
    "flags": {...},
    "counter": 0,
    "synced": false,
    "aaguid": "08987058-cadc-4b81-b6e1-30de50dcbe96",
    "name": "Windows Hello",
    "icon_light": "https://webauthn.passwordless.id/authenticators/08987058-cadc-4b81-b6e1-30de50dcbe96-light.png",
    "icon_dark": "https://webauthn.passwordless.id/authenticators/08987058-cadc-4b81-b6e1-30de50dcbe96-dark.png"
  },
  "attestation": "o2NmbXRjdHBtZ2F0dFN0bXSmY2FsZzn__mNzaWdZAQB25KbRrQPjtlx0qZ2Tsvh2YHaPTPTUJznShhr5XnP3zBmVv..."
}
```

The icons are deliberately made as links to keep the library compact. Otherwise, it would be bloated way beyond the megabyte. Instead, all icons are available as links.

These authenticator icons were made thanks to this [repository](https://github.com/passkeydeveloper/passkey-authenticator-aaguids) which contains the icons as data urls, sometimes in PNG, sometimes in SVG, sometimes square, sometimes rectangle, some tiny, some really large, etc. So some extra scripting was done to homogenize them as 64x64 PNGs and host them so that each "aaguid" can be shown through a direct link.

---

Thanks for reading. If you like it, leaving a comment or a [star](https://github.com/passwordless-id/webauthn) is appreciated. Getting some feedback is always nice.

Have a nice day!