# webauthn-components > Web Components that make the Web Authentication API a little easier to use. Latest version **0.2.9** (published 2022-07-02) · ISC license · 0 weekly downloads ## Install ```sh npm install webauthn-components pnpm add webauthn-components yarn add webauthn-components bun add webauthn-components ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.2.9 | | Published | 2022-07-02 | | First published | 2021-09-07 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | ESM | | Dependencies | 0 | | Unpacked size | 78.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 13 | | Author | Bogdan Arvinte | | Maintainers | bogdan.arvinte | | Keywords | web, components, authn | ## Links - npm: https://www.npmjs.com/package/webauthn-components - Repository: https://github.com/TechWebAuthn/webauthn-components - Homepage: https://github.com/TechWebAuthn/webauthn-components#readme - Issues: https://github.com/TechWebAuthn/webauthn-components/issues - npm.io page: https://npm.io/package/webauthn-components ## Alternatives - [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads - [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads - [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads - [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads - [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads ## Recent versions - 0.2.9 (latest) — 2022-07-02 - 0.2.8 — 2021-10-07 - 0.2.7 — 2021-09-18 - 0.2.6 — 2021-09-07 ## README # Web Components for the Web Authentication API A collection of Web Components that make the Web Authentication API a little easier to use. ## Installation ```bash npm i webauthn-components ``` These components use CSS [`::part`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) to enable styling ## Components - [webauthn-login](#webauthn-login) - [webauthn-registration](#webauthn-registration) - [webauthn-recovery](#webauthn-recovery) - [webauthn-enrollment-requester](#webauthn-enrollment-requester) - [webauthn-enrollment-provider](#webauthn-enrollment-provider) - [webauthn-rtc-enrollment-requester](#webauthn-rtc-enrollment-requester) - [webauthn-rtc-enrollment-provider](#webauthn-rtc-enrollment-provider) ## **webauthn-login** ^{[Back to components list ☝](#components)} _Used for connecting with a previously registered account_ ### **Usage** with default values ```js import "webauthn-components/login"; /* html */ ; ``` with custom values ```js import "webauthn-components/login"; /* html */ ; ``` ### **Properties**

⚙️ assertionStartUrl

_Endpoint for retrieving details and challenge from the server_ - type: `String` - default: `/api/assertion/start`

⚙️ assertionFinishUrl

_Endpoint for completing the assertion process and sending the challenge result to the server_ - type: `String` - default: `/api/assertion/finish`

⚙️ fetchOptions

_Fetch options used for all request within this component_ - type: `Object` - default: ```json { "method": "POST", "credentials": "include", "headers": { "Content-Type": "application/json" } } ```

⚙️ publicKeyCredentialRequestOptionsDecoder

_PublicKeyCredentialRequestOptions decoding function (i.e. Base64URLString to ArrayBuffer)_ - type: `Function` - default: `decodePublicKeyCredentialRequestOptions` from `utils/parse`

⚙️ loginCredentialEncoder

_Credential encoding function (i.e. ArrayBuffer to Base64URLString)_ - type: `Function` - default: `encodeLoginCredential` from `utils/parse`

✏️ buttonText

_The text displayed on the login button_ - type: `String` - default: `Login` - reflected attribute: `button-text`

⚙️ inputType

_The type of input to use for the username_ - type: `String` - default: `text` (any valid HTML input type) - reflected attribute: `input-type`

⚙️ inputName

_The name of the input to use for the username_ - type: `String` - default: `username` - reflected attribute: `input-name`

✏️ label

_Username label content_ - type: `String` - default: `Username` - reflected attribute: `label`

⚙️ noUsername

_Should login be done without a username_ - type: `Boolean` - default: `false` - reflected attribute: `no-username`

### **Events**

🔼 login-started

_Emitted when the login process starts (i.e. on form submit)_ - type: `CustomEvent` - detail: `null`

🔼 login-retrieved

_Emitted when retrieving the local credentials using `navigator.credentials.get()`_ - type: `CustomEvent` - detail: `null`

🔼 login-finished

_Emitted when the login process is completed succesfully_ - type: `CustomEvent` - detail: `{...}` (content returned by the `assertionFinishUrl` endpoint)

🔼 login-error

