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. En este instructivo, se muestra cómo agregar un acceso con dirección de correo electrónico y contraseña a la app para comenzar a usar Firebase Authentication.

Agrega e inicializa el SDK de Authentication

  1. Si aún no lo has hecho, instala el SDK de Firebase JS y, luego, inicializa Firebase.

  2. Agrega el SDK de Firebase Authentication JS y, luego, inicializa Firebase Authentication:

API modular web

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);

API con espacio de nombres web

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = firebase.auth();

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 elegiste una técnica de autenticación o un proveedor específico, estás probando varios modelos de datos con información pública y privada mediante Authentication y las Reglas de seguridad de Firebase, o bien si estás creando prototipos de diseños con IU de acceso, poder trabajar de manera local sin implementar servicios en ejecución será de gran ayuda.

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:

API modular web

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

API con espacio de nombres web

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:

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

API con espacio de nombres web

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.

API modular web

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/auth.user
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

API con espacio de nombres web

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/v8/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

Próximos pasos

Obtén información para admitir otros proveedores de identidad y cuentas de invitado anónimas en los siguientes vínculos: