Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

Primeros pasos con Firebase Authentication en sitios web

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Puede usar Firebase Authentication para permitir que los usuarios inicien sesión en su aplicación mediante 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 de Google y el inicio de sesión de Facebook. Este tutorial lo inicia con Firebase Authentication al mostrarle cómo agregar una dirección de correo electrónico y una contraseña para iniciar sesión en su aplicación.

Agregar e inicializar el SDK de autenticación

  1. Si aún no lo ha hecho, instale el SDK de Firebase JS e inicialice Firebase .

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

(Opcional) Realice prototipos y pruebas 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 usar para crear prototipos y probar la funcionalidad de autenticación: Firebase Local Emulator Suite. Si está decidiendo entre técnicas de autenticación y proveedores, probando diferentes modelos de datos con datos públicos y privados mediante las reglas de seguridad de autenticación y 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 de su proyecto emulado (funciones, otras bases de datos y reglas de seguridad).

El uso del 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 tu proyecto local, ejecuta firebase emulators:start .
  3. Uso de 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.

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

Ahora continuemos con cómo autenticar a los usuarios.

Registrar nuevos usuarios

Cree un formulario que permita a los nuevos usuarios registrarse en su aplicación utilizando su dirección de correo electrónico y una contraseña. Cuando un usuario complete 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 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;
    // ..
  });

Iniciar sesión de 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 complete el formulario, llame 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;
  });

Establezca un observador de estado de autenticación y obtenga datos de usuario

Para cada una de las páginas de su aplicación que necesiten 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 mediante el método onAuthStateChanged . Cuando un usuario inicia sesión correctamente, puede obtener información sobre el usuario 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

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