Feat: Add complete auth system (Login, Register, OTP/2FA via Telegram, Session management)

app/api/auth/login/route.ts

@@ -0,0 +1,54 @@
+import { NextResponse } from 'next/server';
+import { findUser, verifyPassword, createSession } from '@/lib/auth';
+import { generateOTP } from '@/lib/otp';
+import TelegramBot from 'node-telegram-bot-api';
+
+const BOT_TOKEN = process.env.TELEGRAM_BOT_TOKEN;
+
+async function sendTelegramOTP(chatId: string, otp: string) {
+  if (!BOT_TOKEN) return false;
+  try {
+    const bot = new TelegramBot(BOT_TOKEN, { polling: false });
+    await bot.sendMessage(chatId, `🔐 *Código de Acceso Finanzas*\n\nTu código es: \`${otp}\`\n\nSi no intentaste ingresar, ignora este mensaje.`, { parse_mode: 'Markdown' });
+    return true;
+  } catch (e) {
+    console.error('Telegram send error:', e);
+    return false;
+  }
+}
+
+export async function POST(req: Request) {
+  try {
+    const { username, password } = await req.json();
+    const ip = req.headers.get('x-forwarded-for')?.split(',')[0].trim() || 'unknown';
+
+    const user = findUser(username);
+
+    if (!user || !(await verifyPassword(password, user.passwordHash))) {
+      return NextResponse.json({ error: 'Credenciales inválidas' }, { status: 401 });
+    }
+
+    // Check IP
+    const isKnownIp = user.knownIps.includes(ip);
+
+    if (isKnownIp) {
+      // Login success directly
+      await createSession(user);
+      return NextResponse.json({ success: true, requireOtp: false });
+    } else {
+      // Require OTP
+      const otp = generateOTP(user.username);
+      
+      const sent = await sendTelegramOTP(user.chatId, otp);
+      
+      if (!sent) {
+        return NextResponse.json({ error: 'No se pudo enviar el código OTP a Telegram' }, { status: 500 });
+      }
+
+      return NextResponse.json({ success: true, requireOtp: true });
+    }
+  } catch (error) {
+    console.error('Login error:', error);
+    return NextResponse.json({ error: 'Error interno' }, { status: 500 });
+  }
+}

app/api/auth/register/route.ts

@@ -0,0 +1,41 @@
+import { NextResponse } from 'next/server';
+import { saveUser, findUser, hashPassword, createSession } from '@/lib/auth';
+import { randomUUID } from 'crypto';
+
+export async function POST(req: Request) {
+  try {
+    const { username, password, chatId } = await req.json();
+
+    if (!username || !password || !chatId) {
+      return NextResponse.json({ error: 'Faltan datos requeridos' }, { status: 400 });
+    }
+
+    if (findUser(username)) {
+      return NextResponse.json({ error: 'El usuario ya existe' }, { status: 409 });
+    }
+
+    // Hash password
+    const passwordHash = await hashPassword(password);
+    
+    // Get IP
+    const ip = req.headers.get('x-forwarded-for') || '127.0.0.1';
+
+    const newUser = {
+      id: randomUUID(),
+      username,
+      passwordHash,
+      chatId,
+      knownIps: [ip] // Register current IP as known initially
+    };
+
+    saveUser(newUser);
+
+    // Auto login after register
+    await createSession(newUser);
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error('Register error:', error);
+    return NextResponse.json({ error: 'Error interno del servidor' }, { status: 500 });
+  }
+}

app/api/auth/send/route.ts

@@ -1,25 +0,0 @@
-import { NextResponse } from 'next/server';
-import TelegramBot from 'node-telegram-bot-api';
-import { generateOTP, saveOTP } from '@/lib/otp';
-
-export async function POST() {
-  const token = process.env.TELEGRAM_BOT_TOKEN;
-  const chatId = process.env.TELEGRAM_CHAT_ID;
-
-  if (!token || !chatId) {
-    console.error("Telegram credentials missing");
-    return NextResponse.json({ error: 'Telegram not configured' }, { status: 500 });
-  }
-
-  const otp = generateOTP();
-  saveOTP(otp);
-
-  const bot = new TelegramBot(token, { polling: false });
-  try {
-    await bot.sendMessage(chatId, `🔐 Your Login Code: ${otp}`);
-    return NextResponse.json({ success: true });
-  } catch (error: any) {
-    console.error('Telegram Error:', error);
-    return NextResponse.json({ error: 'Failed to send message: ' + error.message }, { status: 500 });
-  }
-}

app/api/auth/verify-otp/route.ts