_Emitted when the login process is interrupted by an error_ - type: `CustomEvent` - detail: `{ message: String }`

### **Styling**

🎨 ::part(form)

_Exposes the `form` element for styling_ ```css webauthn-login::part(form) {...} ```

🎨 ::part(label)

_Exposes the `label` element for styling_ ```css webauthn-login::part(label) {...} ```

🎨 ::part(input)

_Exposes the `input` element for styling_ ```css webauthn-login::part(input) {...} ```

🎨 ::part(button)

_Exposes the `button` element for styling_ ```css webauthn-login::part(button) {...} ```

--- ## **webauthn-registration** ^{[Back to components list ☝](#components)} _Used for creating a new account_ ### **Usage** with default values ```js import "webauthn-components/registration"; /* html */ ; ``` with custom values ```js import "webauthn-components/registration"; /* html */ ; const registrationComponent = document.querySelector("webauthn-registration"); registrationComponent.fetchOptions = { ...registrationComponent.fetchOptions, cache: "no-cache" }; ``` ### **Properties**

⚙️ registrationStartUrl

_Endpoint for retrieving initial details and challenge from the server_ - type: `String` - default: `/api/registration/start`

⚙️ registrationFinishUrl

_Endpoint for completing the registration process_ - type: `String` - default: `/api/registration/finish`

⚙️ fetchOptions

_Fetch options used for all request within this component_ - type: `Object` - default: ```json { "method": "POST", "credentials": "include", "headers": { "Content-Type": "application/json" } } ```

⚙️ publicKeyCredentialCreateOptionsDecoder

_PublicKeyCredentialCreateOptions decoding function (i.e. Base64URLString to ArrayBuffer)_ - type: `Function` - default: `decodePublicKeyCredentialCreateOptions` from `utils/parse`

⚙️ registerCredentialEncoder

_Credential encoding function (i.e. ArrayBuffer to Base64URLString)_ - type: `Function` - default: `encodeRegisterCredential` from `utils/parse`

✏️ buttonText

_The text displayed on the login button_ - type: `String` - default: `Login` - reflected attribute: `button-text`

⚙️ inputType

_The type of input to use for the username_ - type: `String` - default: `text` (any valid HTML input type) - reflected attribute: `input-type`

⚙️ inputName

_The name of the input to use for the username_ - type: `String` - default: `username` - reflected attribute: `input-name`

✏️ label

_Username label content_ - type: `String` - default: `Username` - reflected attribute: `label`

⚙️ noUsername

_Should login be done without a username_ - type: `Boolean` - default: `false` - reflected attribute: `no-username`

### **Events**

🔼 registration-started

_Emitted when the registration process starts (i.e. on form submit)_ - type: `CustomEvent` - detail: `null`

🔼 registration-created

_Emitted after creating the local credentials using `navigator.credentials.create()`_ - type: `CustomEvent` - detail: `null`

🔼 registration-finished

_Emitted when the registration process is completed succesfully_ - type: `CustomEvent` - detail: `{...}` (content returned by the `registrationFinishUrl` endpoint)

🔼 registration-error

_Emitted when the registration process is interrupted by an error_ - type: `CustomEvent` - detail: `{ message: String }`

### **Styling**

🎨 ::part(form)

_Exposes the `form` element for styling_ ```css webauthn-registration::part(form) {...} ```

🎨 ::part(label)

_Exposes the `label` element for styling_ ```css webauthn-registration::part(label) {...} ```

🎨 ::part(input)

_Exposes the `input` element for styling_ ```css webauthn-registration::part(input) {...} ```

🎨 ::part(button)

_Exposes the `button` element for styling_ ```css webauthn-registration::part(button) {...} ```

--- ## **webauthn-recovery** ^{[Back to components list ☝](#components)} _Used for recovering access to an existing account_ ### **Usage** with default values ```js import "webauthn-components/recovery"; /* html */ ; ``` with custom values ```js import "webauthn-components/recovery"; /* html */ ; const recoveryComponent = document.querySelector("webauthn-recovery"); recoveryComponent.fetchOptions = { ...recoveryComponent.fetchOptions, cache: "no-cache" }; ``` ### **Properties**

⚙️ recoveryStartUrl

_Endpoint for retrieving initial details and challenge from the server_ - type: `String` - default: `/api/registration/start`

