VueJS together with Firebase: The guide to password validation

I am currently working on a web form developed using VueJS that enables authenticated users to modify their passwords. The backend system relies on Firebase, and I am facing a challenge in validating the user's current password before initiating the password-change API request.

The snippet of code I have implemented looks something like this:

rules: {
    ...
    isPreviousPassword: v => {
      var credentials = await firebase.auth().currentUser
        .reauthenticateWithCredential(
            firebase.auth.EmailAuthProvider.credential(
            firebase.auth().currentUser.email, 
            v)
        )

      return credentials || 'Your password is incorrect'
    }
}

When executing this code, Babel throws an error message as follows:

Syntax Error: await is a reserved word

Despite searching for solutions online, I haven't been able to resolve this issue. Even the proposed code snippets fail under Babel, prompting the same error message mentioned above.

Could someone provide insight into the best approach to address this problem?

Answer №1

Consider including the async keyword in your function:

 isPreviousPassword: async (v) => {
  var credentials = await firebase.auth().currentUser
    .reauthenticateWithCredential(
        firebase.auth.EmailAuthProvider.credential(
        firebase.auth().currentUser.email, 
        v)
    )

  return credentials || 'The provided password is incorrect'
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switching to '@mui/material' results in the components failing to render

I have a JavaScript file (react) that is structured like this: import { Grid, TextField, makeStyles } from '@material-ui/core' import React from 'react' import {useState} from 'react' //remove this function and refresh. see ...

A guide on how to associate data in ng-repeat with varying indices

Here is the data from my JSON file: var jsondata = [{"credit":"a","debit":[{"credit":"a","amount":1},{"credit":"a","amount":2}]}, {"credit":"b","debit":[{"credit":"b","amount":3},{"credit":"b","amount":4},{"credit":"b","amount":5}]}, {"credit":"c","debi ...

OpenLayers had trouble handling the mouse event in Ionic

I am attempting to handle a double mouse click event on OpenStreetMaps by utilizing the code below: const map = new OpenLayers.Map("basicMap"); const mapnik = new OpenLayers.Layer.OSM(); const fromProjection = new OpenLayers.Projection("EPSG:4326"); // ...

Refresh Next.js on Navigation

Is there a way to trigger a reload when clicking on a Link component from next/link? I attempted to create my own function within the child div of the link that would reload upon click. However, it seems to reload before the route changes and is not succ ...

Guide to triggering a function upon selecting a row in a SyncFusion grid

My goal is to use a SyncFusion Vue Grid component and trigger a function when a row is selected. I attempted to include a column of edit buttons, but I am struggling to find the correct syntax to make these buttons call a function. Alternatively, I tried ...

React seems to have trouble working with Firebase Firestore queries

Struggling with this particular issue for the past 6 hours, I just can't seem to figure it out. My objective is to query orders based on their status using Firestore. However, whenever I try adding a `.where` clause in the function, it simply doesn&ap ...

Count duplicated values in an array of objects using JavaScript ES6

I am working on creating a filter for my list of products to count all producers and display them as follows: Apple (3) I have managed to eliminate duplicates from the array: ["Apple", "Apple", "Apple"] using this helpful link: Get all non-unique values ...

What is the proper way to detach an event listener from a class?

I am facing a challenge when trying to remove an event listener. After running the script, I receive an error message stating that changeGirl.off("click") is not a function. Despite this issue, everything else within the code is working perfectly fine. Any ...

Tips for retrying an insertion into the database when a duplicate unique value is already present

After thorough searching, I couldn't find any existing patterns. My goal is to store a unique key value in my MySQL database. I generate it on the server side using this code: var pc = require('password-creator'); var key = pc.create(20); ...

What is the best way to conceal elements that do not have any subsequent elements with a specific class?

Here is the HTML code I have, and I am looking to use jQuery to hide all lsHeader elements that do not have any subsequent elements with the class 'contact'. <div id="B" class="lsHeader">B</div> <div id="contact_1" class="contac ...

Generate a fresh array from the existing array and extract various properties to form a child object or sub-array

I am dealing with an array of Responses that contain multiple IDs along with different question answers. Responses = [0:{Id : 1,Name : John, QuestionId :1,Answer :8}, 1:{Id : 1,Name : John, QuestionId :2,Answer :9}, 2:{Id : 1,Name : John, QuestionId :3,An ...

Netlify is failing to recognize redirect attempts for a Next.js application

After successfully converting a react site to utilize next.js for improved SEO, the only hiccup I encountered was with rendering index.js. To work around this, I relocated all the code from index to url.com/home and set up a redirect from url.com to url.co ...

Exploring the application of URL parameters in HTML code

How can I use URL parameters retrieved with Javascript in my HTML? <script> var url_string = window.location.href; //window.location.href var url = new URL(url_string); var c = url.searchParams.get("name"); console.log(c); </script> I am tryi ...

Discovering the perfect text-to-icon matching technique with Vue.js, Vuetify, and Jest's test-utils

Looking at the HTML code generated below: <a href="#" class="primaryInversed v-btn v-btn--large v-btn--round" <div class="v-btn__content">STOP! <i aria-hidden="true" class="v-icon v-icon--right material-icons">pause_circle_outline& ...

Exploring Angular data iteration with Tab and its contentLearn how to loop through Tab elements

Upon receiving a response from the API, this is what I get: const myObj = [ { 'tabName': 'Tab1', 'otherDetails': [ { 'formType': 'Continuous' }, { 'formType& ...

Tips for adjusting CSS font sizes within a contenteditable element?

I am looking to develop a compact HTML editor using JavaScript that allows me to customize the font-size of selected text with a specific CSS value. The documentation states that the FontSize command is used like this: document.execCommand("FontSize", fal ...

What steps should I take to address both the issue of duplicate names and the malfunctioning fixtures?

There are issues with duplicate item names and the cache not updating immediately after running the script. Instead of fetching new data, it retrieves previous values from the last item shop sections. If the remove_duplicates function is not used, it displ ...

Discover the process of dynamically importing JavaScript libraries, modules, and non-component elements within a Next.js

Lately, I have been utilizing Next.js and mastering its dynamic import feature for importing components with named exports. However, I recently encountered a particular npm package that functions only on the client-side (requires window) and has a substant ...

The error message "NoSuchSessionError: invalid session id" pops up in Selenium, despite the fact that the application is running smoothly

Scenario and Background: I have recently developed a script to access an external website and extract specific data. The script's purpose is to retrieve grades of students and convert them into usable data for plotting. In order to streamline the dat ...

Allowing domain access when using axios and express

I have a server.js file where I use Express and run it with node: const express = require("express"); const app = express(), DEFAULT_PORT = 5000 app.set("port", process.env.PORT || DEFAULT_PORT); app.get("/whatever", function (req, r ...