Skip to main content

​
React SDK

El SDK de React proporciona hooks y utilidades para integrar autenticación por WhatsApp en tus aplicaciones React.

​
Instalación

npm install @camarauth/sdk
# o
yarn add @camarauth/sdk
# o
pnpm add @camarauth/sdk

​
Hooks disponibles

usePinAuth

Hook principal que orquesta todo el flujo de autenticación. Incluye generación de PINs, WebSocket, countdown y más.

usePinGenerator

Genera PINs aleatorios y los codifica en emojis. Útil si necesitas control de bajo nivel.

useCountdown

Temporizador para la expiración del PIN. Formato automático MM:SS.

useAutoRegeneration

Controla el número de regeneraciones automáticas. Previene loops infinitos.

​
Características

  • ✅ Hooks React - Integración nativa con React
  • ✅ TypeScript - Tipos completos incluidos
  • ✅ WebSocket - Conexión en tiempo real
  • ✅ Auto-regeneración - PINs se regeneran automáticamente
  • ✅ Storage - Persistencia de sesión opcional
  • ✅ Responsive - Funciona en móvil y desktop
  • ✅ Server-Side Rendering - Compatible con Next.js

​
Ejemplo básico

import { usePinAuth } from '@camarauth/sdk/react';

function LoginPage() {
  const auth = usePinAuth({
    apiUrl: 'http://localhost:3001',
    whatsappNumber: '+1234567890',
    onSuccess: (user) => {
      console.log('Autenticado:', user);
      // Redirigir...
    }
  });

  return (
    <div>
      {!auth.pin ? (
        <button onClick={auth.generate}>Generar PIN</button>
      ) : (
        <div>
          <p>{auth.emojis.join(' ')}</p>
          <p>Expira en: {auth.formattedTime}</p>
          <img src={auth.qrCodeUrl} alt="QR" />
          <a href={auth.whatsappLink}>Abrir WhatsApp</a>
        </div>
      )}
    </div>
  );
}

​
Flujo de datos

​
Siguientes pasos