⚙️ recoveryFinishUrl

_Endpoint for completing the recovery process_ - type: `String` - default: `/api/registration/finish`

⚙️ fetchOptions

_Fetch options used for all request within this component_ - type: `Object` - default: ```json { "method": "POST", "credentials": "include", "headers": { "Content-Type": "application/json" } } ```

⚙️ publicKeyCredentialCreateOptionsDecoder

_PublicKeyCredentialCreateOptions decoding function (i.e. Base64URLString to ArrayBuffer)_ - type: `Function` - default: `decodePublicKeyCredentialCreateOptions` from `utils/parse`

⚙️ registerCredentialEncoder

_Credential encoding function (i.e. ArrayBuffer to Base64URLString)_ - type: `Function` - default: `encodeRegisterCredential` from `utils/parse`

✏️ buttonText

_The text displayed on the recovery button_ - type: `String` - default: `Recover` - reflected attribute: `button-text`

⚙️ inputType

_The type of input to use for the recovery token_ - type: `String` - default: `text` (any valid HTML input type) - reflected attribute: `input-type`

⚙️ inputName

_The name of the input to use for the recovery token_ - type: `String` - default: `recovery-token` - reflected attribute: `input-name`

✏️ label

_Recovery token label content_ - type: `String` - default: `Recovery token` - reflected attribute: `label`

### **Events**

🔼 recovery-started

_Emitted when the recovery process starts (i.e. on form submit)_ - type: `CustomEvent` - detail: `null`

🔼 recovery-created

_Emitted after creating the local credentials using `navigator.credentials.create()`_ - type: `CustomEvent` - detail: `null`

🔼 recovery-finished

_Emitted when the recovery process is completed succesfully_ - type: `CustomEvent` - detail: `{...}` (content returned by the `registrationFinishUrl` endpoint)

🔼 recovery-error

_Emitted when the recovery process is interrupted by an error_ - type: `CustomEvent` - detail: `{ message: String }`

### **Styling**

🎨 ::part(form)

_Exposes the `form` element for styling_ ```css webauthn-recovery::part(form) {...} ```

🎨 ::part(label)

_Exposes the `label` element for styling_ ```css webauthn-recovery::part(label) {...} ```

🎨 ::part(input)

_Exposes the `input` element for styling_ ```css webauthn-recovery::part(input) {...} ```

🎨 ::part(button)

_Exposes the `button` element for styling_ ```css webauthn-recovery::part(button) {...} ```

--- ## **webauthn-enrollment-requester** ^{[Back to components list ☝](#components)} _Used for initiating the enrollment flow, which adds a new device to an existing account_ ### **Usage** with default values ```js import "webauthn-components/enrollment-requester"; /* html */ ; ``` with custom values ```js import "webauthn-components/enrollment-requester"; /* html */ ; const enrollmentComponent = document.querySelector("webauthn-enrollment-requester"); enrollmentComponent.fetchOptions = { ...enrollmentComponent.fetchOptions, cache: "no-cache" }; ``` ### **Properties**

⚙️ enrollmentStartUrl

_Endpoint for retrieving initial details and challenge from the server_ - type: `String` - default: `/api/registration/start`

⚙️ enrollmentFinishUrl

_Endpoint for completing the recovery process_ - type: `String` - default: `/api/registration/finish`

⚙️ fetchOptions

_Fetch options used for all request within this component_ - type: `Object` - default: ```json { "method": "POST", "credentials": "include", "headers": { "Content-Type": "application/json" } } ```

⚙️ publicKeyCredentialCreateOptionsDecoder

_PublicKeyCredentialCreateOptions decoding function (i.e. Base64URLString to ArrayBuffer)_ - type: `Function` - default: `decodePublicKeyCredentialCreateOptions` from `utils/parse`

⚙️ registerCredentialEncoder

_Credential encoding function (i.e. ArrayBuffer to Base64URLString)_ - type: `Function` - default: `encodeRegisterCredential` from `utils/parse`

✏️ buttonText

_The text displayed on the enrollment button_ - type: `String` - default: `Enroll device` - reflected attribute: `button-text`

⚙️ inputType

_The type of input to use for the enrollment token_ - type: `String` - default: `text` (any valid HTML input type) - reflected attribute: `input-type`

