Comience con la autenticación de Firebase en sitios web

Puedes usar Firebase Authentication para permitir que los usuarios inicien sesión en tu aplicación usando uno o más métodos de inicio de sesión, incluido el inicio de sesión con dirección de correo electrónico y contraseña, y proveedores de identidad federados, como el inicio de sesión con Google y el inicio de sesión con Facebook. Este tutorial lo ayuda a comenzar con la autenticación de Firebase mostrándole cómo agregar una dirección de correo electrónico y una contraseña de inicio de sesión a su aplicación.

Agregar e inicializar el SDK de autenticación

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

  2. Agregue el SDK JS de Firebase Authentication e inicialice 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();

(Opcional) Prototipo y prueba con Firebase Local Emulator Suite

Antes de hablar sobre cómo su aplicación autentica a los usuarios, presentemos un conjunto de herramientas que puede utilizar para crear prototipos y probar la funcionalidad de autenticación: Firebase Local Emulator Suite. Si está decidiendo entre proveedores y técnicas de autenticación, probando diferentes modelos de datos con datos públicos y privados usando autenticación y reglas de seguridad de Firebase, o creando prototipos de diseños de interfaz de usuario de inicio de sesión, poder trabajar localmente sin implementar servicios en vivo puede ser una gran idea. .

Un emulador de autenticación es parte de Local Emulator Suite, que permite que su aplicación interactúe con el contenido y la configuración de la base de datos emulada, así como, opcionalmente, con los recursos del proyecto emulado (funciones, otras bases de datos y reglas de seguridad).

Usar el emulador de autenticación implica solo unos pocos pasos:

  1. Agregar una línea de código a la configuración de prueba de su aplicación para conectarse al emulador.
  2. Desde la raíz del directorio de su proyecto local, ejecute firebase emulators:start .
  3. Usar la interfaz de usuario de Local Emulator Suite para la creación de prototipos interactivos o la API REST del emulador de autenticación para pruebas no interactivas.

Hay una guía detallada disponible en Conecte su aplicación al emulador de autenticación . Para obtener más información, consulte la introducción a Local Emulator Suite .

Ahora continuemos con cómo autenticar usuarios.

Registrar nuevos usuarios

Cree un formulario que permita a nuevos usuarios registrarse en su aplicación utilizando su dirección de correo electrónico y una contraseña. Cuando un usuario completa el formulario, valide la dirección de correo electrónico y la contraseña proporcionadas por el usuario, luego páselas al método createUserWithEmailAndPassword :

Web modular API

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 namespaced API

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

Iniciar sesión usuarios existentes

Cree un formulario que permita a los usuarios existentes iniciar sesión con su dirección de correo electrónico y contraseña. Cuando un usuario completa el formulario, llame al método signInWithEmailAndPassword :

Web modular API

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 namespaced API

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

Establecer un observador de estado de autenticación y obtener datos del usuario

Para cada una de las páginas de su aplicación que necesite información sobre el usuario que inició sesión, adjunte un observador al objeto de autenticación global. Se llama a este observador cada vez que cambia el estado de inicio de sesión del usuario.

Adjunte el observador utilizando el método onAuthStateChanged . Cuando un usuario inicia sesión correctamente, puede obtener información sobre el usuario en el observador.

Web modular API

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 namespaced API

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

Aprenda cómo agregar soporte para otros proveedores de identidad y cuentas de invitados anónimos: