NoAuthLogin (Vue 3)

High-level component to handle noauth authentication flow in Vue 3 applications.

Installation

npm i @noauth/vue

Basic usage

<template>
  <NoAuthLogin apiKey="YOUR_API_KEY" @success="handleSuccess" />
</template>

<script setup lang="ts">
import { NoAuthLogin, type AuthResponse } from "@noauth/vue";

const handleSuccess = (authResponse: AuthResponse) => {
  console.log("Authenticated:", authResponse);
};
</script>

apiKey is required. You can get it in your dashboard.

The component emits success when the user is successfully verified.

Props

Prop	Type	Required	Default	Description
`apiKey`	string	Yes	—	Your NoAuth API Key.
`email`	string	No	—	Prefills the email in the form.
`forceAuthQr`	boolean	No	false	Forces the QR authentication flow when available.
`forceEmailVerification`	boolean	No	false	Forces the email verification flow through OTP.
`rememberEmail`	boolean	No	true	Remembers the email across sessions using `localStorage`.

Combining props example:

<NoAuthLogin
  apiKey="YOUR_API_KEY"
  email="[email protected]"
  :forceEmailVerification="true"
  @success="handleSuccess"
/>

Events

success(payload: AuthResponse)

Emitted when the authentication completes successfully.

AuthResponse type:

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

Styling

You can override styles using ::v-deep. For example:

<style scoped>
::v-deep(form.noauth-login) {
  /* Using Tailwind CSS variables */
  border: 1px var(--tw-border-style) var(--color-zinc-800);

  & input {
    background-color: var(--color-zinc-900);
  }
}
</style>