NoAuthLogin (Web Component)

High-level component to handle noauth authentication flow in Web Components.

Installation

Bundler

npm i @noauth/webcomponent

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

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

CDN

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

Basic usage

<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 is required. You can get it in your dashboard.

The component emits the success event when the user is successfully verified.

Props (attributes)

Attribute	Type	Required	Default	Description
`api-key`	string	Yes	—	Your NoAuth API Key.
`email`	string	No	—	Prefills the email in the form.
`force-auth-qr`	boolean	No	false	Forces the QR authentication flow when available.
`force-email-verification`	boolean	No	false	Forces email verification via OTP.
`remember-email`	boolean	No	true	Remembers the email across sessions using `localStorage`.

Notes:

Boolean attributes are enabled by presence: <noauth-login force-email-verification></noauth-login>.
You can also set them as JS properties: el.forceEmailVerification = true.

Combining props

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

Events

success(payload: AuthResponse)

Emitted when authentication completes successfully.

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

Methods

setEmail(email: string): Sets the email programmatically and persists it if remember-email is enabled.

Example:

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

Styling

The main form uses the form.noauth-login class. You can override styles globally. For example:

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

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