npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

passwordless-client-js

v0.1.0

Published

This library allows you to fast & without complexity add passwordless sign in (using fido2/webauthn) to your web application.

Downloads

2

Readme

Webauthn Passwordless js library

This library allows you to fast & without complexity add passwordless sign in (using fido2/webauthn) to your web application.

Read the paswordless documentation

Overview

This is what you need to do:

  1. Read the docs
  2. You add our client side library and call the function passwordless.register or passwordless.signin
  3. You add two very simple endpoints on your backend that integrates to your existing user system (set cookie, sessions, etc) (and communicates secrets with our API).
  4. You make a request between your clientside code and the verification endpoints on your backend to verify the registration or sign in.

Get coding

To get started, add the library to your website (either as ES6 module or global):

NPM package:

yarn add passwordless-client-js
import { Client } from 'passwordless-client-js';

Normal script tag:

<script src="https://cdn.passwordless.dev/dist/0.1.0/passwordlessclient.iife.min.js" integrity="Qhz9YKzklMqHMn2W9sQhZBT9M+f1VpWAzqzjZ/SjWrnRq4+DclsMc8CdS8sz+rW5" crossorigin="anonymous"></script>

<script>
var p = new Passwordless.Client({});
</script>

ES6 module script-tag:

<script src="https://cdn.passwordless.dev/dist/0.1.0/passwordlessclient.min.mjs" integrity="sha384-fE4M8MiZ1Ps1XtxCO4qB4m6Z9Lj9N7HRpe8IAajQSDFC9g7mBeVeQH2sC99fvBva" crossorigin="anonymous"></script>

ES6 module:

import { Client } from "https://cdn.passwordless.dev/dist/0.1.0/passwordlessclient.min.mjs"

UMD module:

https://cdn.passwordless.dev/dist/0.1.0/passwordlessclient.umd.min.js

NPM package coming soon.

Get your API Keys

To create a free account, please visit Create Account or perform this http call:

POST https://api.passwordless.dev/account/create?accountName=YOUR_ACCOUNT&[email protected]

It will return two keys, one public and one secret. Copy these keys to a secure location as they are only displayed once.

Register a webauthn credential to user

<script type="module">
    import { Client } from "https://cdn.passwordless.dev/dist/0.1.0/passwordlessclient.min.mjs";
    async function registerPasswordless(e) {
        e.preventDefault();

        var p = new Client({
            apiKey: "demo:public:xxx"
        });

        var myToken = await fetch("/example-backend/passwordless/token").then(r => r.text());

        try {
            await p.register(myToken);
        } catch (e) {
            console.error("Things went really bad: ", e);
        }
    }
</script>

Notice the /example-backend/passwordless/token call? You need to add one backend endpoint to verify that the user is allowed to register a credential.

On your backend, perform this call:

POST https://api.passwordless.dev/register/token
ApiSecret: demo:secret:yyy
Content-Type: application/json

{ "username": "[email protected]", "displayName": "Anders" } 

It will return the token.

If await p.register(myToken) returns sucessfully, the credential has been registered.

Sign in using webauthn

<script type="module">
    import { Client } from "https://cdn.passwordless.dev/dist/0.1.0/passwordlessclient.min.mjs";
    async function handleSignInSubmit(e) {
        e.preventDefault();

        var p = new Client({
            apiKey: "demo:public:xxx"
        });

        var username = ""; // get username from form

        try {
            var token = await p.signin(username);
            var verifiedUser = await fetch("/example-backend/signin?token=" + token).then(r => r.json());
            console.log("User", verifiedUser);
        } catch (e) {
            console.error("Things went really bad: ", e);
        }
    }
</script>

Notice the /example-backend/passwordless/token/verify call? You need to add one backend endpoint to verify the result from the api and set auth cookies.

On your backend, verify the token from signin with this api call:

POST https://api.passwordless.dev/signin/verify
ApiSecret: demo:secret:yyy
Content-Type: application/json

{ "token": "zzz" }

... where zzz is the token you received from p.signin(username).

The API call will return information about the user sign in:

{
   "success":true,
   "username":"[email protected]",
   "timestamp":"2020-08-21T16:42:48.5061807Z",
   "rpid":"example.com",
   "origin":"https://example.com"
}

Build this library

Run yarn build