<NoAuthLogin />

Plug & play component that implements the fundamental methods of noauth.sh.

Compatible with popular frameworks like Vue, React and HTML Web Components.

By default, <NoAuthLogin /> attempts to perform authentication via Passkeys (WebAuthn) using the device's biometric sensor. It offers automatic alternatives for devices that don't have support.

• OTP (One-Time Password) via email or webhook; also used to validate email address authenticity.
• QR Code, which allows authenticating users through an external device, for example, a smartphone.

TIP

Customizable with props and CSS styles.

How it works

WebAuthn authentication flow

1. The component detects Passkeys support in the user's browser.
2. Requests the user to authenticate with biometrics (fingerprint/face).
3. If successful, it emits a session result and continues with your application flow.

QR authentication flow (alternative)

1. The component detects that the browser doesn't have Passkeys support and displays a QR code.
2. The user scans it from their smartphone (with better sensors).
3. Authentication is confirmed and the browser is updated with the session.

Account recovery with OTP

1. The user enters their email.
2. A one-time password (OTP) is sent.
3. The user enters the code to verify their identity and create a new biometric credential.

Specific integrations

Check the integration guides for:

• Vue
• React
• Web Component