# Passkeys library, now with authenticator icons

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 align="center")

👇 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 align="center")

👇 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 align="center")

> ⚠️ 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!