Deleting a user in Vue.js using Firebase UID

I'm working on implementing a function in my Vue.js Firebase application that allows users to be deleted by UID. The app is designed to allow user registration through email and password authentication in Firebase. Once a user is logged in, they should have the ability to click a button to delete their email, password, and user data from Firebase. Currently, my delete function looks like this:

    async deleteProfile () {
      let ref = db.collection('users')
      let user = await ref.where('user_id', '==', firebase.auth().currentUser.uid).get()
      user.delete()
    }

However, I keep running into the issue of "user.delete() is not a function." How can I modify this function to successfully delete the user from authentication and the database? Thank you!

UPDATED FUNCTION

    async deleteProfile () {
      let ref = db.collection('users')
      let user = await ref.where('user_id', '==', firebase.auth().currentUser.uid).get()
      await user.ref.delete()
      await firebase.auth().currentUser.delete()
    }

Answer №1

Within your script, the variable user represents an object of the type DocumentSnapshot. To remove this document from the database, you can utilize the method user.ref.delete(). Keep in mind that this function returns a promise, so be sure to await its completion.

It's important to note that deleting a document does not automatically delete the corresponding user account in Firebase Authentication. If you wish to also remove the user account, you will need to utilize the Firebase Authentication API. You can accomplish this by calling

firebase.auth().currentUser.delete()
.

Answer №2

give this a shot

<button class="..." @click="deleteProfile(currentUser.uid)">Delete</button>

also,

methods: {
async deleteProfile(dataId) {
      fireDb.collection("yourCollection").doc(dataId).delete()
      .then(() => {
        alert('Deleted')
      })
    }
}

Answer №3

Inspired by Doug Stevenson's response, here is the function that finally did the trick.

    async removeUserAccount (user) {
      await db.collection("users").doc(user).delete()
      await firebase.auth().currentUser.delete()
    }

The line

await db.collection("users").doc(user).delete()
takes in the "user" as a parameter from the click event in the DOM to locate and delete the document of the specific user in the database (I can't believe I didn't think of this earlier!). The second line,
await firebase.auth().currentUser.delete()
, eliminates the currentUser from Firebase authorization.

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

Combining round brackets and square brackets when initializing an array

In the snippet below, values are assigned with a mix of parentheses and square brackets without any errors. However, most other combinations (such as parentheses inside square brackets) do not work at all. var myItems = []; myItems[5] = ("A1", "B1", ["C1" ...

Retrieve the variable declared within the event

How can I access a variable set in an event? Here is the code snippet: $scope.$on('event_detail', function (event, args) { $scope.id = args; console.log($scope.id); // This prints the correct value }); console.log($scope.id); // ...

Utilize Electron to Connect with the Backend

Currently, I am working on developing a small desktop application utilizing electron and P5 for the front-end. My goal is to make sure that this application operates seamlessly offline by storing data locally instead of relying on a database. The challen ...

Is there a way to refresh autocomplete/autofill after form submission with a custom JavaScript function?

I've developed a Vue application that includes a form. Once the user clicks on submit, an Ajax request is made using Axios through a JavaScript function. The data being sent is a custom JSON object that I have constructed by combining the information ...

Error encountered while parsing a file: JSON parsing failed due to an unexpected token 'g' at position

https.get('example.com/phpfilethatechoesandimtryingtograbtheecho.php', (res) => { console.log('statusCode:', res.statusCode); onsole.log('headers:', res.headers); res.on('data', (d) => { return ...

To display a pattern with a series of alternating addition and subtraction operators, starting from -1 and ending at n, use JavaScript to iterate through the numbers and implement the pattern -1+

I've been struggling to locate the values despite numerous attempts. What steps can I take to resolve this issue? Below is my code snippet: var numVal = prompt(""); for (var i = 1; i <= numVal; i++) { if (i % 2 !== 0) { console.log("-"); ...

Next.js appending [object%20Object] to the URL's endpoint

I encountered an error when launching my next app using "npm run dev". The error occurred during the pre-render attempt: GET http://localhost:3000/aave/fundamentals/economics/[object Object] [HTTP/1.1 404 Not Found 434ms] The issue is not specific to thi ...

What is the best way to verify the data in a cell of an ag-grid?

How can I validate a cell and change the background when the number is not equal to 9? Here is the table structure I am working with: { cellEditor: 'numberRenderer', width: 150, cellClass: this.compareValues, newValueHandler: this.compareVal ...

Issue with accessing VueJS Global Mixin readonly variable in component method

Trying to integrate vuejs as a frontend framework with WP restapi, I faced the challenge of needing the wordpress generated api url accessible to all vue components. Here is my approach: Vue.mixin({ data: function () { return { get apiUrl () { ...

The lineup includes ASP.NET, Java, Visual Basic, and AJAX

My ASP.NET application originally had a button that triggered VB.NET code execution on the server when clicked. Recently, there have been changes to the requirements and I've added a new menu that should replace the functionality of the old VB button ...

How do I create more space in Vitepress to prevent the text from feeling cramped and allow it to display in a larger area?

Below is the content of my index.md file: --- # https://vitepress.dev/reference/default-theme-home-page layout: home hero: name: "TP2" text: "Analyzing the code of TP2 by Breno Mazzali Medeiros Tomazelli and Philippe Bouchard" ta ...

Toggle the visibility of fields using dynamic identifiers (NodeJS, Mongoose, Express, JavaScript)

I am using a forEach loop to display menus for various restaurants when the restaurant icon is clicked. The number of restaurants/menus and their icons are unknown, each created with a dynamic ID such as menu-0, menu-1, menu-2, and so on. When one restaur ...

Getting all inline styles from an HTML string using JavaScript

(JavaScript) I am working with an html email template stored as a string. Is there a way to extract all the inline styles used in the template? For instance, if I have this input: <div style="min-width:300px;max-width:600px;overflow-wrap:break-word ...

What is the best way to save my data within a personalized Vue component rather than the main Vue instance?

While working on a custom checkbox component in Vue, I encountered an issue with storing the data solely within the component itself without relying on the root instance. My goal is to make this component reusable in various scenarios without the need to u ...

In ES6 React, if you want to add arguments to event handlers when functions are bound in the constructor, follow these

When working with constructors in es6, it is recommended to bind functions early like so: class App extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); // binding done in the constructor ...

Tips for styling text in a Discord.js embed when utilizing the variable `desc` with the value of `text`:

How can I add code markdown format like `Lorem Ipsum` into the description of my embed created in discord.js? The issue is with Grave Accents as it interferes with the existing "let desc =`raw text not in code format`". I'm still learning an ...

Creating duplicates of form and its fields in AngularJS with cloning

I'm facing an issue with a form that contains various fields and two buttons - one for cloning the entire form and another for cloning just the form fields. I attempted to use ng-repeat, but when I clone the form and then try to clone fields in the or ...

Using gulp to duplicate files from a specific directory nestled within a larger folder structure

I'm trying to figure out how to address this issue: My goal is to transfer all fonts from bower_components to .tmp/assets/fonts. However, the complication arises with some fonts being .svg files. If I were to use the following code in a typical manne ...

Sending a function in React.js from one functional component to another

I'm facing an issue with my code where I have a function called postaviRutu in the App component that I need to pass to the child component Sidebar. When clicking on an element in Sidebar, I want it to call the postaviRutu function in App. I've a ...

"Let's delve into the world of dynamic variables and Javascript once

As a newcomer to JS, I've scoured countless posts for solutions, but nothing seems to work for me. The issue arises when trying to abstract the code to handle all variables rather than just explicitly expressed values. I am open to alternative method ...