⚙️ inputName

_The name of the input to use for the enrollment token_ - type: `String` - default: `registration-add-token` - reflected attribute: `input-name`

✏️ label

_Enrollment token label content_ - type: `String` - default: `Enrollment token` - reflected attribute: `label`

### **Events**

🔼 enrollment-requested

_Emitted when the enrollment process starts (i.e. on form submit)_ - type: `CustomEvent` - detail: `null`

🔼 enrollment-created

_Emitted after creating the local credentials using `navigator.credentials.create()`_ - type: `CustomEvent` - detail: `null`

🔼 enrollment-finished

_Emitted when the enrollment process is completed succesfully_ - type: `CustomEvent` - detail: `{...}` (content returned by the `registrationFinishUrl` endpoint)

🔼 enrollment-error

_Emitted when the enrollment process is interrupted by an error_ - type: `CustomEvent` - detail: `{ message: String }`

### **Styling**

🎨 ::part(form)

_Exposes the `form` element for styling_ ```css webauthn-enrollment-requester::part(form) {...} ```

🎨 ::part(label)

_Exposes the `label` element for styling_ ```css webauthn-enrollment-requester::part(label) {...} ```

🎨 ::part(input)

_Exposes the `input` element for styling_ ```css webauthn-enrollment-requester::part(input) {...} ```

🎨 ::part(button)

_Exposes the `button` element for styling_ ```css webauthn-enrollment-requester::part(button) {...} ```

--- ## **webauthn-enrollment-provider** ^{[Back to components list ☝](#components)} _Used for generating the registration add token, required to add a new device to an existing account_ ### **Usage** with default values ```js import "webauthn-components/enrollment-provider"; /* html */ ; ``` with custom values ```js import "webauthn-components/enrollment-provider"; /* html */ ; const enrollmentComponent = document.querySelector("webauthn-enrollment-provider"); enrollmentComponent.fetchOptions = { ...enrollmentComponent.fetchOptions, cache: "no-cache" }; ``` ### **Properties**

⚙️ enrollmentTokenUrl

_Endpoint for retrieving the registration add token from the server_ - type: `String` - default: `/api/registration/add`

⚙️ fetchOptions

_Fetch options used for all request within this component_ - type: `Object` - default: ```json { "method": "GET", "credentials": "include", "headers": { "Content-Type": "application/json" } } ```

✏️ buttonText

_The text displayed on the enrollment button_ - type: `String` - default: `Connect` - reflected attribute: `button-text`

### **Events**

🔼 enrollment-requested

_Emitted when the enrollment process starts (i.e. on form submit)_ - type: `CustomEvent` - detail: `null`

🔼 enrollment-provided

_Emitted when the server returns the registration add token_ - type: `CustomEvent` - detail: `{...}` (content returned by the `enrollmentTokenUrl` endpoint)

🔼 enrollment-error

_Emitted when the enrollment process is interrupted by an error_ - type: `CustomEvent` - detail: `{ message: String }`

### **Styling**

🎨 ::part(form)

_Exposes the `form` element for styling_ ```css webauthn-enrollment-requester::part(form) {...} ```

🎨 ::part(button)

_Exposes the `button` element for styling_ ```css webauthn-enrollment-requester::part(button) {...} ```

--- ## **webauthn-rtc-enrollment-requester** ^{[Back to components list ☝](#components)} _Used for initiating the enrollment flow using WebRTC_ ### **Usage** with default values ```js import "webauthn-components/rtc/enrollment-requester"; /* html */ ; ``` with custom values ```js import "webauthn-components/rtc/enrollment-requester"; /* html */ ; const enrollmentComponent = document.querySelector("webauthn-rtc-enrollment-requester"); enrollmentComponent.confirmButtonText = `Add this device to ${userName}'s account`; enrollmentComponent.agreementText = "I know what I'm doing"; ``` ### **Properties**

⚙️ enrollmentStartUrl

_Endpoint for retrieving initial details and challenge from the server_ - type: `String` - default: `/api/registration/start`

⚙️ enrollmentFinishUrl

_Endpoint for completing the recovery process_ - type: `String` - default: `/api/registration/finish`

⚙️ fetchOptions

