Using the javascript library

Using the javascript library is optional but recommended if you are new to Presence or would like to opt for the simplest solution. The library gives you access to a PresenceUser object that exposes several useful functions that handle API requests, data conversions and formatting.

Import the library

The Presence library is available through the below CDN. Presence is not yet available on NPM.

<script src="https://js.mioko.tech/presence-0.1.0.min.js"></script>

Browsers will only allow Web Authentication over HTTPS so ensure your environment is running on HTTPS.

Instantiating a PresenceUser

const myUser = new PresenceUser('111', 'pk_test_123456');

PresenceUser.registerWebAuth

const registerButtonWebAuth = document.getElementById("register-button-presence");
registerButtonWebAuth.addEventListener("click", async function(){
    const result = await myUser.registerWebAuth();

    await axios.post(
        'https://yourdomain.com/webauth-register-forward',
        result
    ).then(async response => {
        // handle successful registration for your user
    });
});

PresenceUser.loginWebAuth

const loginButtonWebAuth = document.getElementById("login-button-presence");
loginButtonWebAuth.addEventListener("click", async function() {
    const result = await myUser.loginWebAuth();
    console.log('result from presence login web auth is: ' + result);

    // the user is now authenticated with presence
    // now send a query to your own API which will securely verify on the back-end with a secret and the /api/client-login-verify endpoint
    // and you should then receive your normal JWT or other response back from your own API
});

Advanced options

If you want to use your own back-end Web Authentication library, you can override the API address. By default this points to the Presence API at https://presence.mioko.tech. The override must be specified before the script is imported. You will need to create your own endpoints for miokoApiDomain + '/api/webauth-register-init', miokoApiDomain + '/api/webauth-register-submit', miokoApiDomain + '/api/webauth-login-init', miokoApiDomain + '/api/webauth-login-submit'.

<script type="application/javascript">
        const miokoApiDomainOverride = 'https://example.com';
</script>
<script src="https://js.mioko.tech/presence-0.1.0.min.js"></script>