# Components
The diagrams below show how the Keyless Web SDK, which runs within your web app on the user’s browser, interacts with your application server and with the Keyless network.
### Headless Enrollment
{% hint style="info" %}
In this context headless means that the enrollment happens on the client-side without any UI component, and it is therefore pure Javascript.
{% endhint %}
During enrollment, your web app creates a Keyless enroll symbol and establishes a connection to the Keyless Authentication Service, then:
1. Waits for the "begin-stream" event and sends the first face frame.
2. Waits for the "frame-results" event and sends one more face frame.
3. The wait will continue in a loop until either of:
1. The "error" event is fired which means that most likely the biometric pipeline failed, or another error stopped the process.
2. The "stop-stream" event is fired which means that the biometric pipeline succeeded.
4. Now the Keyless Authentication Service will extract the vectors of the last frame sent and perform the recognition process.
5. Waits for the "finished" event.
### Web Component Enrollment
{% hint style="info" %}
We use [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) in order to be framework agnostic, meaning that the custom elements we expose are going to work on any environment.
{% endhint %}
During enrollment, your web app loads and renders the kl-enroll web component, the component will establish a connection to the Keyless Authentication Service as soon as it is mounted, then it:
1. Checks if the user has consented to the usage of their camera, the permission must be granted in order to proceed.
2. Checks if the user is on a desktop device and has multiple cameras, if yes the user will be prompted to pick one in order to avoid using the wrong camera by default. This does not happen on mobile devices and the selfie camera is always preferred by default.
3. Starts sending face frames to the Keyless Authentication Service at a set framerate, which is by default 4 frames per second.
4. Waits for the "finished" event.
### IDV Bridge SaaS Enrollment
{% hint style="info" %}
In this context the enrollment happens on the server-side, requiring no interaction from the user unless manually implemented by the integrator on their client. Head to [IDV Bridge space](https://docs.keyless.io/idv-bridge) for more information about this solution.
{% endhint %}
During enrollment, your back-end service will perform a POST request to the Keyless Authentication Service following these steps:
1. Generates a new `AES-GCM` or `AES-GCM-SIV` key.
2. Encrypts the face image with the `AES-GCM` or `AES-GCM-SIV` key.
3. Encrypts the `AES-GCM` or `AES-GCM-SIV` key with the `RSAES-OAEP-SHA-256` public key also known as `IMAGE_ENCRYPTION_PUBLIC_KEY`.
4. Performs the POST request and waits for a 201 response status code.
### Headless Authentication
{% hint style="info" %}
In this context headless means that the authentication happens on the client-side without any UI component, and it is therefore pure Javascript.
{% endhint %}
During authentication, your web app creates a Keyless auth symbol and establishes a connection to the Keyless Authentication Service, then:
1. Waits for the "begin-stream" event and sends the first face frame.
2. Waits for the "frame-results" event and sends one more face frame.
3. The wait will continue in a loop until either of:
1. The "error" event is fired which means that most likely the biometric pipeline failed, or another error stopped the process.
2. The "stop-stream" event is fired which means that the biometric pipeline succeeded.
4. Now the Keyless Authentication Service will extract the vectors of the last frame sent and perform the recognition process.
5. Waits for the "finished" event.
### Web Component Authentication
{% hint style="info" %}
We use [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) in order to be framework agnostic, meaning that the custom elements we expose are going to work on any environment.
{% endhint %}
During authentication, your web app loads and renders the kl-auth web component, the component will establish a connection to the Keyless Authentication Service as soon as it is mounted, then:
1. Checks if the user has consented to the usage of their camera, the permission must be granted in order to proceed.
2. Checks if the user is on a desktop device and has multiple cameras, if yes the user will be prompted to pick one in order to avoid using the wrong camera by default. This does not happen on mobile devices and the selfie camera is always preferred by default.
3. Starts sending face frames to the Keyless Authentication Service at a set framerate, which is by default 4 frames per second.
4. Waits for the "finished" event.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.keyless.io/web-sdk/introduction/components.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.