npm install @camarauth/sdk

import {
  usePinAuth,
  usePinGenerator,
  useCountdown,
  useAutoRegeneration,
} from "@camarauth/sdk/react";

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

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

  return (
    <div>
      {!auth.pin ? (
        <button onClick={auth.generate}>Generar código de acceso</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>
  );
}

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

function AuthModal({ onClose }: { onClose: () => void }) {
  const auth = usePinAuth({
    apiUrl: import.meta.env.VITE_CAMARAUTH_API_URL,
    whatsappNumber: import.meta.env.VITE_WHATSAPP_NUMBER,
    autoGenerate: true,
    onSuccess: (user) => {
      localStorage.setItem("user", JSON.stringify(user));
      onClose();
    },
    onError: (error) => {
      console.error("Error de autenticación:", error);
    },
  });

  return (
    <div className="auth-modal">
      <div className="auth-content">
        {auth.status === "success" ? (
          <div className="success">
            <h2>¡Bienvenido {auth.user?.name}!</h2>
            <p>Autenticación exitosa</p>
          </div>
        ) : (
          <>
            <h2>Iniciar sesión</h2>

            {auth.isLoading && <p>Conectando...</p>}

            {auth.pin && (
              <>
                <div className="emojis-container">
                  {auth.emojis.map((emoji, i) => (
                    <span key={i} className="emoji">
                      {emoji}
                    </span>
                  ))}
                </div>

                <div className="timer">Expira en: {auth.formattedTime}</div>

                {auth.qrCodeUrl && (
                  <img
                    src={auth.qrCodeUrl}
                    alt="Escanea para WhatsApp"
                    className="qr-code"
                  />
                )}

                <a
                  href={auth.whatsappLink}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="whatsapp-button"
                >
                  📱 Abrir WhatsApp
                </a>

                <button onClick={auth.cancel}>Cancelar</button>
              </>
            )}

            {auth.error && <div className="error">{auth.error.message}</div>}
          </>
        )}
      </div>
    </div>
  );
}