_Fetch options used for all request within this component_ - type: `Object` - default: ```json { "method": "POST", "credentials": "include", "headers": { "Content-Type": "application/json" } } ```

⚙️ webSocketSignalingEndpoint

_WebSocket endpoint used for the discovery of the two devices through WebRTC_ - type: `String` - default: `/api/socket`

⚙️ rtcIceServers

_List of ICE servers to use for WebRTC connectivity_ - type: `Array` - default: `[{ urls: "stun:stun.services.mozilla.com" }]`

⚙️ RTC

_Access to the RTCPeerConnection instance associated with this component_ - type: `RTCPeerConnection` - default: `null` until initialization

⚙️ publicKeyCredentialCreateOptionsDecoder

_PublicKeyCredentialCreateOptions decoding function (i.e. Base64URLString to ArrayBuffer)_ - type: `Function` - default: `decodePublicKeyCredentialCreateOptions` from `utils/parse`

⚙️ registerCredentialEncoder

_Credential encoding function (i.e. ArrayBuffer to Base64URLString)_ - type: `Function` - default: `encodeRegisterCredential` from `utils/parse`

✏️ requestButtonText

_The text displayed on the button used to generate WebSocket room code_ - type: `String` - default: `Generate code` - reflected attribute: `request-button-text`

✏️ confirmButtonText

_The text displayed on the button used to confirm the enrollment_ - type: `String` - default: `Enroll device` - reflected attribute: `confirm-button-text`

✏️ cancelButtonText

_The text displayed on the button used to cancel the enrollment_ - type: `String` - default: `Cancel` - reflected attribute: `cancel-button-text`

✏️ agreementText

_The text displayed next to the checkbox for confirming the enrollment_ - type: `String` - default: `I understand that this device will be added to another account` - reflected attribute: `agreement-text`

⚙️ peerCode

_The WebSocket room code used to establish connectivity between the devices_ - type: `String` - default: `""` - reflected attribute: `peer-code`

⚙️ registrationAddToken

_The registration add token received from the authenticated device_ - type: `String` - default: `""` - reflected attribute: `registration-add-token`

### **Events**

🔼 enrollment-code-requested

_Emitted when user start the enrollment process by requesting a peer code_ - type: `CustomEvent` - detail: `null`

🔼 enrollment-provider-connected

