Autentica con Firebase mediante un vínculo de correo electrónico en JavaScript

Puedes usar Firebase Authentication para que los usuarios accedan mediante el envío de un correo electrónico con un vínculo en el que se pueda hacer clic. Además, en el proceso se verifica la dirección de correo electrónico del usuario.

Existen numerosos beneficios asociados al acceso por correo electrónico:

Es sencillo registrarse y acceder.
Hay un menor riesgo de reutilización de contraseñas entre aplicaciones, lo que puede comprometer incluso la seguridad de contraseñas bien seleccionadas.
Se puede autenticar un usuario y, al mismo tiempo, verificar que sea el dueño legítimo de la dirección de correo electrónico.
El usuario solo necesita una cuenta de correo electrónico con acceso para ingresar. No es necesario poseer un número de teléfono ni una cuenta en redes sociales.
El usuario puede acceder sin necesidad de proporcionar (o recordar) una contraseña, lo que resulta especialmente práctico si se utiliza un dispositivo móvil.
Un usuario existente que antes accedió con un identificador de correo electrónico (contraseña o federado) puede actualizar la configuración para acceder solamente con el correo electrónico. Por ejemplo, un usuario que olvidó su contraseña puede acceder de igual modo sin necesidad de restablecerla.

Antes de comenzar

Si aún no lo has hecho, copia el fragmento de inicialización de Firebase console en tu proyecto, como se describe en Agrega Firebase al proyecto de JavaScript.

Habilita el acceso con un vínculo de correo electrónico para el proyecto de Firebase

Para que los usuarios accedan a través de un vínculo de correo electrónico, primero debes habilitar el método de acceso con proveedor de correo electrónico y con vínculo de correo electrónico para el proyecto de Firebase:

En Firebase console, abre la sección Authentication.
En la pestaña Método de acceso, habilita el proveedor de Correo electrónico/contraseña. Ten en cuenta que se debe habilitar el acceso mediante correo electrónico/contraseña para utilizar el acceso con un vínculo de correo electrónico.
En la misma sección, habilita el método de acceso con Vínculo del correo electrónico (acceso sin contraseña).
Haz clic en Guardar.

Envía un vínculo de autenticación a la dirección de correo electrónico del usuario

Para iniciar el proceso de autenticación, muéstrale al usuario una interfaz que le pida ingresar su dirección de correo electrónico y, luego, llama a sendSignInLinkToEmail para solicitar a Firebase que envíe el vínculo de autenticación al correo electrónico del usuario.

Construye el objeto ActionCodeSettings, que proporciona a Firebase las instrucciones para construir el vínculo de correo electrónico. Configura los siguientes campos:
- url: Es el vínculo directo que se debe incorporar y cualquier estado adicional que se deba pasar. El dominio del vínculo debe agregarse a la lista de dominios autorizados de Firebase console. Para encontrarla, ve a la pestaña Método de acceso (Authentication -> Método de acceso).
- android y ios: Son las apps que se deben usar cuando se abre el vínculo de acceso en un dispositivo Android o Apple. Obtén más información sobre la configuración de Firebase Dynamic Links a fin de abrir vínculos de acción en correos electrónicos a través de apps para dispositivos móviles.
- handleCodeInApp: Se debe configurar como verdadero. A diferencia de otras acciones de correo electrónico fuera de banda (restablecimiento de contraseñas y verificaciones de correos electrónicos), la operación de acceso siempre debe completarse en la app. Esto se debe a que, al final del flujo, se espera que el usuario acceda y que su estado de autenticación permanezca en la app.
- dynamicLinkDomain: Si se definen varios dominios de vínculos dinámicos personalizados para un proyecto, especifica cuál usar cuando el vínculo se abra mediante una app para dispositivos móviles determinada (por ejemplo, example.page.link). De lo contrario, el primer dominio se selecciona automáticamente.
  API modular 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.
```
const actionCodeSettings = {
  // URL you want to redirect back to. The domain (www.example.com) for this
  // URL must be in the authorized domains list in the Firebase Console.
  url: 'https://www.example.com/finishSignUp?cartId=1234',
  // This must be true.
  handleCodeInApp: true,
  iOS: {
    bundleId: 'com.example.ios'
  },
  android: {
    packageName: 'com.example.android',
    installApp: true,
    minimumVersion: '12'
  },
  dynamicLinkDomain: 'example.page.link'
};auth_email_link_actioncode_settings.js
```
  API con espacio de nombres web
