NoAuthLogin (Vue 3)

Componente de alto nivel para manejar el flujo de autenticación noauth.sh en aplicaciones Vue 3 o Nuxt 3.

Instalación

npm

npm i @noauth/vue

bun

bun add @noauth/vue

pnpm

pnpm add @noauth/vue

Uso básico

<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 es requerido. Puedes obtenerlo en tu dashboard.

El componente emite success cuando el usuario es verificado exitosamente.

Props

Prop	Tipo	Requerido	Por defecto	Descripción
apiKey	string	Sí	—	Tu API Key de NoAuth.
email	string	No	—	Pre-rellena el email en el formulario.
forceAuthQr	boolean	No	false	Fuerza el flujo de autenticación con QR cuando está disponible.
forceEmailVerification	boolean	No	false	Fuerza el flujo de verificación de email mediante OTP.
rememberEmail	boolean	No	true	Recuerda el email entre sesiones usando localStorage.

Ejemplo combinando props:

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

Eventos

success(payload: AuthResponse)

Emitido cuando la autenticación se completa exitosamente.

Tipo AuthResponse:

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

Estilos

Puedes sobrescribir los estilos usando ::v-deep. Por ejemplo:

<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>