Una página de login es una sección fundamental cuando estamos creando una aplicación con perfiles. Esta página le permite al usuario acceder a su cuenta insertando unas credenciales: un nombre de usuario y una contraseña. Sin embargo, estas credenciales no siempre dan acceso, pues hay momentos en los que no son correctas. En este post, te enseñaremos cómo controlar error login en React para capturar los momentos en los que las credenciales son inválidas.
¿Qué es un login en React?
Antes de enseñarte cómo controlar error login en React, te recomendamos leer nuestros posts sobre ejecutar un login en React y enviar datos a una API desde React. En estos artículos, te enseñamos qué es un login y cómo escribir esta función para llamar a nuestra API y enviarle nuestros datos. A continuación, te presentamos las líneas de código que nos indican esta función:
// ¿Cómo controlar error login en React?: Paso 1
export const login = ({ ...credentials }) => {
return client.post ('auth/login', credentials);En el caso de esta función login, estamos enviando un estado credentials que contiene dos estados que controlan dos input: uno de usuario (username) y otro de contraseña (password). Si quieres saber más sobre este proceso, te invitamos a leer nuestro post sobre unir estados en React.
Ahora que tenemos esta función, la podemos insertar en nuestro componente, en el que está nuestro formulario. Esta función la podemos pasar como parámetro de la función handleChange que hemos creado en el artículo sobre ejecutar un submit en React. Recuerda que el evento onSubmit se utiliza para ejecutar una acción cuando el usuario hace clic sobre un botón de tipo submit. En las siguientes líneas de código, insertamos nuestro login para que la acción que se ejecute sea un envío de datos a nuestra API:
// ¿Cómo controlar error login en React?: Paso 2
const handleSubmit = event => {
event.preventDefault ( );
login (credentials);
};Ahora, nuestra función login está hecha para que enviemos los datos de usuario y contraseña insertados a nuestro servidor. Este servidor procesará los datos y nos devolverá una de dos opciones: un objeto accesstoken cuando las credenciales son correctas o un 401: unauthorized cuando las credenciales no son válidas. De esta manera, nuestra aplicación define si se le otorga o no acceso al usuario según el valor de los input.
A continuación, te enseñaremos cómo controlar error login en React desde la función handleSubmit.
¿Cómo controlar error login en React?
Para controlar error login en React, debemos tener presente que nuestra función handleSubmit nos está dando una promesa. Esto sucede porque, como todo evento en React, el evento onSubmit nos permite crear acciones asincrónicas. Es decir, permite programar acciones a ejecutar en caso de que una situación particular se dé.
Entonces, como tenemos una promesa, también tenemos a nuestra disposición los métodos then y catch de JavaScript. Del mismo modo, podemos utilizar las palabras clave async y await en JavaScript para controlar los errores.
Por lo tanto, para controlar error login en React, debemos preparar nuestra función usando las palabras clave async, await, try y catch.
const handleSubmit = async event => {
event.preventDefault ( );
try {
} catch (error) {
}
);Ahora, lo primero que debemos hacer es llamar a la función login en la sección try. Cuando llamemos a login puede que haya un error, que capturaremos en la sección catch (error). De momento, sacaremos este error por la consola usando el comando console.log.
Cuando no hay error, es decir, cuando nuestra API lee las credenciales como válidas y nos devuelve un token, definiremos un await. Recuerda que la función await nos permite definir una parte del código que debemos esperar antes de continuar con la lectura. Entonces, definiremos que la variable accessToken es igual a un await de la función login y pintaremos esta variable en pantalla.
Veamos:
// ¿Cómo controlar error login en react?
const handleSubmit = async event => {
event.preventDefault ( );
try {
const {accessToken} = await login (credentials);
console.log (accessToken)
} catch (error) {
console.log (error)
}
);¿Cuál es el siguiente paso?
Después de leer este post, no solo sabes cómo controlar error login en React, sino que también estás cada vez más cerca de dominar esta poderosa librería de JavaScript. Ahora, el siguiente paso es dedicarte por completo a tu aprendizaje. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva e íntegra donde aprenderás a desarrollar con herramientas y lenguajes como React, CSS, HTML y JavaScript. ¡No esperes más para dar el siguiente paso y matricúlate ahora!
