socektauthn-client

@socektauthn/client is the browser client of the @socketauthn packages

socketauthn

The @socketauthn family of packages is a combination of this client and a websocket api.

Concept

The client calls the registerUser function in the browser. It creates a websocket connection to the api endpoint for the registration. The Server sends a registration config for @simplewebauthn/browser's startRegistration function on open. The client responses when the authentication in finished.

The same applies when logging in.

How to use

Add to your project

Using a script tag:

As a module

<script type="module">
    import * as socketauthn from "https://cdn.jsdelivr.net/gh/oxydemeton/socketauthn-client/dist/mod.min.js"
</script>

Or single functions

<script type="module">
    import { loginUser, registerUser } from "https://cdn.jsdelivr.net/gh/oxydemeton/socketauthn-client/dist/mod.min.js"
</script>

Using npm

Install using:

npx jsr add @socketauthn/client

Use in for example a vite project:

import { registerUser, loginUser } from "@socketauthn/client";

Use functions

Keep in mind to close the returned socket connections or close them on the server side!

With npm:

import { registerUser, loginUser } from "@socketauthn/client";
registerUser("unique username", "wss://serverip/registerpath")

In Html

<script type="module">
    import * as socketauthn from "https://cdn.jsdelivr.net/gh/oxydemeton/socketauthn-client/dist/mod.min.js"
    loginUser(...,...)
</script>

Or

<script type="module">
    import { loginUser, registerUser } from "https://cdn.jsdelivr.net/gh/oxydemeton/socketauthn-client/dist/mod.min.js"
    loginUser(...,...)
</script>

Example from this project:

document.getElementById("form")!.addEventListener("submit", (e)=>e.preventDefault())
document.getElementById("register")!.addEventListener("click", async (e)=> {
  e.preventDefault()
  const userName = (document.getElementById("username")! as HTMLInputElement).value
  const socket = await registerUser(userName, new URL("ws://localhost:5180/register"))
  socket.close()
})
document.getElementById("login")!.addEventListener("click", async (e)=> {
  e.preventDefault()
  const userName = (document.getElementById("username")! as HTMLInputElement).value
  const socket = await loginUser(userName, new URL("ws://localhost:5180/login"))
  socket.close()
})

In combination with the index.html