Remove the user along with all of their associated documents from Firestore

When a user wants to delete their account, I need to ensure that the 'documents' they created in Firebase are deleted as well.

After some research online, I came across the following code snippet:

deleteAccount() {

        const qry: firebase.firestore.QuerySnapshot = await this.afs.collection('houses', ref => ref.where('email', '==', this.auth.currentUser.email)).ref.get();
        const batch = this.afs.firestore.batch();

        qry.forEach( doc => {
          batch.delete(doc.ref);
        });
      batch.commit();         
}

However, I encountered an error with the 'await' keyword stating:

'await' expression is only allowed within an async function.

Can anyone suggest a solution to this issue or recommend a better approach? I'm new to this and would appreciate any guidance you can provide.

Answer №1

To resolve this issue, the best approach is to implement an async function.

If you're just starting out in programming, grasping concepts like promises and async/await can be challenging initially. I suggest checking out this informative video for a beginner's guide.


There are two methods you can use to address this:

  1. Simply make the function asynchronous by adding the keyword: async deleteAccount() {
  2. Alternatively, try creating a promise chain for practice.

deleteAccount() {
  firebase.firestore.QuerySnapshot = await this.afs.collection('houses', ref => ref.where('email', '==', this.afAuth.auth.currentUser.email)).ref.get()
  .then(qry => {
    const batch = this.afs.firestore.batch();
    qry.forEach(doc => batch.delete(doc.ref));
    return batch.commit();
  })
  .then(() => console.log('done'))
  .catch(err => console.log(`failed with ${err.message}`)

By the way, if you opt for using async/await, ensure you have a good understanding of try/catch blocks. Happy coding!

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

Problematic Angular 6 Lazy Loading Situation

Below is the code snippet I am using for lazy loading: const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'manager', lo ...

Is there a way to implement hover behavior for a Material-UI Button within a ButtonGroup component?

When using MUI v5, I am encountering an issue where the first button in the code provided is only half working. The button is initially colored red (both the border and text), however, upon hovering over it, the color of the border changes to blue. This is ...

Implement Angular backend API on Azure Cloud Platform

I successfully created a backend API that connects to SQL and is hosted on my Azure account. However, I am unsure of the steps needed to deploy this API on Azure and make it accessible so that I can connect my Angular app to its URL instead of using loca ...

Verifying the Loading of a Module in Angular 5

I am working on Angular 5 and I am trying to figure out how to determine if a module has been loaded already so that I can avoid displaying the spinner unnecessarily. Currently, this is my code: constructor(private loaderService: LoaderService, private ro ...

Disabling a text area or mat-form-field within the same HTML file in Angular 9

Currently, I am working with Angular 9 and angular Material Reactive Forms. My goal is to disable certain fields without relying on the disabled status within formControl in the TypeScript file. Instead, I want to achieve this solely through HTML. Here is ...

The problem arises when the type of a Typescript literal union becomes more specific within React children

Currently, I am in the process of converting our React/Redux project to TypeScript and encountering a challenge with TypeScript literal type union types. The issue that I'm facing is as follows: I have instantiated a Wrapper component with a type pr ...

Exploring the process of authentication and authorization at individual route levels within Angular 4 using Keycloak

We have successfully integrated Keycloak with our application and the login and logout flow is functioning properly. However, we are facing an issue with authentication and authorization at the route level. When a user clears their browser session or the s ...

Incorporating a Symbol into a Function

Reviewing the following code snippet: namespace Add { type AddType = { (x: number, y: number): number; }; const add: AddType = (x: number, y: number) => { return x + y; }; } Can a 'unique symbol' be added to the AddType lik ...

What is the quickest method for setting up types for node packages?

Whenever I need to use typed packages in my Node.js projects, there are two steps I have to take: Firstly, install the original package. For example: npm install express -S Secondly, install its type definition package. npm install @types/express -D I f ...

Why is my data not showing correctly? - Utilizing Ionic 3 and Firebase

I'm experiencing a challenge with displaying Firebase data in my Ionic 3 application. Below is the relevant snippet of code from my component where 'abcdef' represents a placeholder for a specific user key: var ref = firebase.database().ref ...

Linking children to their parents in a mat tree structure

I'm looking to create a mat tree based on the provided diagram. https://i.sstatic.net/cTY2w.png So far, I've managed to design the icons and boxes, but I'm struggling with drawing the connecting lines. Can anyone assist me with this part? I ...

Bringing in a script and invoking a function on a specific variable

As a newcomer to Typescript, I've been experimenting with some code I came across online to enhance the appearance of links on my website. <script src="https://wow.zamimg.com/widgets/power.js"></script> <script>var wowhead_tooltips ...

Organize the attributes of components on the following line in Visual Studio Code

Is there a method to configure the VS code formatter for Angular 2+ templates to ensure that attributes are wrapped in a new line? I prefer this formatting: <app [input1]="input1$ | async" [input2]="input2$ | async" (inputChanged)="set ...

Installing a package from GitHub with a specific tag using NPM

Is there a way to install npm into my angular2 project from a git repository using a specific tag like tag = 6.0.0? For example: git <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dabdb3ae9abdb3aeb2afb8f4b9b5b7">[email ...

Check to see if the upcoming birthday falls within the next week

I'm trying to decide whether or not to display a tag for an upcoming birthday using this boolean logic, but I'm a bit confused. const birthDayDate = new Date('1997-09-20'); const now = new Date(); const today = new Date(now.getFullYear( ...

Issue with Vue 3 / Typescript: Unable to locate variable name in template

When working with Vue 3 and Typescript, I encountered an error that says "Cannot find name" when trying to reference a data variable in a certain area. How can I resolve this issue? Attached is a screenshot for reference: https://i.sstatic.net/1fknF.jpg. ...

The addition operator is not compatible with the given types

Hello, I am currently working on integrating PayPal into an Angular 5 project. The code snippet below shows how I render PayPal buttons using a function: ngAfterViewChecked(): void { if (!this.addScript) { this.addPaypalScript().then(() => { ...

After successfully uploading to AngularFireStore, I encountered difficulty in retrieving the variable from within the getDownloadUrl() function

After successfully uploading images into my firebase storage, I encountered an issue when trying to retrieve the download URL and add it to my firestore database. When logging "URL", I get the desired link but faced difficulty using it. Initially, I attem ...

Discovering the best approach to utilizing Font Awesome 6 with React

Required Packages "@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/free-solid-svg-icons": "^6.1.1", "@fortawesome/react-fontawesome": "^0.1.18", "next": " ...

Angular and Bootstrap 5 combine to create a dynamic multi-item carousel featuring animated slide transitions and embedded YouTube videos

I'm trying to create a multi-item carousel using YouTube videos, and although I have managed to get it working with Bootstrap 5 carousel and cards, the animation when the carousel slides is not as smooth as I would like. The issue seems to be that the ...