Firebase Email Link Authentication

Question

I am using passwordless authentication for a project, everything is working as expected, however I have one question about this authentication. I will talk about the scenario.

First step: as we all know, a new user needs an email and then proceeds to click the link to login.

That is the normal case, no problem with it, but what if a user has already done that step and say he/she logs out from the app? it seems like they need to do the first step I described above again.

Here is what I have tried so far:

login() {
    const email = this.email;
    this.$store
      .dispatch("LOGIN", { email })
      .then(resp => {
        this.$router.replace("/");
      })
      .catch(err => {
        this.autherror = true, 
        this.errorMessage = err.message;
      });
  }

LOGIN: ({ commit }, user) => {

      return new Promise((resolve, reject) => {
        // commit(AUTH_REQUEST)
        firebase.auth().signInWithEmailLink(user.email, window.location.href)
        .then((result) => {

          window.localStorage.removeItem("emailForSignIn");
          resolve(result);
        })
        .catch((err) => {
          reject(err);
          // Some error occurred, you can inspect the code: error.code
          // Common errors could be invalid email and invalid or expired OTPs.
        });
      });
    },

I will get an error " Invalid email link! " trying the above code and even if I put the url as the previous one I logged in with, It will also throw an error "The action code is invalid. This can happen if the code is malformed, expired, or has already been used"

I can understand the point why an email to login is always required but the main point am trying to say is, if a user log's in from the link at first and then log's out, they can sign in the app without needing to do first step again, how? that means if there is a way to store credentials in cookies/localstorage, and the only time they need to do the first step again is if they clear the cookies, storage etc. from all or that particular app/page requiring.

So is it possible? It is something that will definitely improve user experience.

Answer 1

You should read and understand how users work in Firebase (and basically the same in any oAuth type verification system) - https://firebase.google.com/docs/auth/users

and more particularly, how email is used - https://firebase.google.com/docs/auth/web/email-link-auth

In your code you should use the email confirmation steps as shown in the reference above (so, something like the code below - you may need some minor changes to fit your local scenario):

LOGIN: ({ commit }, user) => {

  return new Promise((resolve, reject) => {
   // 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');
      }
    // commit(AUTH_REQUEST)
    firebase.auth().signInWithEmailLink(email, window.location.href)
    .then((result) => {

      window.localStorage.removeItem("emailForSignIn");
      resolve(result);
    })
    .catch((err) => {
      reject(err);
      // Some error occurred, you can inspect the code: error.code
      // Common errors could be invalid email and invalid or expired OTPs.
    });
  });
}
},

Answer 2

Just indicate in your db that the person has been verified in case you don't want the local storage to store the data