```
var actionCodeSettings = {
  // URL you want to redirect back to. The domain (www.example.com) for this
  // URL must be in the authorized domains list in the Firebase Console.
  url: 'https://www.example.com/finishSignUp?cartId=1234',
  // This must be true.
  handleCodeInApp: true,
  iOS: {
    bundleId: 'com.example.ios'
  },
  android: {
    packageName: 'com.example.android',
    installApp: true,
    minimumVersion: '12'
  },
  dynamicLinkDomain: 'example.page.link'
};email-link-auth.js
```
Para obtener más información sobre ActionCodeSettings, consulta la sección Pasa estados en acciones de correo electrónico.
Pídele el correo electrónico al usuario.

Envía el vínculo de autenticación al correo electrónico del usuario y guarda su correo en caso de que este complete el acceso con correo electrónico en el mismo dispositivo.

API modular web

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

const auth = getAuth();
sendSignInLinkToEmail(auth, email, actionCodeSettings)
  .then(() => {
    // The link was successfully sent. Inform the user.
    // Save the email locally so you don't need to ask the user for it again
    // if they open the link on the same device.
    window.localStorage.setItem('emailForSignIn', email);
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ...
  });auth_email_link_send.js

API con espacio de nombres web

firebase.auth().sendSignInLinkToEmail(email, actionCodeSettings)
  .then(() => {
    // The link was successfully sent. Inform the user.
    // Save the email locally so you don't need to ask the user for it again
    // if they open the link on the same device.
    window.localStorage.setItem('emailForSignIn', email);
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ...
  });email-link-auth.js

Completa el acceso con el vínculo de correo electrónico

Medidas de seguridad

A fin de evitar que un vínculo de acceso se use para acceder como un usuario no deseado o en un dispositivo no deseado, Firebase Auth requiere que se proporcione la dirección de correo electrónico del usuario cuando se complete el proceso de acceso. Para que el acceso sea exitoso, esta dirección de correo electrónico debe coincidir con la dirección a la que se envió originalmente el vínculo de acceso.

Puedes simplificar este flujo para los usuarios que abren el vínculo de acceso en el mismo dispositivo en el que lo solicitan, si almacenas su dirección de correo electrónico de manera local (por ejemplo, utilizando localStorage o cookies) cuando envías el correo electrónico de acceso. Luego, usa esta dirección para completar el flujo. No pases el correo electrónico del usuario en los parámetros de la URL de redireccionamiento ni vuelvas a utilizarlo, ya que esto puede provocar que se inserte la sesión.

Una vez finalizado el acceso, se eliminará del usuario cualquier mecanismo de acceso previo sin verificar y se invalidarán las sesiones existentes. Por ejemplo, si alguien creó previamente una cuenta no verificada con el mismo correo electrónico y contraseña, se eliminará la contraseña del usuario para evitar que el ladrón de identidad que reclamó la propiedad y creó esa cuenta no verificada vuelva a acceder con el correo electrónico y la contraseña no verificados.

Además, asegúrate de utilizar una URL HTTPS en producción para evitar que los servidores intermediarios intercepten el vínculo.

Completa el acceso en una página web

El formato del vínculo directo de correo electrónico es el mismo formato que se utiliza para realizar acciones en correos electrónicos fuera de banda (verificación de correos electrónicos, restablecimiento de contraseñas y revocación de cambios en correos electrónicos). Firebase Auth simplifica esta comprobación, ya que proporciona la API isSignInWithEmailLink para verificar si el vínculo es un vínculo de acceso con correo electrónico.

Para completar el acceso en una página de destino, llama a signInWithEmailLink con el correo electrónico del usuario y el vínculo de correo electrónico correspondiente que contiene el código de uso único.

API modular web

import { getAuth, isSignInWithEmailLink, signInWithEmailLink } from "firebase/auth";

