Removing a user using Vue.js in combination with Firebase

Having trouble removing an account from Firebase in vue.js. Followed the firebase docs but it's not working as expected. Here is the button to delete:

<template>
[...]
      <div class="text-center">
        <button type="button" class="btn text-white my-4" @click="$emit('deleteUser')">Delete account</button>
      </div>
[...]
</template>

Below is the method being used:

<script>
[...]
import firebase from "firebase"
import {router} from '../main'

export default {
    [...]
  },
  methods: {
    [...]
  deleteUser () {
    //const userRef = firebase.auth().currentUser;

    this.usersRef.remove().then(function() {
      // User deleted.
      console.log("User deleted")
      router.push('/')
    }).catch(err => {
          this.error = err.message
      // An error happened.
      console.log("User NOT deleted")
    });
  }
};
</script>

Wondering if anyone can offer some assistance? The account is still present and cannot be removed, with zero information appearing in the console.

Answer №1

If you need to remove a user from Firebase authentication, there are two ways to do so:

1/ Utilizing the JavaScript SDK (if your application is built with Vue.js)

You simply invoke the delete() method like this:

const user = firebase.auth().currentUser;
user.delete()
.then(() => {
   //....
})
.catch(err => {
  if (err.code === "auth/requires-recent-login") {
     //Re-authenticate the user and re-attempt the Vue.js method
  } else {
     //....
  }
})

It's important to note that this method "requires the user to have recently signed in. If this requirement isn't met, ask the user to authenticate again and then call

firebase.User.reauthenticateWithCredential
". An error with the auth/requires-recent-login code is "thrown if the user's last sign-in time does not meet the security threshold".

Therefore, only the currently logged-in user can use this method on the front-end to delete their own account.

2/ Using the Admin SDK

You can utilize the Admin SDK's deleteUser() method, for example, within a Cloud Function.

In this scenario, there is no requirement for the user to be logged in as it runs in the back-end, allowing for the deletion of any user. For instance, a Callable Cloud Function could be triggered by an admin user.

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

Exploring custom validation rules for string patterns in AngularJS

I have an input field that is using a pre-existing validator called "stringValidator". I want to customize or extend this pattern without creating a new one. Is there a way to do this inline? Can I input the validation regex directly into the tag declarati ...

Troubleshooting the issue of VueJs Element select list not functioning properly with the map

I'm currently facing an issue with implementing an el-select list using data obtained from a mapGetter. While the values are visible, I am unable to select them. Clicking on the options does not result in selection. <el-select v-model=" ...

Add C# iteration with JavaScript on ASP.NET directories

I need help extracting all filenames from a specific folder on the server, and then adding them to a JavaScript array. The functionality should mimic ASP.NET C#'s Directory.GetFiles method. I have already initialized an array and now just require as ...

"Is there a JavaScript code snippet that can retrieve information from a JSON file

Is there a way to create a custom JavaScript function that can extract specific data from a JSON object based on certain keywords? I am working with a Task Manager API and would like to automatically populate fields based on the task title. Here is an exam ...

Is it possible to invoke a Vue method during the rendering process?

Everything is performing as anticipated. This indicates that during the rendering process, the JSON data effectively converts to a CSV string as the attribute value. JSON: "functions": { "function": [ { "name": "foo" }, ...

The Google reCaptcha fails to load if Bootstrap is used to call the remote modal

On my initial page, I have defined the following: <span class="btn btn-default"> <a data-toggle="modal" id="fillTheFormHiddenInput" data-target="#login-modal" href="login-i">sign in</a> </span> And at the end of the first ...

Display additional content button, dynamic div identification

I've created a small script that includes a "show more" button at the end of displaying 10 entries. Here is the code: <div id="more<?=$lastid;?>"> <a onclick="showmore(<?=$lastid;?>);">More</a> </div> And here ...

"Encountering issue with for loop not functioning properly within OnSuccessListener while executing a

The loop inside the OnSuccessListener is not executing. Adding the setNextQuestion() function inside the onCreate function causes the app to crash. Everytime the setNextQuestion() function is invoked, the QuizActivity crashes and redirects back to the Ho ...

Is the RouterModule exclusively necessary for route declarations?

The Angular Material Documentation center's component-category-list imports the RouterModule, yet it does not define any routes or reexport the RouterModule. Is there a necessity for importing the RouterModule in this scenario? ...

Can Nuxt's asyncData handle multiple requests with conditional statements?

I've been grappling with this issue for some time now. I understand how Nuxt asyncData can be used to make either one request or multiple requests, but is there a way to incorporate conditional logic for making multiple requests based on a query param ...

Unseen cells and sift through information in datatables

I encountered an issue with the data table while trying to display data from a database using AJAX and applying filters through a PHP file. The initial setup works smoothly, however, I faced a problem after implementing a column hiding feature which caus ...

Tips for customizing the appearance of your browser's scroll bar:

Is there a way to customize the browser scroll bar using html, css, and js similar to how Chrome does with Control + F? https://i.sstatic.net/62Hju.png I have experimented with adding a fixed position div creating a linear gradient style for the scroll ...

NextJs does not allow external synchronous scripts

I am currently working with Next.js version 11.x Whenever I attempt to add an external script like the example below, I encounter an error when executing the yarn build. <Head> <link rel="stylesheet" type=" ...

I am facing an issue while attempting to connect to Mongo Atlas with the provided code. Unfortunately, I am unable to successfully create a

const { MongoClient } = require("mongodb"); const url = "mongodb+srv://user:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96e6f7e5e5e1f9e4f2d6f5fae3e5e2f3e4a6b8a4a3e6fce0f1eeb8fbf9f8f1f9f2f4b8f8f3e2">[email ...

Using JavaScript to eliminate brackets

When a map is clicked, I have a function that retrieves GPS coordinates. However, the result is currently displayed in brackets (). It is necessary to eliminate the brackets. function onClickCallback(event){ var str = event.latLng var Gpps = str / ...

Leveraging route configuration's scope in HTML

As a beginner in AngularJs, I am currently exploring the creation of a single page application. However, I am encountering difficulties in converting my initial code into more professional and efficient code. During this conversion process, I have separate ...

Fill in the text box based on the selected option from the dropdown menu

My HTML code snippet is as follows: <select name="plot_no" id="plot_no" class="dropdown validate_B"> <option value="">Select number of Plots to book</option> <option value="1">1</option> <opti ...

Change the input value by clicking different buttons

Looking for a way to change the value or source of an input when clicking on different buttons? For example, clicking on Button 1 changes the input to "apple" and Button 2 changes it to "orange", etc. Here is a snippet of what I have tried so far: $(doc ...

Differences Between JavaScript Binding and Anonymous Functions

I came across this code in the mongoose-deep-populate library async.parallel([ User.create.bind(User, {_id: 1, manager: 2, mainPage: 1}), Comment.create.bind(Comment, {_id: 3, user: 1}), ... ], cb) which utilizes Function.prototype.bind to make ...

Prevent the print dialog window from appearing when a page loads in Selenium for Firefox and Chrome

Is there a way to prevent the print window from automatically popping up when a page loads using Selenium? So far, I have tried using the Robot class to press the escape key, but it only works 80% of the time. I have also experimented with Firefox prefere ...