Autentica con Firebase mediante cuentas basadas en contraseñas con JavaScript

Puedes usar Firebase Authentication para permitir que tus usuarios se autentiquen con Firebase mediante sus direcciones de correo electrónico y contraseñas, y para administrar las contraseñas y cuentas con contraseña de tu app.

Antes de comenzar

Agrega Firebase a tu proyecto de JavaScript.
Si aún no has conectado la app al proyecto de Firebase, puedes hacerlo desde Firebase console.
Habilita el acceso con correo electrónico y contraseña:
1. En la Firebase console, abre la sección Auth.
2. En la pestaña Método de acceso, habilita el método de acceso Correo electrónico/contraseña y haz clic en Guardar.

Crea una cuenta con contraseña

Para crear una cuenta de usuario nueva con una contraseña, completa los siguientes pasos en la página de registro de tu app:

Cuando un usuario nuevo se registre mediante el formulario de registro de la app, realiza los pasos de validación de la cuenta nueva necesarios, como verificar que se haya escrito correctamente la contraseña y que cumpla con los requisitos de complejidad.

Para crear una cuenta nueva, pasa la dirección de correo electrónico y la contraseña del usuario nuevo a createUserWithEmailAndPassword:

Web

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

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 cuenta nueva, el usuario accede automáticamente. Consulta la sección Próximos pasos para obtener los detalles del usuario que accedió.

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

Haz que los usuarios accedan con una dirección de correo electrónico y una contraseña

Los pasos para que un usuario acceda con una contraseña son similares a los pasos para crear una cuenta nueva. En la página de acceso de tu app, haz lo siguiente:

Cuando un usuario acceda a tu app, pasa la dirección de correo electrónico y la contraseña a signInWithEmailAndPassword:

Web

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

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

Consulta la sección Próximos pasos para obtener los detalles del usuario que accedió.

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

Recomendado: Establece una política de contraseñas

Puedes mejorar la seguridad de las cuentas aplicando requisitos de complejidad para las contraseñas.

Para configurar una política de contraseñas para tu proyecto, abre la pestaña Política de contraseñas en la página Configuración de autenticación de la consola de Firebase:

Configuración de autenticación

Las políticas de contraseñas de Firebase Authentication admiten los siguientes requisitos:

Se requiere un carácter en minúscula.
Se requiere un carácter en mayúscula.
Se requiere un carácter numérico.
Se requiere un carácter que no sea alfanumérico.

Los siguientes caracteres cumplen con el requisito de caracteres no alfanuméricos: ^ $ * . [ ] { } ( ) ? " ! @ # % & / \ , > < ' : ; | _ ~
Longitud mínima de la contraseña (oscila entre 6 y 30 caracteres; el valor predeterminado es 6)
Longitud máxima de la contraseña (longitud máxima de 4,096 caracteres)

Puedes habilitar la aplicación forzosa de la política de contraseñas en dos modos:

Obligatorio: Los intentos de registro fallarán hasta que el usuario actualice su contraseña de acuerdo con tu política.
Notificación: Los usuarios pueden registrarse con una contraseña que no cumple con los requisitos. Cuando uses este modo, debes verificar si la contraseña del usuario cumple con la política del cliente y pedirle de alguna manera que la actualice si no es así.

Los usuarios nuevos siempre deben elegir una contraseña que cumpla con tu política.

Si tienes usuarios activos, te recomendamos que no habilites la actualización forzosa en el acceso, a menos que pretendas bloquear el acceso a los usuarios cuyas contraseñas no satisfagan tu política. En su lugar, usa el modo de notificación, que permite a los usuarios acceder con sus contraseñas actuales y les informa los requisitos que no cumple su contraseña.

Valida una contraseña en el cliente

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

const status = await validatePassword(getAuth(), passwordFromUser);
if (!status.isValid) {
  // Password could not be validated. Use the status to show what
  // requirements are met and which are missing.

  // If a criterion is undefined, it is not required by policy. If the
  // criterion is defined but false, it is required but not fulfilled by
  // the given password. For example:
  const needsLowerCase = status.containsLowercaseLetter !== true;
}

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

Algunos métodos de Firebase Authentication que toman direcciones de correo electrónico como parámetros producen errores específicos si la dirección de correo electrónico no está registrada cuando debe estarlo (por ejemplo, cuando se accede con una dirección de correo electrónico y una contraseña) o si está registrada cuando no debe estar en uso (por ejemplo, cuando se cambia la dirección de correo electrónico de un usuario). Si bien esto puede ser útil para sugerir soluciones específicas a los usuarios, también puede usarse de forma inadecuada por actores maliciosos que quieren descubrir las direcciones de correo electrónico registradas por tus usuarios.

Para mitigar este riesgo, te recomendamos habilitar la protección de enumeración de correo electrónico para tu proyecto con la herramienta gcloud de Google Cloud. Ten en cuenta que habilitar esta función cambia el comportamiento de los informes de errores de Firebase Authentication, así que asegúrate de que tu app no dependa de los errores más específicos.

Próximos pasos

Cuando un usuario accede por primera vez, se crea una cuenta de usuario nueva y se la vincula con las credenciales (el nombre de usuario y la contraseña, el número de teléfono o la información del proveedor de autenticación) que el usuario utilizó para acceder. Esta cuenta nueva se almacena como parte de tu proyecto de Firebase y se puede usar para identificar a un usuario en todas las apps del proyecto, sin importar cómo acceda.

En tus apps, para conocer el estado de autenticación del usuario, te recomendamos configurar un observador en el objeto Auth. Luego podrás obtener la información de perfil básica del usuario a partir del objeto User. Consulta Administra usuarios en Firebase.
En tus Reglas de seguridad de Firebase Realtime Database y Cloud Storage, puedes obtener el ID del usuario único que accedió a partir de la variable auth y usarlo para controlar a qué datos podrá acceder.

Para permitir que los usuarios accedan a tu app mediante varios proveedores de autenticación, puedes vincular las credenciales de estos proveedores con una cuenta de usuario existente.

Para salir de la sesión de un usuario, llama a signOut de la siguiente manera:

Web

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

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