// Confirm the link is a sign-in with email link.
const auth = getAuth();
if (isSignInWithEmailLink(auth, window.location.href)) {
  // Additional state parameters can also be passed via URL.
  // This can be used to continue the user's intended action before triggering
  // the sign-in operation.
  // Get the email if available. This should be available if the user completes
  // the flow on the same device where they started it.
  let email = window.localStorage.getItem('emailForSignIn');
  if (!email) {
    // User opened the link on a different device. To prevent session fixation
    // attacks, ask the user to provide the associated email again. For example:
    email = window.prompt('Please provide your email for confirmation');
  }
  // The client SDK will parse the code from the link for you.
  signInWithEmailLink(auth, email, window.location.href)
    .then((result) => {
      // Clear email from storage.
      window.localStorage.removeItem('emailForSignIn');
      // You can access the new user via result.user
      // Additional user info profile not available via:
      // result.additionalUserInfo.profile == null
      // You can check if the user is new or existing:
      // result.additionalUserInfo.isNewUser
    })
    .catch((error) => {
      // Some error occurred, you can inspect the code: error.code
      // Common errors could be invalid email and invalid or expired OTPs.
    });
}email_link_complete.js

API con espacio de nombres web

// Confirm the link is a sign-in with email link.
if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
  // Additional state parameters can also be passed via URL.
  // This can be used to continue the user's intended action before triggering
  // the sign-in operation.
  // Get the email if available. This should be available if the user completes
  // the flow on the same device where they started it.
  var email = window.localStorage.getItem('emailForSignIn');
  if (!email) {
    // User opened the link on a different device. To prevent session fixation
    // attacks, ask the user to provide the associated email again. For example:
    email = window.prompt('Please provide your email for confirmation');
  }
  // The client SDK will parse the code from the link for you.
  firebase.auth().signInWithEmailLink(email, window.location.href)
    .then((result) => {
      // Clear email from storage.
      window.localStorage.removeItem('emailForSignIn');
      // You can access the new user via result.user
      // Additional user info profile not available via:
      // result.additionalUserInfo.profile == null
      // You can check if the user is new or existing:
      // result.additionalUserInfo.isNewUser
    })
    .catch((error) => {
      // Some error occurred, you can inspect the code: error.code
      // Common errors could be invalid email and invalid or expired OTPs.
    });
}email-link-auth.js

Completa el acceso en una app para dispositivos móviles

Firebase Authentication utiliza Firebase Dynamic Links para enviar el vínculo de correo electrónico a un dispositivo móvil. A fin de completar el acceso a través de la aplicación para dispositivos móviles, la app debe configurarse con el objetivo de detectar el vínculo entrante, analizar el vínculo directo subyacente y luego completar el acceso como se hace a través del flujo web.

Si quieres obtener más información para acceder con un vínculo de correo electrónico en una aplicación para Android, consulta la Guía para Android.

Si quieres saber cómo obtener más información para acceder mediante un vínculo de correo electrónico en una aplicación de Apple, consulta la Guía de plataformas de Apple.

Realiza vinculaciones o reautenticaciones con un vínculo de correo electrónico

También puedes vincular este método de autenticación a un usuario existente. Por ejemplo, un usuario ya autenticado con otro proveedor, como un número de teléfono, puede agregar este método de acceso a la cuenta existente.

La segunda mitad de la operación sería diferente:

API modular web

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

// Construct the email link credential from the current URL.
const credential = EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Link the credential to the current user.
const auth = getAuth();
linkWithCredential(auth.currentUser, credential)
  .then((usercred) => {
    // The provider is now successfully linked.
    // The phone user can now sign in with their phone number or email.
  })
  .catch((error) => {
    // Some error occurred.
  });auth_email_link_link.js

API con espacio de nombres web

// Construct the email link credential from the current URL.
var credential = firebase.auth.EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Link the credential to the current user.
firebase.auth().currentUser.linkWithCredential(credential)
  .then((usercred) => {
    // The provider is now successfully linked.
    // The phone user can now sign in with their phone number or email.
  })
  .catch((error) => {
    // Some error occurred.
  });email-link-auth.js

Esto también se puede usar para volver a autenticar a un usuario de un vínculo de correo electrónico antes de ejecutar una operación sensible.

API modular web

import { getAuth, reauthenticateWithCredential, EmailAuthProvider } from "firebase/auth";

// Construct the email link credential from the current URL.
const credential = EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Re-authenticate the user with this credential.
const auth = getAuth();
reauthenticateWithCredential(auth.currentUser, credential)
  .then((usercred) => {
    // The user is now successfully re-authenticated and can execute sensitive
    // operations.
  })
  .catch((error) => {
    // Some error occurred.
  });auth_email_link_reauth.js

API con espacio de nombres web