_Emitted after a enrollment provider has successfuly connected via WebRTC`_ - type: `CustomEvent` - detail: `{ user: String }`

🔼 enrollment-cancelled

_Emitted when the enrollment process is cancelled by the requesting user_ - type: `CustomEvent` - detail: `null`

🔼 enrollment-agreement-accepted

_Emitted when the user has checked the agreement field_ - type: `CustomEvent` - detail: `null`

🔼 enrollment-agreement-declined

_Emitted when the user has unchecked the agreement field_ - type: `CustomEvent` - detail: `null`

🔼 enrollment-registration-token-received

_Emitted when the registration add token is received from the provider and set on the property_ - type: `CustomEvent` - detail: `null`

🔼 enrollment-started

_Emitted when the enrollment process begins registering the new device_ - type: `CustomEvent` - detail: `null`

🔼 enrollment-created

_Emitted when the enrollment process has successfuly created the credentials_ - type: `CustomEvent` - detail: `null`

🔼 enrollment-completedd

_Emitted when the enrollment process has successfuly completed and the device has been registered to an existing account_ - type: `CustomEvent` - detail: `{ ... }` (content returned by the `enrollmentFinishUrl` endpoint)

🔼 enrollment-error

_Emitted when the enrollment process is interrupted by an error_ - type: `CustomEvent` - detail: `{ message: String }`

### **Styling**

🎨 ::part(form)

_Exposes the `form` element for styling_ ```css webauthn-enrollment-requester::part(form) {...} ```

🎨 ::part(label)

_Exposes the `label` elements for styling_ ```css webauthn-enrollment-requester::part(label) {...} ```

🎨 ::part(checkbox)

_Exposes the `input[type=checkbox]` element for styling_ ```css webauthn-enrollment-requester::part(checkbox) {...} ```

🎨 ::part(button)

_Exposes the `button` elements for styling_ ```css webauthn-enrollment-requester::part(button) {...} ```

🎨 ::part(request-button)

_Exposes the request `button` element for styling_ ```css webauthn-enrollment-requester::part(request-button) {...} ```

🎨 ::part(confirm-button)

_Exposes the confirm `button` element for styling_ ```css webauthn-enrollment-requester::part(confirm-button) {...} ```

🎨 ::part(cancel-button)

_Exposes the cancel `button` element for styling_ ```css webauthn-enrollment-requester::part(cancel-button) {...} ```

🎨 ::part(hidden)

_Exposes the elements marked `[hidden]` for styling_ ```css webauthn-enrollment-requester::part(hidden) {...} ```

--- ## **webauthn-rtc-enrollment-provider** ^{[Back to components list ☝](#components)} _Used for providing the registration add token in the enrollment flow using WebRTC_ ### **Usage** with default values ```js import "webauthn-components/rtc/enrollment-provider"; /* html */ ; ``` with custom values ```js import "webauthn-components/rtc/enrollment-provider"; /* html */ ; const enrollmentComponent = document.querySelector("webauthn-rtc-enrollment-provider"); enrollmentComponent.webSocketSignalingEndpoint = "/api/ws"; enrollmentComponent.inputName = "ws-peer-code" ``` ### **Properties**

⚙️ enrollmentTokenUrl

_Endpoint for retrieving the registration add token for the current account_ - type: `String` - default: `/api/registration/add`

⚙️ fetchOptions

_Fetch options used for all request within this component_ - type: `Object` - default: ```json { "method": "GET", "credentials": "include", "headers": { "Content-Type": "application/json" } } ```

⚙️ webSocketSignalingEndpoint

_WebSocket endpoint used for the discovery of the two devices through WebRTC_ - type: `String` - default: `/api/socket`

⚙️ rtcIceServers

_List of ICE servers to use for WebRTC connectivity_ - type: `Array` - default: `[{ urls: "stun:stun.services.mozilla.com" }]`

⚙️ RTC

_Access to the RTCPeerConnection instance associated with this component_ - type: `RTCPeerConnection` - default: `null` until initialization

✏️ buttonText

_The text displayed on the button used to connect to the enrollment requester_ - type: `String` - default: `Connect` - reflected attribute: `button-text`

✏️ label

_The text on the label for the peer code input_ - type: `String` - default: `Code` - reflected attribute: `label`

⚙️ inputType

_The type of the input used for the peer code_ - type: `String` - default: `text` - reflected attribute: `input-type`

⚙️ inputName

_The name of the input used for the peer code_ - type: `String` - default: `code` - reflected attribute: `input-name`

### **Events**

🔼 enrollment-started

_Emitted when the enrollment process begins and the two devices try to connect to each other_ - type: `CustomEvent` - detail: `null`

🔼 enrollment-requested

_Emitted when the component receives an enrollment request from the peer_ - type: `CustomEvent` - detail: `null`

🔼 enrollment-provided

_Emitted when the registration add token is sent to the peer device requesting it_ - type: `CustomEvent` - detail: `{ ... }` (content returned by the `enrollmentTokenUrl` endpoint)

🔼 enrollment-cancelled

_Emitted when the enrollment process is cancelled by the requesting user_ - type: `CustomEvent` - detail: `null`

🔼 enrollment-completed

_Emitted when the enrollment process has successfuly completed and the peer device has been registered to the current account_ - type: `CustomEvent` - detail: `null`

🔼 enrollment-error

_Emitted when the enrollment process is interrupted by an error_ - type: `CustomEvent` - detail: `{ message: String }`

### **Styling**

🎨 ::part(form)

_Exposes the `form` element for styling_ ```css webauthn-enrollment-requester::part(form) {...} ```

🎨 ::part(label)

_Exposes the `label` element for styling_ ```css webauthn-enrollment-requester::part(label) {...} ```

🎨 ::part(input)

_Exposes the `input` element for styling_ ```css webauthn-enrollment-requester::part(input) {...} ```

🎨 ::part(button)

_Exposes the `button` element for styling_ ```css webauthn-enrollment-requester::part(button) {...} ```

--- ## License MIT License > A short and simple permissive license with conditions only requiring preservation of copyright and license notices. Licensed works, modifications, and larger works may be distributed under different terms and without source code. Refer to the [LICENSE](LICENSE) file for the complete text. --- _Source: https://npm.io/package/webauthn-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._