@axioms/axioms-ui

Axioms UI

Ready to use Axioms custom elements to quickly add authentication in your static web sites and single page apps.

Install

As Script Tag

Add following script tags in HTML header,

<script type="module" src="https://cdn.jsdelivr.net/npm/@axioms/axioms-ui@0.0.3/dist/axioms-ui/axioms-ui.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@axioms/axioms-ui@0.0.3/dist/axioms-ui/axioms-ui.js"></script>

As NPM Package

Install NPM package,

npm i @axioms/axioms-ui

Use

An example of how to use the web component with html,

<passwordless-code channel="sms" tenant-domain="axioms.example.com" client-id="SWmAwjdKxGK3cDTBnCoBiFbDpbQKX6nW_JQUv5xgXma1Ta8WXFm88NvPr4tNQTvI" start-button-label="Get started now"  />

Additionally you can hide or show content based on authentication.

<div style="display: none;" id="auth-content ">
    <p id="logged-in ">You are logged in.</p>
    <p id="logged-in-status "></p>
    <button class='btn' onclick="logout()">Logout now</button>
</div>
<script>
    var hasAuth = false;
    var idTokenPayload;

    document.addEventListener("DOMContentLoaded", checkAuth);

    async function checkAuth() {
        await customElements.whenDefined('passwordless-code');

        const passwordLinkElement = document.querySelector('passwordless-code');
        const authContentElement = document.getElementById("auth-content ");

        if (passwordLinkElement) {
            hasAuth = await passwordLinkElement.isAuthenticated();
            idTokenPayload = await passwordLinkElement.getIdTokenPayload();
            if (hasAuth) {
                authContentElement.style.display = "block ";
                var expires_at = new Date(idTokenPayload.exp * 1000).toLocaleString("en-US")
                var paragraph = document.getElementById("logged-in-status ");
                var status = document.createTextNode(
                    `Your username is ${idTokenPayload.preferred_username} and you session expires at ${expires_at}.`);
                paragraph.appendChild(status)
            } else {
                authContentElement.style.display = "none ";
            }
        }
    }
    const passwordLinkElement = document.querySelector('passwordless-code');
    passwordLinkElement.addEventListener('authCompleted', event => updateContent(event));

    function updateContent(event) {
        location.reload()
    }

    async function logout() {
        const passwordLinkElement = document.querySelector('passwordless-code');
        idTokenPayload = await passwordLinkElement.logout();
    }
</script>

Styling

Set value for css variables to style web components according to your requirements.

<style>
    @import url('https://fonts.googleapis.com/css2?family=Sen&display=swap');
    :root {
        --app-primary-color: #ff5136;
        --app-secondary-color: #6c757d;
        --app-text-color: #000;
        --app-font-family: 'Sen', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    }
</style>

Component Documentation

List of available props, events, and methods for each component.

• Passwordless using Link
• Passwordless using Code