QR Authentication

In some cases, users may not have compatible devices. For this purpose, they can use a QR code to authenticate remotely and securely using an external device like a smartphone.

QR Code Generation

You can generate a QR code by calling the qr.create method. This method will return a QR code that can be displayed to the user.

import { NoAuth } from "@noauth/browser";

const noauth = new NoAuth({ apiKey: "your-api-key" });

const { qr, attempt } = await noauth.qr.create("[email protected]");

// Display the QR code to the user (example)
const qrCodeImage = document.createElement("img");
qrCodeImage.src = qr;
document.body.appendChild(qrCodeImage);

Awaiting Authentication

Await the authentication process by using the attempt response promise from the qr.create method.

const { verified, accessToken } = await attempt;

Helper functions

Use the hasBrowserSupport helper function to detect if the user's device supports WebAuthn and offer QR authentication as a fallback.

import { hasBrowserSupport } from "@noauth/browser";

const hasSupport = await hasBrowserSupport();

if (!hasSupport) {
  // Offer QR authentication as a fallback
}

Full example

import { NoAuth, hasBrowserSupport } from "@noauth/browser";

const noauth = new NoAuth({ apiKey: "your-api-key" });

const hasSupport = await hasBrowserSupport();

if (hasSupport) {
  // WebAuthn authentication
  const { verified, accessToken } = await noauth.signin("[email protected]");
} else {
  // QR authentication
  const { qr, attempt } = await noauth.qr.create("[email protected]");

  // Display QR code
  const qrCodeImage = document.createElement("img");
  qrCodeImage.src = qr;
  document.body.appendChild(qrCodeImage);

  // Await the authentication process
  const { verified, accessToken } = await attempt;
}