Acceso

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. ❤️


Regresar al Blog.

© Copyright 2024 ToscaDevJS.