Construir un sistema de autenticación funcional es uno de los ejercicios más formativos cuando aprendes JavaScript. Aquí se aborda paso a paso cómo crear una función de sign in que valide credenciales contra una base de datos local y, si el usuario existe, muestre un mensaje de bienvenida junto con su timeline.
¿Cómo funciona la función de sign in en JavaScript?
Una vez que la función de validación ya está lista y devuelve true o false según corresponda, el siguiente paso es crear la función signIn [01:00]. Esta función recibe dos parámetros: el username y el password que el usuario introduce a través de prompts.
Dentro de signIn se utiliza un condicional if que manda llamar a la función de validación. Si esa función retorna true, significa que las credenciales coinciden con algún registro en la base de datos. En ese caso:
- Se muestra un
alert personalizado con el nombre del usuario: "Bienvenido a tu cuenta" seguido del username.
- Se imprime en consola con
console.log el contenido del userTimeline [02:15].
Si la validación retorna false, se ejecuta el bloque else y aparece un mensaje de error: "¡Ups! Usuario o contraseña incorrectos" [03:10]. En este caso no se muestra ningún timeline ni información adicional.
¿Por qué el bucle for rompe la validación prematuramente?
Al probar la función, surge un problema común: aunque se introduzcan credenciales correctas, el sistema siempre devuelve que son incorrectas [04:05]. La razón está en cómo se maneja el return false dentro del bucle for.
Cuando el return false está dentro del else del for, ocurre lo siguiente: el bucle evalúa solo el primer elemento del arreglo de usuarios. Si ese primer registro no coincide, ejecuta return false de inmediato, rompe el bucle y la función termina sin revisar los demás usuarios [04:40].
Este es un error frecuente al trabajar con iteraciones y validaciones. La solución consiste en:
- Eliminar el
else y el return false de dentro del for.
- Colocar el
return false fuera del bucle.
¿Cuál es la lógica correcta para recorrer la base de datos?
Con la corrección aplicada [05:15], el flujo funciona así:
- El
for compara las credenciales con el primer elemento del arreglo.
- Si coincide, ejecuta
return true y el bucle se detiene.
- Si no coincide, continúa al siguiente elemento.
- Si coincide con el segundo o tercer registro, retorna
true.
- Si ningún registro hace match, el bucle termina y la función ejecuta el
return false que está fuera del for.
Ese false llega al condicional dentro de signIn y activa el mensaje de error del else.
¿Cómo se verifica que todo funcione correctamente?
Después de guardar los cambios, se prueba ingresando credenciales válidas: username "Caro" y password "456" [06:00]. El resultado ahora es el esperado:
- Aparece el
alert: "Bienvenida a tu cuenta, Caro".
- En la consola se imprime el userTimeline completo.
El timeline en este ejercicio es estático, es decir, no cambia según el usuario que se conecte. Sin embargo, esto se puede hacer dinámico como parte de un reto personal para seguir practicando.
Algunos puntos importantes para recordar:
- El
return dentro de un bucle detiene la ejecución de toda la función, no solo de la iteración actual.
- Colocar validaciones de fallo fuera del bucle permite que el
for recorra todos los elementos antes de tomar una decisión final.
- Personalizar los mensajes con variables como
username mejora la experiencia del usuario.
Si quieres llevar este proyecto más lejos, puedes implementar un timeline dinámico que muestre publicaciones distintas según el usuario autenticado. ¿Qué funcionalidad extra le agregarías tú?
