NoAuthLogin (Web Component)

Componente de alto nivel para manejar el flujo de autenticación noauth.sh en Web Components.

Instalación

Bundler

npm

npm i @noauth/webcomponent

bun

bun add @noauth/webcomponent

pnpm

pnpm add @noauth/webcomponent

Registrar el elemento en tu aplicación (ajusta según tu bundler):

import "@noauth/webcomponent"; // Registra <noauth-login>

// Alternativa
import { defineCustomElements } from "@noauth/webcomponent/loader";
defineCustomElements();

CDN

<script
  type="module"
  src="https://unpkg.com/@noauth/webcomponents@latest/dist/components/noauth-login.js"
></script>

Uso básico

<noauth-login api-key="YOUR_API_KEY"></noauth-login>

<script>
  const el = document.querySelector("noauth-login");
  el.addEventListener("success", (event) => {
    // AuthResponse comes in event.detail
    console.log("Authenticated:", event.detail);
  });
</script>

apiKey es requerido. Puedes obtenerlo en tu dashboard.

El componente emite el evento success cuando el usuario es verificado exitosamente.

Props (atributos)

Atributo	Tipo	Requerido	Por defecto	Descripción
api-key	string	Sí	—	Tu API Key de NoAuth.
email	string	No	—	Pre-rellena el email en el formulario.
force-auth-qr	boolean	No	false	Fuerza el flujo de autenticación con QR cuando está disponible.
force-email-verification	boolean	No	false	Fuerza la verificación de email mediante OTP.
remember-email	boolean	No	true	Recuerda el email entre sesiones usando localStorage.

Notas:

• Los atributos booleanos se habilitan por presencia: <noauth-login force-email-verification></noauth-login>.
• También puedes establecerlos como propiedades JS: el.forceEmailVerification = true.

Combinando props

<noauth-login
  api-key="YOUR_API_KEY"
  email="[email protected]"
  force-email-verification
></noauth-login>

Eventos

success(payload: AuthResponse)

Emitido cuando la autenticación se completa exitosamente.

type AuthResponse = {
  verified: boolean;
  accessToken: string | null;
  email: string;
  emailVerified: boolean;
};

Métodos

setEmail(email: string): Establece el email programáticamente y lo persiste si remember-email está habilitado.

Ejemplo:

<noauth-login api-key="YOUR_API_KEY"></noauth-login>
<script>
  document.querySelector("noauth-login").setEmail("[email protected]");
</script>

Estilos

El formulario principal usa la clase form.noauth-login. Puedes sobrescribir los estilos globalmente. Por ejemplo:

form.noauth-login {
  /* Using Tailwind CSS variables */
  border: 1px solid var(--color-zinc-800);

  & input {
    background-color: var(--color-zinc-900);
  }
}