NoAuthLogin (Vue 3)

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

Installation

npm

npm i @noauth/vue

bun

bun add @noauth/vue

pnpm

pnpm add @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

Import the component CSS to customize its styles. For example:

<style scoped>
@import "@noauth/vue/dist/vue.css";

/* Style overrides with :deep() */
:deep(.noauth-login) {
  border: 1px solid red !important;
}
</style>