Autentica con Firebase de forma anónima mediante JavaScript

Puedes usar Firebase Authentication para crear y usar cuentas anónimas temporales a fin de autenticar con Firebase. Estas cuentas se pueden usar para permitir que los usuarios que aún no se hayan registrado en la app trabajen con datos protegidos mediante reglas de seguridad. Si un usuario anónimo decide registrarse para usar la app, puedes vincular sus credenciales de acceso con la cuenta anónima, de manera que pueda continuar usando sus datos protegidos en sesiones futuras.

Antes de comenzar

  1. Agrega Firebase al proyecto de JavaScript.
  2. Si aún no conectaste la app al proyecto de Firebase, puedes hacerlo desde Firebase console.
  3. Habilita la autenticación anónima:
    1. En Firebase console, abre la sección Auth.
    2. En la página Métodos de acceso, habilita el método de acceso Anónimo.

Autentica con Firebase de forma anónima

Cuando un usuario que no accedió a su cuenta usa una función de la app que requiere autenticación en Firebase, sigue estos pasos para que el usuario acceda de forma anónima:

  1. Llama al método signInAnonymously de la siguiente forma:

    Web versión 9

    import { getAuth, signInAnonymously } from "firebase/auth";

const auth = getAuth();
signInAnonymously(auth)
  .then(() => {
    // Signed in..
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ...
  });
    auth_anon_sign_in.js

    Web versión 8

    firebase.auth().signInAnonymously()
  .then(() => {
    // Signed in..
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ...
  });
    anonymous.js
    Aquí también puedes detectar y resolver errores. Para obtener una lista de códigos de error, consulta la documentación de referencia de la autenticación.
  2. Si el método signInAnonymously se completa sin errores, se activará el observador registrado en onAuthStateChanged y podrás obtener los datos de la cuenta del usuario anónimo del objeto User de la siguiente forma:

    Web versión 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
    // ...
  }
});
    auth_state_listener.js

    Web versión 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
    // ...
  }
});
    index.js

Convierte una cuenta anónima en una permanente

Cuando un usuario anónimo se registra en la app, tal vez sea conveniente permitirle que continúe su trabajo con su cuenta nueva. Por ejemplo, puede que desees hacer que los elementos que el usuario agregó a su carrito de compras antes de registrarse estén disponibles en el carrito de compras de su cuenta nueva. Para hacerlo, completa los siguientes pasos:

  1. Cuando se registre el usuario, completa el flujo de acceso del proveedor de autenticación del usuario hasta el paso anterior a llamar a uno de los métodos Auth.signInWith. Por ejemplo, obtén el token del ID de Google, el token de acceso a Facebook o la dirección de correo electrónico y contraseña del usuario.

  2. Obtén una AuthCredential para el proveedor de autenticación nuevo:

    Acceso con Google

    Web versión 9

    import { GoogleAuthProvider } from "firebase/auth";

const credential = GoogleAuthProvider.credential(
  googleUser.getAuthResponse().id_token);
    auth_make_google_credential.js

    Web versión 8

    var credential = firebase.auth.GoogleAuthProvider.credential(
  googleUser.getAuthResponse().id_token);
    index.js
    Acceso con Facebook

    Web versión 9

    import { FacebookAuthProvider } from "firebase/auth";

const credential = FacebookAuthProvider.credential(
  response.authResponse.accessToken);
    auth_make_facebook_credential.js

    Web versión 8

    var credential = firebase.auth.FacebookAuthProvider.credential(
  response.authResponse.accessToken);
    index.js
    Acceso con correo electrónico y contraseña

    Web versión 9

    import { EmailAuthProvider } from "firebase/auth";

const credential = EmailAuthProvider.credential(email, password);
    auth_make_email_credential.js

    Web versión 8

    var credential = firebase.auth.EmailAuthProvider.credential(email, password);
    link-multiple-accounts.js

  3. Pasa el objeto AuthCredential al método link del usuario que accedió:

    Web versión 9

    import { getAuth, linkWithCredential } from "firebase/auth";

const auth = getAuth();
linkWithCredential(auth.currentUser, credential)
  .then((usercred) => {
    const user = usercred.user;
    console.log("Anonymous account successfully upgraded", user);
  }).catch((error) => {
    console.log("Error upgrading anonymous account", error);
  });
    auth_anonymous_link.js

    Web versión 8

    auth.currentUser.linkWithCredential(credential)
  .then((usercred) => {
    var user = usercred.user;
    console.log("Anonymous account successfully upgraded", user);
  }).catch((error) => {
    console.log("Error upgrading anonymous account", error);
  });
    link-multiple-accounts.js

Si la llamada a link se realiza correctamente, la cuenta nueva del usuario puede acceder a los datos de Firebase de la cuenta anónima.

Próximos pasos

Ahora que los usuarios pueden autenticar con Firebase, puedes controlar su acceso a la información de tu base de datos con las reglas de Firebase.