# Javascript

You will interact with the authenticators through an HTML page and Javascript using the Webauthn API.

A package is available at <https://github.com/web-auth/webauthn-helper>. It contains functions that will ease the interaction with the login or the registration endpoints.

{% hint style="danger" %}
It is mandatory to use the HTTPS scheme to use Webauthn otherwise it will not work.
{% endhint %}

## Installation

You can use npm or yarn to install the package:

```bash
npm i @web-auth/webauthn-helper
#or
yarn add @web-auth/webauthn-helper
```

## Registration

```javascript
// Import the registration hook
import {useRegistration} from 'webauthn-helper';

// Create your register function.
// By default the urls are "/register" and "/register/options"
// but you can change those urls if needed.
const register = useRegistration({
    actionUrl: '/api/register',
    optionsUrl: '/api/register/options'
});


// We can call this register function whenever we need (e.g. form submission)
register({
    username: 'john.doe',
    displayName: 'JD'
})
    .then((response) => console.log('Registration success'))
    .catch((error) => console.log('Registration failure'))
;
```

Additional options can be set during the registration process. See the section “Deep into the framework” to know more. Hereafter another example:

```javascript
register({
    username: 'john.doe',
    displayName: 'JD',
    attestation: 'none',
    authenticatorSelection: {
        authenticatorAttachment: 'platform',
        requireResidentKey: true,
        userVerification: 'required'
    }
})
    .then((response) => console.log('Registration success'))
    .catch((error) => console.log('Registration failure'))
;
```

{% hint style="info" %}
The specification Webauthn L2 deprecates the use of the parameter `requireResidentKey`; you should use residentKey instead with one of the following value: `required`, `preferred` or `discouraged`.

To have the same behavior as above, please use `required`.
{% endhint %}

## Authentication

```javascript
// Import the login hook
import {useLogin} from 'webauthn-helper';

// Create your login function.
// By default the urls are "/login" and "/login/options"
// but you can change those urls if needed.
const login = useLogin({
    actionUrl: '/api/login',
    optionsUrl: '/api/login/options'
});


// We can call this login function whenever we need (e.g. form submission)
login({
    username: 'john.doe'
})
    .then((response) => console.log('Authentication success'))
    .catch((error) => console.log('Authentication failure'))
;
```

As done during the registration, additional options are available. See the section “Deep into the framework” to know more. Hereafter another example:

```javascript
login({
    username: 'john.doe',
    userVerification: 'required'
})
    .then((response) => console.log('Authentication success'))
    .catch((error) => console.log('Authentication failure'))
;
```


---

# 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://webauthn-doc.spomky-labs.com/v3.3/pre-requisites/javascript.md?ask=<question>
```

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.