Inicio de sesión, Registro de usuario, Restablecimiento de contraseña Firebase en ReacJS.
toscadev
@ ToscaDevsJS
Firebase es una plataforma de desarrollo de aplicaciones que proporciona una variedad de herramientas y servicios para ayudarte a desarrollar aplicaciones de alta calidad.
Una de estas herramientas es Firebase Authentication, que te permite gestionar fácilmente la autenticación de usuarios en tu aplicación.
En este artículo, vamos a explorar cómo puedes utilizar Firebase Authentication para manejar el inicio de sesión, el registro de usuarios y el restablecimiento de contraseñas en tu aplicación JavaScript.
Importamos las dependencias necesarias.
import { auth } from "@/context/firebase-config";
import { FirebaseError } from "firebase/app"; //interface tipo de error de firebase
import {
createUserWithEmailAndPassword,
sendPasswordResetEmail,
signInWithEmailAndPassword,
} from "firebase/auth";
import toast from "react-hot-toast";
import { authError } from "./ErrorLists";
Inicio de sesión con correo electrónico y contraseña.
El primer paso para autenticar a un usuario es permitirles iniciar sesión. Aquí tienes un ejemplo de cómo puedes hacer esto con Firebase:
//inicio de sesión
export async function handleSignInWithEmailAndPassword(
email: string,
password: string
) {
try {
const userCredential = await signInWithEmailAndPassword(
auth,
email,
password
);
const user = userCredential.user;
console.log(user);
} catch (error) {
if (error instanceof FirebaseError) {
console.error(error.message);
toast.error(authError[error.code] || authError.default);
} else {
console.error(error);
toast.error("Ha ocurrido un error inesperado.");
}
}
}
Registro de usuario con correo electrónico y contraseña.
Además del inicio de sesión, también necesitarás una forma de registrar nuevos usuarios. Aquí tienes un ejemplo de cómo puedes hacer esto:
export async function handleCreateUserWithEmailAndPassword(
email: string,
password: string
) {
try {
const userCredential = await createUserWithEmailAndPassword(
auth,
email,
password
);
// Signed in
const user = userCredential.user;
console.log(user);
// ...
} catch (error) {
if (error instanceof FirebaseError) {
console.error(error.code);
toast.error(authError[error.code] || authError.default);
} else {
console.error(error);
toast.error("Ha ocurrido un error inesperado.");
}
}
}
Restablecimiento de contraseña con correo electrónico.
Por último, pero no menos importante, también necesitarás una forma de permitir a los usuarios restablecer sus contraseñas si las olvidan. Aquí tienes un ejemplo de cómo puedes hacer esto:
export async function handleSendPasswordResetEmail(email: string) {
try {
await sendPasswordResetEmail(auth, email);
toast.success(
"Correo electrónico de restablecimiento de contraseña enviado"
);
} catch (error: any) {
console.log(`Error ${error.code}: ${error.message}`);
if (error.code == "auth/user-not-found") {
toast.error("El correo electrónico no está registrado.");
} else if (error.code == "auth/invalid-email") {
toast.error("El correo electrónico no es válido.");
} else {
toast.error("Ha ocurrido un error inesperado.");
}
}
}
Listado de errores de Firebase.
Añadimos en la carpeta de App/firebase un archivo llamado ErrorLists.ts con el siguiente contenido. donde accedemos a los errores de firebase y los mostramos en un toast.
//errores de firebase
export const authError: Record<string, string> = {
"auth/email-already-exists": "Error el correo electrónico ya está en uso.",
"auth/email-already-in-use": "Error el correo electrónico ya está en uso.",
"auth/invalid-email": "Error el correo electrónico no es válido.",
"auth/invalid-login-credentials": "Error las credenciales no son válidas.",
"auth/operation-not-allowed": "Error la operación no está permitida.",
"auth/weak-password": "Error la contraseña no es segura.",
"auth/wrong-password": "Error la contraseña no es válida.",
"auth/user-disabled": "Error el usuario está deshabilitado.",
"auth/user-not-found": "Error el usuario no existe.",
"auth/too-many-requests": "Error demasiadas solicitudes, intente más tarde.",
"auth/invalid-verification-code":
"Error el código de verificación no es válido.",
"auth/network-request-failed": "Error de conexión a internet.",
default: "Error al crear la cuenta de usuario.",
};
Si te gusto esta guía no dudes en compartirla o sugerir tu opinión. ❤️