Search code examples
javascriptfirebasevue.jsfirebase-authenticationvue-resource

Get parameters and store and use them on variables to use on my method


I want to get some parameters and use them to reset password function from firebase.

This is how my link looks like: http://localhost:8080/passwordreset?mode=resetPassword&oobCode=y6FIOAtRUKYf88Rt5OlEwxUuTyEmb3M4gquZSIseX2UAAAFevpj-gw&apiKey=AIzaSyBaCCvq-ZEfQmdrL7fmElXDjZF_J-tku2I

I want to get mode, oobCode and apiKey. Here is what I have for now:

export default {


data: function() {
    return {
        passwordNew: '',
        passwordConfirm: '',
        mode:'',
        actionCode: '',
        continueUrl: '',
    }
},
methods: {
    handleResetPassword: function() {
        var accountEmail;

        firebase.auth().verifyPasswordResetCode(actionCode).then(function(email) {
            var accountEmail = email;
            firebase.auth().confirmPasswordReset(this.actionCode, this.passwordNew).then(function(resp) {

                alert("Password reset success");
                this.$router.push('hello')
            }).catch(function(error) {
                // Error occurred during confirmation. The code might have expired or the
                // password is too weak.
                console.log("error 1")
            });
        }).catch(function(error) {
            // Invalid or expired action code. Ask user to try to reset the password
            // again.
            console.log("error 2")
        });
    },
}

}

Solution

  • From Firebase documentation:

    Some user management actions, such as updating a user's email address and resetting a user's password, result in emails being sent to the user. These emails contain links that recipients can open to complete or cancel the user management action. By default, user management emails link to the default action handler, which is a web page hosted at a URL in your project's Firebase Hosting domain.

    link: https://firebase.google.com/docs/auth/custom-email-handler

    You need to get those parameters and store them on variables, from firebase documentation i got those snippets and just wrote the getParameterByName function:

    function getParameterByName( name ){
      name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
      var regexS = "[\\?&]"+name+"=([^&#]*)";
      var regex = new RegExp( regexS );
      var results = regex.exec( window.location.href );
      if( results == null )
        return "";
      else
        return decodeURIComponent(results[1].replace(/\+/g, " "));
    }
        // Get the action to complete.
        var mode = getParameterByName('mode');
        // Get the one-time code from the query parameter.
        var actionCode = getParameterByName('oobCode');
        // (Optional) Get the continue URL from the query parameter if available.
        var continueUrl = getParameterByName('continueUrl');
    

    You need to get those parameters first and verify the actioncode on the verifyPasswordResetCode method, then you can change the password and store it along with the action code to the method.

    In your export default :

    data: function() {
            return {
                passwordNew: '',
                passwordConfirm: '',
                mode: mode,
                actionCode: actionCode,
                continueUrl: continueUrl,
            }
        },
        methods: {
            handleResetPassword: function() {
                var passwordNew = this.passwordNew
                var actionCode = this.actionCode
                firebase.auth().verifyPasswordResetCode(actionCode).then(function(email) {
                    console.log("ActionCode: "+ actionCode);
    
                    firebase.auth().confirmPasswordReset(actionCode, passwordNew).then(function(resp) {
    
                        alert("Password reset success");
                        this.$router.push('hello')
                    }).catch(function(error) {
                        console.log("error 1"+ error)
                    });
                }).catch(function(error) {
                    console.log("Action code is invalid"+ error)
                });
    
            },
        }