Having trouble accessing properties of an undefined object when trying to read 'credentials' in Firebase Auth within ReactJS

I need to verify the user's password again before allowing them to change it.

Currently, my Firebase Auth setup is defined in Firebase.js and exported correctly

//appConfig = ...(all the configurations here)
const app = firebase.initializeApp(appConfig);

const projectAuth = app.auth()

export { projectAuth }

In PasswordManager.js, I utilize the exported projectAuth like this:

import { projectAuth } from "../firebase";

        const authenticateCurrentPassword = async (currentPassword) => {

        try {
            const cred = projectAuth.EmailAuthProvider.credential(
                projectAuth.currentUser.email, currentPassword);
            projectAuth.reauthenticateWithCredentials(cred)
            await projectAuth.reauthenticateAndRetrieveDataWithCredential(cred);
            dispatchIfNotCancelled( {type: 'AUTHENTICATED'})
            return true
        }
        catch (err) {
            console.log(err)
            dispatchIfNotCancelled( {type: 'ERROR'})
        }
    }

While trying to initialize "cred," I encounter an error indicating credential doesn't exist:

"TypeError: Cannot read properties of undefined (reading 'credential')"

I understand that credential is a function within EmailAuthProvider. By the way, I'm using

"firebase": "^7.24.0"
, in case that helps with troubleshooting.

Answer №1

After some trial and error, I found a solution that worked well for me using Angular 13 in conjunction with angular/fire 7.2.

I made sure to import EmailAuthProvider directly from 'firebase/auth'.

In my code, I utilized the following line:

const credentials = EmailAuthProvider.credential(user.email, password.old);

Hopefully this information proves helpful to others facing similar challenges.

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

Trouble loading CSS file in Vue library from npm package

When using vue-cli to build a library (npm package) that functions for both SSR and client-side, everything seems to be functioning correctly except for one issue; the CSS only loads if the component is present on the page being refreshed. However, when ac ...

Execute the function when the element comes into view

Is there a way to create a function that will automatically attach itself to an element when it comes into view? I have multiple elements on my page - element1, element2, and element3. Instead of using a large if statement, I would like to write a functio ...

Interactive map navigation feature using React.js

Can someone help me figure out how to create a dynamic map with directions/routes? I am currently using the Directions Renderer plugin, but it only shows a static example. I want to generate a route based on user input. Below is the code snippet: /* ...

Packager freezing after running npm audit and the component directory is nonfunctional

Greetings, To begin with, I would like to acknowledge that this issue may have been addressed in previous posts, but despite following suggestions on Stack Overflow and GitHub, I am still facing two specific problems. Here are the issues I am encounterin ...

Looping through multi-dimensional JSON objects with jQuery

Hello there, I'm currently facing some challenges in getting the screen below to work properly: Project progress screen I have generated the following JSON data from PHP and MYSQL. My goal is to display the project alongside user images and names whe ...

Can Vuejs functions be triggered using a jQuery event trigger?

I am currently attempting to trigger a change event within a Vue component. Within the component template, there is a select element. When I try to use jQuery to trigger a change event on this element, the Vue component does not seem to detect it. Here i ...

Transform the code provided by bundleMDX into an HTML string specifically for RSS, all the while utilizing the mdx-bundler

I am currently working on developing an RSS reader and I need to convert the code returned by bundleMDX into a string. This is necessary so that I can utilize it with ReactDOMServer.renderToStaticMarkup(mdx) in my project. You can find a similar implement ...

Having trouble getting a constructor to function properly when passing a parameter in

Here's the code snippet I'm working with: import {Component, OnInit} from '@angular/core'; import {FirebaseListObservable, FirebaseObjectObservable, AngularFireDatabase} from 'angularfire2/database-deprecated'; import {Item} ...

How can the Material UI select component be customized to automatically scroll to the top when all items are selected?

After implementing the material ui select feature, I observed that when all items are selected, closed, and then reopened, the scroll position is automatically moved to the end. Is there a way to prevent this and keep it at the top? Current display: http ...

Change the color of a c3js chart when it loads

I have been searching for a way to customize the color of a scatter chart's plot, and I came across an example that uses d3 code within the chart http://jsfiddle.net/ot19Lyt8/9/ onmouseover: function (d) { d3.select(d3.selectAll("circle ...

Angular binding for selecting all data

Upon checking a checkbox for a single item, the bound data is retrieved and added to an array. However, this does not happen when using selectAll. Code snippet in Angular for obtaining the object of a checked item: $scope.selectedOrganisations = []; $sco ...

When using Math.floor(Math.random() * val.length), the result will be a letter rather than a number

Looking to implement a feature where a different background image is displayed randomly upon page visit or refresh. Currently, specifying the images in an array like the example below works well, but I want to be able to pull from a folder. $(document).r ...

Utilize the clearChart() function within Google charts in conjunction with vue-google-charts

I have integrated vue-google-charts to display various charts on my website. I want to allow users to compare different data sets, by enabling them to add or delete data from the chart. In order to achieve this functionality, I need to find a way to clear ...

Recurrence of solely the middle segment of the separator's background picture

I have a unique divider image with fading top and bottom parts. I'm wondering if it's possible to use a sprite and 3 divs to only repeat the middle section, considering that my height is variable. Do I need separate images for the top, middle, an ...

Is it possible to include all visible content, even when scrolling, within the full page height?

My webpage contains content that exceeds the height of the window. I am looking for a way to retrieve the full height of my page using either jQuery or pure Javascript. Can anyone provide a solution? I have considered the following approach: $('body ...

How to switch between classes for elements and return to the original one when none of the elements is chosen

Hello there, I need some assistance. Here's the scenario: I am working with a grid of six items. My goal is to have the first item in the grid become active by default. When the user hovers over any of the remaining five items, I want the active clas ...

Unraveling the Mystery of jQuery Syntax

Upon reviewing jquery.ui-1.8.11.js: $.extend(Datepicker.prototype, { /* A unique class name appended to elements indicating they are configured with a date picker. */ markerClassName: 'hasDatepicker', /* For debugging purposes (if e ...

Sharing state/data between two child components without directly updating the parent component in React JS

In this scenario, A serves as the parent component while B & C act as its children View image description here I'm seeking assistance on how to facilitate data transfer between B and C without needing to update A ...

"Jquery's .append function may sometimes display as undefined when

$("#clckjson").click(function() { $(document).ready(function() { $.getJSON("fuelj.json", function(data) { $(data).each(function(i, item) { console.log(item.stationID); var $table = $('<table>'); $table.a ...

Django Vue3 encounters access-control-allow-origin restriction

I am currently working on a Django rest-api project that uses Vue on the front-end. Unfortunately, I encountered an error while making requests via Vue: Console output: The following error is displayed: Access to XMLHttpRequest at 'https://api.iyziw ...