// Construct the email link credential from the current URL.
var credential = firebase.auth.EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Re-authenticate the user with this credential.
firebase.auth().currentUser.reauthenticateWithCredential(credential)
  .then((usercred) => {
    // The user is now successfully re-authenticated and can execute sensitive
    // operations.
  })
  .catch((error) => {
    // Some error occurred.
  });email-link-auth.js

Sin embargo, como el flujo podría terminar en un dispositivo diferente, desde el cual el usuario original no accedió, este podría no completarse. En ese caso, se puede mostrar un error al usuario para forzarlo a abrir el vínculo en el mismo dispositivo. Se puede pasar algún estado en el vínculo para proporcionar información sobre el tipo de operación y el uid del usuario.

Diferencia una combinación de correo electrónico y contraseña de un vínculo de correo electrónico

En caso de que admitas tanto contraseñas como accesos basados en vínculos de correo electrónico, usa fetchSignInMethodsForEmail a fin de diferenciar el método de acceso para un usuario con contraseña/vínculo. Esto es útil para flujos con identificador inicial, en los que primero se solicita al usuario que proporcione su correo electrónico y, luego, se le presenta el método de acceso:

API modular web

import { getAuth, fetchSignInMethodsForEmail, EmailAuthProvider} from "firebase/auth";

// After asking the user for their email.
const email = window.prompt('Please provide your email');

const auth = getAuth();
fetchSignInMethodsForEmail(auth, email)
  .then((signInMethods) => {
    // This returns the same array as fetchProvidersForEmail but for email
    // provider identified by 'password' string, signInMethods would contain 2
    // different strings:
    // 'emailLink' if the user previously signed in with an email/link
    // 'password' if the user has a password.
    // A user could have both.
    if (signInMethods.indexOf(EmailAuthProvider.EMAIL_PASSWORD_SIGN_IN_METHOD) != -1) {
      // User can sign in with email/password.
    }
    if (signInMethods.indexOf(EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD) != -1) {
      // User can sign in with email/link.
    }
  })
  .catch((error) => {
    // Some error occurred, you can inspect the code: error.code
  });email_link_diferentiate.js

API con espacio de nombres web

// After asking the user for their email.
var email = window.prompt('Please provide your email');
firebase.auth().fetchSignInMethodsForEmail(email)
  .then((signInMethods) => {
    // This returns the same array as fetchProvidersForEmail but for email
    // provider identified by 'password' string, signInMethods would contain 2
    // different strings:
    // 'emailLink' if the user previously signed in with an email/link
    // 'password' if the user has a password.
    // A user could have both.
    if (signInMethods.indexOf(
            firebase.auth.EmailAuthProvider.EMAIL_PASSWORD_SIGN_IN_METHOD) != -1) {
      // User can sign in with email/password.
    }
    if (signInMethods.indexOf(
            firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD) != -1) {
      // User can sign in with email/link.
    }
  })
  .catch((error) => {
    // Some error occurred, you can inspect the code: error.code
  });email-link-auth.js

Como se describió anteriormente, correo electrónico/contraseña y correo electrónico/vínculo se consideran el mismo firebase.auth.EmailAuthProvider (mismo PROVIDER_ID), pero con métodos de acceso diferentes.

Próximos pasos

Cuando un usuario accede por primera vez, se crea una cuenta de usuario nueva y se la vincula con las credenciales (el nombre de usuario y la contraseña, el número de teléfono o la información del proveedor de autenticación) que el usuario utilizó para acceder. Esta cuenta nueva se almacena como parte de tu proyecto de Firebase y se puede usar para identificar a un usuario en todas las apps del proyecto, sin importar cómo acceda.

En tus apps, para conocer el estado de autenticación del usuario, te recomendamos configurar un observador en el objeto Auth. Luego podrás obtener la información de perfil básica del usuario a partir del objeto User. Consulta Administra usuarios en Firebase.
En tus reglas de seguridad de Firebase Realtime Database y Cloud Storage, a partir de la variable auth, puedes obtener el ID del usuario único que accedió y usarlo para controlar a qué datos podrá acceder.

Para permitir que los usuarios accedan a la app con varios proveedores de autenticación, puedes vincular las credenciales de estos proveedores con una cuenta de usuario existente.

Para hacer que un usuario salga de la sesión, llama a signOut de la siguiente manera:

API modular web

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

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});auth_sign_out.js

API con espacio de nombres web

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});index.js