@@ -0,0 +1,34 @@
+import { NextResponse } from 'next/server';
+import { findUser, saveUser, createSession } from '@/lib/auth';
+import { verifyOTP } from '@/lib/otp';
+
+export async function POST(req: Request) {
+  try {
+    const { username, otp } = await req.json();
+    const ip = req.headers.get('x-forwarded-for')?.split(',')[0].trim() || 'unknown';
+
+    if (!verifyOTP(username, otp)) {
+      return NextResponse.json({ error: 'Código inválido o expirado' }, { status: 401 });
+    }
+
+    const user = findUser(username);
+    if (!user) {
+        return NextResponse.json({ error: 'Usuario no encontrado' }, { status: 404 });
+    }
+
+    // Add IP to known list if not exists
+    if (!user.knownIps.includes(ip) && ip !== 'unknown') {
+      user.knownIps.push(ip);
+      saveUser(user);
+    }
+
+    // Login success
+    await createSession(user);
+
+    return NextResponse.json({ success: true });
+
+  } catch (error) {
+    console.error('OTP Verify error:', error);
+    return NextResponse.json({ error: 'Error interno' }, { status: 500 });
+  }
+}

app/api/auth/verify/route.ts

@@ -1,24 +0,0 @@
-import { NextResponse } from 'next/server';
-import { verifyOTP } from '@/lib/otp';
-import { cookies } from 'next/headers';
-
-export async function POST(req: Request) {
-  try {
-    const { code } = await req.json();
-    
-    if (verifyOTP(code)) {
-      // Set cookie
-      cookies().set('auth_token', 'true', { 
-        httpOnly: true,
-        secure: process.env.NODE_ENV === 'production',
-        maxAge: 60 * 60 * 24 * 7, // 1 week
-        path: '/'
-      });
-      return NextResponse.json({ success: true });
-    }
-    
-    return NextResponse.json({ error: 'Invalid Code' }, { status: 401 });
-  } catch (error) {
-    return NextResponse.json({ error: 'Invalid Request' }, { status: 400 });
-  }
-}

app/login/page.tsx

@@ -2,23 +2,43 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { Lock, Send, Loader2 } from 'lucide-react';
+import { Lock, User, Key, ArrowRight, ShieldCheck, Loader2 } from 'lucide-react';
+import Link from 'next/link';
 
 export default function LoginPage() {
-  const [step, setStep] = useState<'initial' | 'verify'>('initial');
-  const [code, setCode] = useState('');
+  const router = useRouter();
+  const [step, setStep] = useState<'credentials' | 'otp'>('credentials');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
-  const router = useRouter();
+  
+  const [formData, setFormData] = useState({
+    username: '',
+    password: '',
+    otp: ''
+  });
 
-  const sendCode = async () => {
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
     setLoading(true);
     setError('');
+
     try {
-      const res = await fetch('/api/auth/send', { method: 'POST' });
+      const res = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username: formData.username, password: formData.password })
+      });
+
       const data = await res.json();
-      if (!res.ok) throw new Error(data.error || 'Failed to send code');
-      setStep('verify');
+
+      if (!res.ok) throw new Error(data.error || 'Error al iniciar sesión');
+
+      if (data.requireOtp) {
+        setStep('otp');
+      } else {
+        router.push('/');
+        router.refresh();
+      }
     } catch (err: any) {
       setError(err.message);
     } finally {
@@ -26,21 +46,24 @@ export default function LoginPage() {
     }
   };
 
-  const verifyCode = async () => {
+  const handleVerifyOtp = async (e: React.FormEvent) => {
+    e.preventDefault();
     setLoading(true);
     setError('');
+
     try {
-      const res = await fetch('/api/auth/verify', {
+      const res = await fetch('/api/auth/verify-otp', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ code })
+        body: JSON.stringify({ username: formData.username, otp: formData.otp })
       });
+
       const data = await res.json();
-      if (!res.ok) throw new Error(data.error || 'Invalid code');
-      
-      // Redirect
+
+      if (!res.ok) throw new Error(data.error || 'Código incorrecto');
+
       router.push('/');
-      router.refresh(); 
+      router.refresh();
     } catch (err: any) {
       setError(err.message);
     } finally {
@@ -49,66 +72,121 @@ export default function LoginPage() {
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gray-900 text-white p-4">
-      <div className="w-full max-w-md bg-gray-800 rounded-lg shadow-xl p-8 border border-gray-700">
-        <div className="flex flex-col items-center mb-8">
-          <div className="bg-blue-600 p-3 rounded-full mb-4">
-            <Lock className="w-8 h-8 text-white" />
+    <div className="min-h-screen bg-slate-950 flex items-center justify-center p-4">
+      <div className="w-full max-w-md bg-slate-900 border border-slate-800 rounded-2xl shadow-xl overflow-hidden">
+        {/* Header */}
+        <div className="bg-slate-950/50 p-6 text-center border-b border-slate-800">
+          <div className="mx-auto w-12 h-12 bg-emerald-500/10 rounded-xl flex items-center justify-center mb-4">
+            <Lock className="w-6 h-6 text-emerald-500" />
           </div>
-          <h1 className="text-2xl font-bold">Secure Access</h1>
-          <p className="text-gray-400 mt-2 text-center">
-            Finanzas Personales
-          </p>
+          <h1 className="text-2xl font-bold text-white mb-1">Bienvenido</h1>
+          <p className="text-slate-400 text-sm">Sistema de Finanzas Personales</p>
         </div>
 
-        {error && (
-          <div className="bg-red-900/50 border border-red-500 text-red-200 p-3 rounded mb-4 text-sm">
-            {error}
-          </div>
-        )}
+        <div className="p-6">
+          {error && (
+            <div className="mb-6 p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm text-center">
+              {error}
+            </div>
+          )}
 
-        {step === 'initial' ? (
-          <div className="space-y-4">
-            <p className="text-gray-300 text-center text-sm">
-              Click below to receive a login code via Telegram.
-            </p>
-            <button
-              onClick={sendCode}
-              disabled={loading}
-              className="w-full bg-blue-600 hover:bg-blue-500 text-white font-semibold py-3 px-4 rounded-lg transition flex items-center justify-center gap-2 disabled:opacity-50"
-            >
-              {loading ? <Loader2 className="animate-spin" /> : <Send size={20} />}
-              Send Code to Telegram
-            </button>
-          </div>
-        ) : (
-          <div className="space-y-4">
-            <p className="text-gray-300 text-center text-sm">
-              Enter the 6-digit code sent to your Telegram.
-            </p>
-            <input
-              type="text"
-              value={code}
-              onChange={(e) => setCode(e.target.value)}
-              placeholder="123456"
-              className="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 text-center text-2xl tracking-widest focus:outline-none focus:ring-2 focus:ring-blue-500"
-              maxLength={6}
-            />
-            <button
-              onClick={verifyCode}
-              disabled={loading || code.length < 4}
-              className="w-full bg-green-600 hover:bg-green-500 text-white font-semibold py-3 px-4 rounded-lg transition flex items-center justify-center gap-2 disabled:opacity-50"
-            >
-              {loading ? <Loader2 className="animate-spin" /> : 'Verify & Login'}
-            </button>
-            <button 
-              onClick={() => setStep('initial')}
-              className="w-full text-gray-400 hover:text-white text-sm"
-            >
-              Cancel
-            </button>
-          </div>
-        )}
+          {step === 'credentials' ? (
+            <form onSubmit={handleLogin} className="space-y-4">
+              <div className="space-y-2">
+                <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Usuario</label>
+                <div className="relative">
+                  <User className="absolute left-3 top-2.5 w-5 h-5 text-slate-500" />
+                  <input
+                    type="text"
+                    required
+                    value={formData.username}
+                    onChange={e => setFormData({...formData, username: e.target.value})}
+                    className="w-full pl-10 pr-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg text-white focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition-all placeholder:text-slate-600"
+                    placeholder="Ingresa tu usuario"
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Contraseña</label>
+                <div className="relative">
+                  <Key className="absolute left-3 top-2.5 w-5 h-5 text-slate-500" />
+                  <input
+                    type="password"
+                    required
+                    value={formData.password}
+                    onChange={e => setFormData({...formData, password: e.target.value})}
+                    className="w-full pl-10 pr-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg text-white focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition-all placeholder:text-slate-600"
+                    placeholder="••••••••"
+                  />
+                </div>
+              </div>
+
+              <button
+                type="submit"
+                disabled={loading}
+                className="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-medium py-2.5 rounded-lg transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed mt-2"
+              >
+                {loading ? <Loader2 className="animate-spin w-5 h-5" /> : (
+                  <>
+                    Ingresar <ArrowRight className="w-4 h-4" />
+                  </>
+                )}
+              </button>
+            </form>
+          ) : (
+            <form onSubmit={handleVerifyOtp} className="space-y-4 animate-in slide-in-from-right-8 fade-in duration-300">
+              <div className="text-center mb-6">
+                <div className="inline-flex items-center justify-center w-16 h-16 bg-blue-500/10 rounded-full mb-4">
+                  <ShieldCheck className="w-8 h-8 text-blue-500" />
+                </div>
+                <h3 className="text-lg font-medium text-white">Verificación de Identidad</h3>
+                <p className="text-slate-400 text-sm mt-1">
+                  Hemos enviado un código a tu Telegram.
+                  <br />Ingrésalo para continuar.
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <input
+                  type="text"
+                  required
+                  autoFocus
+                  maxLength={6}
+                  value={formData.otp}
+                  onChange={e => setFormData({...formData, otp: e.target.value.replace(/\D/g, '')})}
+                  className="w-full text-center text-2xl tracking-[0.5em] font-mono py-3 bg-slate-950 border border-slate-800 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
+                  placeholder="000000"
+                />
+              </div>
+
+              <button
+                type="submit"
+                disabled={loading || formData.otp.length !== 6}
+                className="w-full bg-blue-600 hover:bg-blue-500 text-white font-medium py-2.5 rounded-lg transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {loading ? <Loader2 className="animate-spin w-5 h-5" /> : 'Verificar Código'}
+              </button>
+              
+              <button
+                type="button"
+                onClick={() => setStep('credentials')}
+                className="w-full text-slate-500 text-sm hover:text-slate-300 transition-colors"
+              >
+                Volver atrás
+              </button>
+            </form>
+          )}
+        </div>
+
+        <div className="bg-slate-950/50 p-4 text-center border-t border-slate-800">
+          <p className="text-slate-500 text-sm">
+            ¿No tienes cuenta?{' '}
+            <Link href="/register" className="text-emerald-500 hover:text-emerald-400 font-medium hover:underline">
+              Regístrate aquí
+            </Link>
+          </p>
+        </div>
       </div>
     </div>
   );

app/register/page.tsx

@@ -0,0 +1,135 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { UserPlus, User, Key, MessageSquare, Loader2 } from 'lucide-react';
+import Link from 'next/link';
+
+export default function RegisterPage() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  
+  const [formData, setFormData] = useState({
+    username: '',
+    password: '',
+    chatId: ''
+  });
+
+  const handleRegister = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      const res = await fetch('/api/auth/register', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(formData)
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) throw new Error(data.error || 'Error al registrarse');
+
+      router.push('/');
+      router.refresh();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-slate-950 flex items-center justify-center p-4">
+      <div className="w-full max-w-md bg-slate-900 border border-slate-800 rounded-2xl shadow-xl overflow-hidden">
+        {/* Header */}
+        <div className="bg-slate-950/50 p-6 text-center border-b border-slate-800">
+          <div className="mx-auto w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center mb-4">
+            <UserPlus className="w-6 h-6 text-blue-500" />
+          </div>
+          <h1 className="text-2xl font-bold text-white mb-1">Crear Cuenta</h1>
+          <p className="text-slate-400 text-sm">Configura tu acceso a Finanzas</p>
+        </div>
+
+        <div className="p-6">
+          {error && (
+            <div className="mb-6 p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm text-center">
+              {error}
+            </div>
+          )}
+
+          <form onSubmit={handleRegister} className="space-y-4">
+            <div className="space-y-2">
+              <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Usuario</label>
+              <div className="relative">
+                <User className="absolute left-3 top-2.5 w-5 h-5 text-slate-500" />
+                <input
+                  type="text"
+                  required
+                  value={formData.username}
+                  onChange={e => setFormData({...formData, username: e.target.value})}
+                  className="w-full pl-10 pr-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all placeholder:text-slate-600"
+                  placeholder="Elige un usuario"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Contraseña</label>
+              <div className="relative">
+                <Key className="absolute left-3 top-2.5 w-5 h-5 text-slate-500" />
+                <input
+                  type="password"
+                  required
+                  value={formData.password}
+                  onChange={e => setFormData({...formData, password: e.target.value})}
+                  className="w-full pl-10 pr-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all placeholder:text-slate-600"
+                  placeholder="Mínimo 6 caracteres"
+                  minLength={6}
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Telegram Chat ID</label>
+              <div className="relative">
+                <MessageSquare className="absolute left-3 top-2.5 w-5 h-5 text-slate-500" />
+                <input
+                  type="text"
+                  required
+                  value={formData.chatId}
+                  onChange={e => setFormData({...formData, chatId: e.target.value})}
+                  className="w-full pl-10 pr-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all placeholder:text-slate-600"
+                  placeholder="Ej: 123456789"
+                />
+              </div>
+              <p className="text-[10px] text-slate-500 flex gap-1">
+                <span>ℹ️</span>
+                Envía /start a tu bot para obtener este ID.
+              </p>
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full bg-blue-600 hover:bg-blue-500 text-white font-medium py-2.5 rounded-lg transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed mt-2"
+            >
+              {loading ? <Loader2 className="animate-spin w-5 h-5" /> : 'Registrar Cuenta'}
+            </button>
+          </form>
+        </div>
+
+        <div className="bg-slate-950/50 p-4 text-center border-t border-slate-800">
+          <p className="text-slate-500 text-sm">
+            ¿Ya tienes cuenta?{' '}
+            <Link href="/login" className="text-blue-500 hover:text-blue-400 font-medium hover:underline">
+              Inicia Sesión
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}