# Simple WebAuthn Helper
A minimal/simple **WebAuthn helper** for registering and logging in security keys (USB, NFC, etc.) with **optional callbacks**. Designed for easy testing and demos.
[](https://www.jsdelivr.com/package/gh/onepointfive-REAL/Web-Authn-Helper)
[Try Simple WebAuthn Helper live!](https://onepointfive-real.github.io/Web-Authn-Helper/)
Supports:
* Register all devices or only external (USB/NFC) devices
* Login with stored key or a raw Base64 credential
* Optional callbacks for success/failure
* Access to **Base64 rawId** and **device type** in callbacks
---
## Installation
Include the helper JS in your HTML:
```html
```
Or use
```html
```
---
## Usage
### Callbacks (optional, recommended)
```javascript
function registerSuccess(cred, base64Cred, deviceType) {
console.log("REGISTER SUCCESS", base64Cred, deviceType);
}
function registerFail(err) {
console.log("REGISTER FAIL", err);
}
function loginSuccess(assertion, base64Cred, deviceType) {
console.log("LOGIN SUCCESS", base64Cred, deviceType);
}
function loginFail(err) {
console.log("LOGIN FAIL", err);
}
function loginFailedNotRegistered() {
console.log("LOGIN FAIL: No key registered");
}
function loginFailedWrongDevice() {
console.log("LOGIN FAIL: Wrong device");
}
```
---
### Register a key
```javascript
// Register all devices
WebAuthnHelper.register(1, "me@example.com", "My Name");
// Register USB/NFC only
WebAuthnHelper.register(2, "me@example.com", "My Name");
```
| Parameter | Description |
| ---------- | ------------------------------------------------------------------------------ |
| deviceType | `1` = all authenticators , `2` = external security keys only |
| email | user identifier |
| username | display name |
`registerSuccess` will receive the **credential object**, **Base64 rawId**, and **device type** used.
---
### Login
```javascript
// Login with stored key
WebAuthnHelper.login();
// Login with a specific rawId (Base64)
WebAuthnHelper.loginWithBase64Cred("BASE64_RAWID_HERE", DEVICE_ID_HERE);
```
`loginSuccess` will receive the **assertion object**, **Base64 rawId used**, and **device type used**.
---
### Clear stored key
```javascript
WebAuthnHelper.clear();
```
---
## Example HTML Page
```html
WebAuthn Helper Demo
WebAuthn Helper Demo
Login With RawId
```
---
**Notes:**
* This helper is for **demo/testing purposes** only.
* For **real authentication**, you need a **server to verify the cryptographic signature** of WebAuthn assertions.
* Callbacks are **optional** but recommended to handle login/register events.
* `base64Cred` and `deviceType` are always provided in success callbacks for convenience.