Autenticación remota

En el caso de que un usuario no tenga un dispositivos WebAuthn compatible, noauth.sh ofrece la alternativa de autenticar remotamente usando un código QR. De esta forma, tus usuarios pueden autenticarse usando un dispositivo externo como un smartphone.

Comprobar compatibilidad

Usa la función hasBrowserSupport para detectar si el dispositivo del usuario soporta WebAuthn y ofrecer la autenticación vía QR como alternativa.

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

const hasSupport = await hasBrowserSupport();
if (!hasSupport) {
  // Ofrecer autenticación QR como alternativa
}

Generar código QR

Para generar un nuevo código de autenticación QR, puedes usar la función remoteSignin.

FP

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

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

// Mostrar el código QR al usuario (ejemplo)
const qrCodeImage = document.createElement("img");
qrCodeImage.src = qr;
document.body.appendChild(qrCodeImage);

OOP

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

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

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

// Mostrar el código QR al usuario (ejemplo)
const qrCodeImage = document.createElement("img");
qrCodeImage.src = qr;
document.body.appendChild(qrCodeImage);

remoteSignin retorna un objeto con las siguientes propiedades:

• qr: el código QR en formato base64.
• attempt: promesa que resuelve con el resultado de la autenticación remota.

Validar autenticación remota

Espera el proceso de autenticación usando la promesa attempt generada por remoteSignin.

const { verified, accessToken } = await attempt;

Ejemplo completo de autenticación remota

FP

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

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

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

  // Mostrar el código QR al usuario
  const qrCodeImage = document.createElement("img");
  qrCodeImage.src = qr;
  document.body.appendChild(qrCodeImage);

  // Espera el proceso de autenticación
  const { verified } = await attempt;

  console.log("Usuario autenticado:", verified);
}

OOP

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]");

  // Mostrar el código QR al usuario
  const qrCodeImage = document.createElement("img");
  qrCodeImage.src = qr;
  document.body.appendChild(qrCodeImage);

  // Espera el proceso de autenticación
  const { verified } = await attempt;

  console.log("Usuario autenticado:", verified);
}

Flujo de autenticación

Uniendo todos los conceptos anteriores, el flujo de autenticación completo se puede expresar en un diagrama como el siguiente: