Primeros pasos con Firebase Authentication en sitios web

Puedes usar Firebase Authentication para permitir que los usuarios accedan a tu app con uno o más métodos de acceso, incluidos el acceso con dirección de correo electrónico y contraseña, y proveedores de identidad federada, como el Acceso con Google y el 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.

Agrega y, luego, 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

Obtén más información sobre la API modular web que admite la eliminación de código no utilizado y realiza la actualización desde la API con espacio de nombres.

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

Obtén más información sobre la API modular web que admite la eliminación de código no utilizado y realiza la actualización desde la API con espacio de nombres.

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 analizar cómo tu app autentica a los usuarios, veamos 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 Firebase Security Rules, o bien si estás creando prototipos de diseños de IU de acceso, poder trabajar de manera local sin implementar servicios en ejecución será de gran ayuda.

Un emulador de Authentication forma parte de Local Emulator Suite, lo 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 de forma interactiva o la API de REST del emulador de Authentication para 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

Obtén más información sobre la API modular web que admite la eliminación de código no utilizado y realiza la actualización desde la API con espacio de nombres.

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

Permitir el 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

Obtén más información sobre la API modular web que admite la eliminación de código no utilizado y realiza la actualización desde la API con espacio de nombres.

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

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

Obtén más información sobre la API modular web que admite la eliminación de código no utilizado y realiza la actualización desde la API con espacio de nombres.

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

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

Próximos pasos

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

• Acceso con Google
• Acceso con Facebook
• Acceso con Twitter
• Acceso con GitHub
• Acceso anónimo