Skip to main content

Quickstart

Esta guía te ayudará a configurar Camarauth SDK en menos de 5 minutos.

Requisitos previos

  • Node.js 18 o superior
  • Cuenta en Evolution API (o instancia propia)
  • Número de WhatsApp Business

Paso 1: Configurar Evolution API

Primero necesitas configurar tu instancia de Evolution API:
  1. Crea una instancia en Evolution API
  2. Conecta tu número de WhatsApp
  3. Obtén tu API Key
  4. Anota el nombre de tu instancia

Paso 2: Instalar el SDK

# Backend
npm install @camarauth/sdk

# Frontend React
npm install @camarauth/sdk

Paso 3: Configurar el Backend

Crea un archivo server.ts:
import { CamarauthBackend } from '@camarauth/sdk/server';

const backend = new CamarauthBackend({
  port: 3001,
  jwtSecret: 'tu-secreto-jwt-super-seguro',
  evolutionApiUrl: 'https://tu-evolution-api.com',
  evolutionApiKey: 'tu-api-key',
  evolutionInstanceName: 'mi-instancia',
  pinExpirationMinutes: 3,
  corsOrigins: ['http://localhost:5173']
});

backend.start();
Ejecuta el servidor:
npx ts-node server.ts

Paso 4: Configurar el Frontend

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

function LoginPage() {
  const auth = usePinAuth({
    apiUrl: 'http://localhost:3001',
    whatsappNumber: '+1234567890',
    onSuccess: (user) => {
      console.log('Usuario autenticado:', user);
      // Redirigir al dashboard
    },
    onError: (error) => {
      console.error('Error:', error);
    }
  });

  return (
    <div className="login-container">
      <h1>Iniciar sesión</h1>
      
      {!auth.pin ? (
        <button onClick={auth.generate}>
          Generar código de acceso
        </button>
      ) : (
        <div>
          <p>Tu código: {auth.emojis.join(' ')}</p>
          <p>Expira en: {auth.formattedTime}</p>
          
          {auth.qrCodeUrl && (
            <img src={auth.qrCodeUrl} alt="QR Code" />
          )}
          
          <a href={auth.whatsappLink} target="_blank">
            Abrir WhatsApp
          </a>
        </div>
      )}
    </div>
  );
}

Paso 5: Probar

  1. Abre tu aplicación en el navegador
  2. Haz clic en “Generar código de acceso”
  3. Escanea el QR o haz clic en el link de WhatsApp
  4. Envía los emojis que aparecen en pantalla
  5. ¡Listo! Serás autenticado automáticamente

Configuración avanzada

Conexión a base de datos

import { Pool } from 'pg';

const db = new Pool({
  connectionString: process.env.DATABASE_URL
});

const backend = new CamarauthBackend({
  // ... otras opciones
  db
});

Configuración de CORS

const backend = new CamarauthBackend({
  // ... otras opciones
  corsOrigins: [
    'http://localhost:5173',
    'https://mi-app.com',
    'https://app.mi-dominio.com'
  ]
});

Siguientes pasos