Autenticarse con Firebase usando cuentas basadas en contraseña usando Javascript

Puedes usar Firebase Authentication para permitir que tus usuarios se autentiquen con Firebase usando sus direcciones de correo electrónico y contraseñas, y para administrar las cuentas basadas en contraseñas de tu aplicación.

Antes de que empieces

  1. Agrega Firebase a tu proyecto de JavaScript .
  2. Si aún no has conectado tu aplicación a tu proyecto de Firebase, hazlo desde Firebase console .
  3. Habilite el inicio de sesión por correo electrónico/contraseña:
    1. En Firebase console , abre la sección Auth .
    2. En la pestaña Método de inicio de sesión , habilite el método de inicio de sesión por correo electrónico/contraseña y haga clic en Guardar .

Crear una cuenta basada en contraseña

Para crear una nueva cuenta de usuario con una contraseña, complete los siguientes pasos en la página de registro de su aplicación:

  1. Cuando un nuevo usuario se registre utilizando el formulario de registro de su aplicación, complete los pasos de validación de cuenta nueva que su aplicación requiera, como verificar que la contraseña de la nueva cuenta se haya escrito correctamente y cumpla con sus requisitos de complejidad.
  2. Cree una nueva cuenta pasando la dirección de correo electrónico y la contraseña del nuevo usuario a createUserWithEmailAndPassword :

    Web modular API

    import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed up 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });
    auth_signup_password.js

    Web namespaced API

    firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });
    email.js
    Si se creó la nueva cuenta, el usuario inicia sesión automáticamente. Eche un vistazo a la sección Próximos pasos a continuación para obtener los detalles del usuario registrado.

    Aquí también es donde puedes detectar y manejar errores. Para obtener una lista de códigos de error, consulte los documentos de referencia de autenticación .

Iniciar sesión como usuario con una dirección de correo electrónico y contraseña

Los pasos para iniciar sesión como usuario con una contraseña son similares a los pasos para crear una cuenta nueva. En la página de inicio de sesión de su aplicación, haga lo siguiente:

  1. Cuando un usuario inicia sesión en su aplicación, pase la dirección de correo electrónico y la contraseña del usuario a signInWithEmailAndPassword :

    Web modular API

    import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });
    auth_signin_password.js

    Web namespaced API

    firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });
    email.js
    Eche un vistazo a la sección Próximos pasos a continuación para obtener los detalles del usuario registrado.

    Aquí también es donde puedes detectar y manejar errores. Para obtener una lista de códigos de error, consulte los documentos de referencia de autenticación .

Recomendado: habilitar la protección de enumeración de correo electrónico

Algunos métodos de autenticación de Firebase que toman direcciones de correo electrónico como parámetros arrojan errores específicos si la dirección de correo electrónico no está registrada cuando debe registrarse (por ejemplo, al iniciar sesión con una dirección de correo electrónico y contraseña) o si no está registrada cuando no debe usarse (por ejemplo, al cambiar la dirección de correo electrónico de un usuario). Si bien esto puede ser útil para sugerir soluciones específicas a los usuarios, actores malintencionados también pueden abusar de él para descubrir las direcciones de correo electrónico registradas por sus usuarios.

Para mitigar este riesgo, le recomendamos habilitar la protección de enumeración de correo electrónico para su proyecto mediante la herramienta gcloud de Google Cloud. Tenga en cuenta que habilitar esta función cambia el comportamiento de informe de errores de Firebase Authentication: asegúrese de que su aplicación no dependa de errores más específicos.

Próximos pasos

Después de que un usuario inicia sesión por primera vez, se crea una nueva cuenta de usuario y se vincula a las credenciales (es decir, el nombre de usuario y la contraseña, el número de teléfono o la información del proveedor de autenticación) con las que el usuario inició sesión. Esta nueva cuenta se almacena como parte de su proyecto de Firebase y se puede usar para identificar a un usuario en cada aplicación de su proyecto, independientemente de cómo inicie sesión el usuario.

  • En sus aplicaciones, la forma recomendada de conocer el estado de autenticación de su usuario es configurar un observador en el objeto Auth . Luego puede obtener la información básica del perfil del usuario desde el objeto User . Consulte Administrar usuarios .

  • En las reglas de seguridad de Firebase Realtime Database y Cloud Storage, puede obtener el ID de usuario único del usuario que inició sesión a partir de la variable auth y usarlo para controlar a qué datos puede acceder un usuario.

Puede permitir que los usuarios inicien sesión en su aplicación utilizando múltiples proveedores de autenticación vinculando las credenciales del proveedor de autenticación a una cuenta de usuario existente.

Para cerrar la sesión de un usuario, llame signOut :

Web modular API

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

Web namespaced API

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js