@axioms/axioms-ui
v0.0.3
Published
Axioms Stencil Component Collection
Downloads
19
Readme
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/[email protected]/dist/axioms-ui/axioms-ui.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@axioms/[email protected]/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.