Únete de manera presencial y en línea a Firebase Summit el 18 de octubre de 2022. Descubre cómo Firebase puede ayudarte a acelerar el desarrollo de apps, a lanzar la tuya con confianza y a escalar con facilidad. Regístrate ahora

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:

Web version 9

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

Web version 8

import firebase from "firebase/app";
import "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
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 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 version 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 version 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 version 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 version 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 version 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 version 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 en los siguientes vínculos: