Home » vue » Email only authentication with Vue.js and Vuex on Firebase

Email only authentication with Vue.js and Vuex on Firebase

Posted by: admin November 26, 2021 Leave a comment

Questions:

I want user to be automatically authenticated (temporarily) on Firebase just by sending Email then be redirected to a welcome page asking to complete the auth process by following a link received by email.

The first part is ok, I can authenticate by just inserting email and generating a random password like the following (Vuex store action):

this.$store.dispatch('userSignUp', { email: this.email, password: this.generatePassword })

which is called by component method button v-on:click="userSignUp

Vuex action is like :

  userSignUp ({commit}, payload) {
    commit('setLoading', true)
    firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password)
    .then(firebaseUser => {
      commit('setUser', firebaseUser)
      commit('setLoading', false)
      commit('setError', null)
      router.push('/welcome')
    })
    .catch(error => {
      commit('setError', error.message)
      commit('setLoading', false)
    })
  }

So far so good, the user put the email, an helper function this.generatePassword generate a random password and the user is logged in and created on firebase.

Now this user is logged in, is on a welcome page, but it doesn’t know his own random password (because I don’t want to).

I want this to be one shot login and if the user want to come back, has to follow the link sent by email by Firebase.

There is a firebase function [sendPasswordResetEmail][1], which seems right for the case but I connot find the way to make it working.

I did Vuex action like before :

export const actions = {
  sendPasswordReset ({commit}, payload) {
    commit('setLoading', true)
    firebase.auth().sendPasswordResetEmail(payload.email)
    .then(firebaseUser => {
      commit('setUser', firebaseUser)
      commit('setLoading', false)
      commit('setError', null)
      router.push('/welcome')
    })
    .catch(error => {
      commit('setError', error.message)
      commit('setLoading', false)
      router.push('/error')
    })
  },
...

which is called by component method button v-on:click="userSignUp

methods: {
  userSignUp () {
    this.$store.dispatch('userSignUp', { email: this.email, password: this.generatePassword })
    this.$store.dispatch('sendPasswordReset', { email: this.email })
  }
},

I only get response code

{
 "error": {
  "errors": [
   {
    "domain": "global",
    "reason": "invalid",
    "message": "EMAIL_NOT_FOUND"
   }
  ],
  "code": 400,
  "message": "EMAIL_NOT_FOUND"
 }
}

while the Request Payload seems ok anyway :

{requestType: "PASSWORD_RESET", email: "[email protected]"}
email
:
"[email protected]"
requestType
:
"PASSWORD_RESET"

Any idea ?

Answers: