noauth.sh docs

English

Spanish

English

Spanish

Remote Authentication ​

In case a user doesn't have a WebAuthn compatible device, noauth.sh offers the alternative of authenticating remotely using a QR code. This way, your users can authenticate using an external device like a smartphone.

Check compatibility ​

Use the hasBrowserSupport function to detect if the user's device supports WebAuthn and offer QR authentication as an alternative.

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

const hasSupport = await hasBrowserSupport();
if (!hasSupport) {
  // Offer QR authentication as an alternative
}

Generate QR code ​

To generate a new QR authentication code, you can use the remoteSignin function.

javascript
import { remoteSignin } from "@noauth/browser";

const { qr, attempt } = await remoteSignin("[email protected]", {
  apiKey: "your-api-key",
});

// Display the QR code to the user (example)
const qrCodeImage = document.createElement("img");
qrCodeImage.src = qr;
document.body.appendChild(qrCodeImage);
javascript
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);

remoteSignin returns an object with the following properties:

  • qr: the QR code in base64 format.
  • attempt: promise that resolves with the remote authentication result.

Validate remote authentication ​

Wait for the authentication process using the attempt promise generated by remoteSignin.

javascript
const { verified, accessToken } = await attempt;

Complete remote authentication example ​

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

const apiKey = "your-api-key";
const hasSupport = await hasBrowserSupport();

if (!hasSupport) {
  const { qr, attempt } = await remoteSignin("[email protected]", { apiKey });

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

  // Wait for the authentication process
  const { verified } = await attempt;

  console.log("User authenticated:", verified);
}
javascript
import { NoAuth, hasBrowserSupport } from "@noauth/browser";

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

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

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

  // Wait for the authentication process
  const { verified } = await attempt;

  console.log("User authenticated:", verified);
}

Authentication flow ​

Bringing together all the previous concepts, the complete authentication flow can be expressed in a diagram like the following: