Chilexpress: rediseño del login y la autenticación de la appChilexpress: redesigning the app's login and authentication

import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, ActivityIndicator, Alert } from 'react-native';
import * as SecureStore from 'expo-secure-store';
import { login } from '../services/auth';
import { styles } from './LoginScreen.styles';

const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

export default function LoginScreen({ navigation }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [remember, setRemember] = useState(true);
  const [loading, setLoading] = useState(false);

  // Validación reactiva: el error aparece mientras se escribe
  const emailError = email.length > 0 && !EMAIL_RE.test(email);

  const handleLogin = async () => {
    if (!EMAIL_RE.test(email) || !password) {
      Alert.alert('Atención', 'Ingresa un correo válido y tu contraseña');
      return;
    }
    setLoading(true);
    try {
      const { token } = await login(email, password);
      await SecureStore.setItemAsync('token', token);
      if (remember) await SecureStore.setItemAsync('email', email);
      navigation.replace('Home');
    } catch {
      Alert.alert('Error', 'Correo o contraseña incorrectos');
    } finally {
      setLoading(false);
    }
  };

  return (
    <View testID="login_screen" style={styles.container}>
      <TextInput
        testID="input_email"
        style={[styles.input, emailError && styles.inputError]}
        placeholder="Ingresa tu email"
        keyboardType="email-address"
        autoCapitalize="none"
        value={email}
        onChangeText={setEmail}
      />
      {emailError && <Text style={styles.errorText}>Revisa el formato del correo</Text>}

      <TextInput
        testID="input_password"
        style={styles.input}
        placeholder="Ingresa tu contraseña"
        secureTextEntry={!showPassword}
        value={password}
        onChangeText={setPassword}
      />
      <TouchableOpacity onPress={() => setShowPassword(!showPassword)}>
        <Text style={styles.link}>{showPassword ? 'Ocultar' : 'Ver'} contraseña</Text>
      </TouchableOpacity>

      <TouchableOpacity testID="btn_submit_login" style={styles.cta} onPress={handleLogin} disabled={loading}>
        {loading ? <ActivityIndicator color="#FFFFFF" /> : <Text style={styles.ctaText}>Iniciar sesión</Text>}
      </TouchableOpacity>
    </View>
  );
}

const express = require('express');
const bcrypt = require('bcrypt');
const jwt = require('jsonwebtoken');
const { findUserByEmail } = require('../db/users');

const router = express.Router();

// POST /v1/auth — inicio de sesión para clientes móviles
router.post('/v1/auth', async (req, res) => {
  const { email, password } = req.body;

  if (!email || !password) {
    return res.status(400).json({ success: false, message: 'Email y contraseña son obligatorios' });
  }

  try {
    const user = await findUserByEmail(email);
    const valid = user && (await bcrypt.compare(password, user.passwordHash));

    // Mismo mensaje para usuario inexistente o clave incorrecta:
    // evita revelar qué correos están registrados
    if (!valid) {
      return res.status(401).json({ success: false, message: 'Credenciales no válidas' });
    }

    const token = jwt.sign(
      { sub: user.id, email: user.email },
      process.env.JWT_SECRET,
      { expiresIn: '7d' }
    );

    return res.status(200).json({ success: true, token, user: { id: user.id, email: user.email } });
  } catch (err) {
    return res.status(500).json({ success: false, message: 'Error interno del servidor' });
  }
});

module.exports = router;