triauth in progressive web apps

Installable, offline-capable web apps that work with triauth.

Library: triauth-js
Build: dist/triauth.js
Backend: No backend required

Get started

A progressive web app (PWA) is a website that can be installed like a native app, work offline, and send notifications. The browser build of triauth-js has no backend requirements, and PWAs can use it to sign their users in while remaining completely client-side. The stamp method of triauth-js can later be used to prove to a backend that a specific user is signed in with the app.

Example

WARNING

In the client-side example below, the authentication challenge is stored and processed directly in the user's web browser. As with any such setup, the user can convince your app that they are someone else (e.g., by modifying the stored challenge, or affecting the code being executed).

In production, use the stamp or sign method over a backend-supplied nonce to produce a portable proof which the backend and/or other apps can verify on their own.

html

<script src="https://cdn.jsdelivr.net/npm/triauth@latest/dist/triauth.js" crossorigin="anonymous"></script>
<script type="module">
  const params = new URLSearchParams(window.location.search);

  const challenge = window.sessionStorage.getItem('challenge');
  const response = params.get('response');

  const authResult = await window.Triauth.authenticate({
    identifier: (challenge && response) ? undefined : window.prompt('Enter your identifier'),
    callbackUrl: (challenge && response) ? undefined : window.location.href,
    ext: { callbackMethod: 'GET', stampToken: true },
    challenge,
    response
  });

  if (challenge && response) {
    window.sessionStorage.removeItem('challenge');
  }

  if (authResult.authenticated) {
    alert('Authenticated as ' + authResult.identifier);

  } else if (authResult.challenge && authResult.redirectUrl) {
    window.sessionStorage.setItem('challenge', authResult.challenge);
    window.location = authResult.redirectUrl;

  } else if (authResult.error) {
    alert('Error: ' + authResult.error.message);
  }
</script>

All logos and trademarks belong to their respective owners and do not imply affiliation or endorsement of the organization or product by triauth, nor vice versa. The content provided on this page may include information from third-party sources. We do not assume any responsibility for the completeness, correctness, or applicability of the information. You should independently verify any details before relying on them.