NoAuthLogin (React)

Componente de alto nivel para manejar el flujo de autenticación noauth.sh en aplicaciones React o Next.js.

Instalación

npm

npm i @noauth/react

bun

bun add @noauth/react

pnpm

pnpm add @noauth/react

Uso básico

import { NoAuthLogin, type AuthResponse } from "@noauth/react";

function App() {
  const handleSuccess = (authResponse: AuthResponse) => {
    console.log("Authenticated:", authResponse);
  };

  return <NoAuthLogin apiKey="YOUR_API_KEY" onSuccess={handleSuccess} />;
}

apiKey es requerido. Puedes obtenerlo en tu dashboard.

El componente llama a onSuccess 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.
onSuccess	function	Sí	—	Función callback ejecutada cuando la autenticación es exitosa.

Ejemplo combinando props:

<NoAuthLogin
  apiKey="YOUR_API_KEY"
  email="[email protected]"
  forceEmailVerification={true}
  onSuccess={handleSuccess}
/>

Callback onSuccess

onSuccess(payload: AuthResponse)

Ejecutado cuando la autenticación se completa exitosamente.

Tipo AuthResponse:

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

Estilos

Puedes personalizar los estilos usando clases CSS. Por ejemplo:

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

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

También puedes usar CSS-in-JS o styled-components para personalizar el componente:

import styled from "styled-components";

const StyledNoAuthLogin = styled(NoAuthLogin)`
  form.noauth-login {
    border: 1px solid #374151;

    input {
      background-color: #111827;
    }
  }
`;