Catch up on everthing we announced at this year's Firebase Summit. Learn more

Primeros pasos con Firebase Authentication en sitios web

Puedes usar Firebase Authentication para permitir que los usuarios accedan a la app con uno o más métodos de acceso, que incluyen el acceso con dirección de correo electrónico y contraseña, y proveedores de identidad federada, como Acceso con Google y Acceso con Facebook. Este instructivo te muestra cómo agregar un acceso con dirección de correo electrónico y contraseña a la app para comenzar con Firebase Authentication.

Conecta tu app a Firebase

Instala el SDK de Firebase. Asegúrate de pegar el código de configuración en la página web tal como se describe.

Crea prototipos y realiza pruebas con Firebase Local Emulator Suite (opcional)

Antes de explicar cómo tu app autentica a los usuarios, veremos un conjunto de herramientas que puedes usar para crear prototipos y probar la funcionalidad de Authentication: Firebase Local Emulator Suite. Si aún no eliges una técnica de autenticación o un proveedor específico, es recomendable que pruebes varios modelos de datos con información pública y privada mediante Authentication y las Reglas de seguridad de Firebase, o bien que crees prototipos de diseños con IU de acceso que puedan funcionar de manera local sin implementar servicios en ejecución.

Los emuladores de Authentication forman parte de Local Emulator Suite, que permite que tu app interactúe con el contenido y la configuración emulados de la base de datos y, si lo deseas, con los recursos emulados del proyecto (funciones, otras bases de datos y reglas de seguridad).

El uso del emulador de Authentication solo requiere algunos pasos sencillos:

  1. Agrega una línea de código a la configuración de prueba de tu app para conectarte al emulador.
  2. Desde la raíz del directorio de tu proyecto local, ejecuta firebase emulators:start.
  3. Usa la IU de Local Emulator Suite para crear un prototipo interactivo, o la API de REST del emulador de Authentication a fin de realizar pruebas no interactivas.

Puedes encontrar una guía detallada en el artículo Conecta tu app al emulador de Authentication. Para obtener más información, consulta la introducción a Local Emulator Suite.

Ahora veamos cómo autenticar a los usuarios.

Registra usuarios nuevos

Crea un formulario que permita a los usuarios nuevos registrarse en la app mediante su dirección de correo electrónico y una contraseña. Cuando un usuario complete el formulario, valida la dirección de correo electrónico y la contraseña que proporcionó el usuario para después pasarlos al método createUserWithEmailAndPassword:

Web versión 9

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

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

Web versión 8

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });

Acceso de usuarios existentes

Crea un formulario que permita a los usuarios existentes acceder con su dirección de correo electrónico y una contraseña. Cuando un usuario complete el formulario, llama al método signInWithEmailAndPassword:

Web versión 9

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;
  });

Web versión 8

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

Configura un observador de estado de autenticación y obtén datos del usuario

Para cada una de las páginas de la app que necesiten información sobre el usuario que accedió, vincula un observador al objeto de autenticación global. Se llama a este observador cada vez que cambia el estado de acceso del usuario.

Vincula el observador mediante el método onAuthStateChanged. Cuando un usuario acceda correctamente, podrás obtener información acerca de él en el observador.

Web versión 9

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

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

Web versión 8

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

Próximos pasos

Obtén información sobre cómo admitir otros proveedores de identidad y cuentas de invitado anónimas: