Error Message: The Reference.update operation in Angular Firebase failed due to the presence of undefined value in the 'users.UID.email' property

Having recently started to use the Firebase database, I encountered an issue while trying to update the UID to the Realtime Database during signup. The error message displayed was:

Error: Reference.update failed: First argument contains undefined in property 'users.UID.email'

This occurred in auth.service.ts file, as shown below:

import ...
...
export class AuthService { 
...

 async emailSignUp(email: string, password: string) {
    try {
      const user = await this.afAuth.auth.createUserWithEmailAndPassword(email, password);
      console.log('user ', user);
      this.authState = user;
      console.log('authState ', this.authState);
      this.updateUserData();
      this.router.navigate(['/']);
    } catch (error) {
      return console.log(error);
    }
  }

 get currentUserId(): string {
    console.log('currentId ', this.authenticated, ' ', this.authState.user.uid);
    return this.authenticated ? this.authState.user.uid : '';
  }

 private updateUserData(): void {
    const path = `users/${this.currentUserId}`; // Endpoint on firebase
    const userRef: AngularFireObject<any> = this.db.object(path);
    const data = {
      email: this.authState.email,
      name: this.authState.displayName
    };
    userRef.update(data)
      .catch(error => console.log(error));
  }

}

Console https://i.sstatic.net/812ZW.png

If anyone could provide assistance, it would be greatly appreciated. Feel free to request additional code snippets if necessary. Thank you in advance.

Answer №1

The issue arises because this.authState.email is undefined, which is not a valid value to be passed to the Realtime Database. It's important to ensure that the value is defined before using it in this way.

Upon reviewing your code, I noticed that you are assigning this.authState from user in the constructor. However, when logging user in the console, it does not contain a property named email, hence the error you encountered. Instead, it seems like there is a property called user within user. Therefore, you might want to consider using this.authState.user.email instead.

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

Angular 4: Implementing a Re-login Dialog/Modal Using Interceptors

Issue Description I recently started working with Angular 4 and I am facing a challenge in handling user re-logging when the token expires. Let's Dive Into the Code I have implemented a response intercepter that checks for a 401 error in the respon ...

Using numerous maps within Ionic applications with the JavaScript SDK

Currently, I am utilizing the Google Maps (Javascript SDK) in Ionic V3 and have successfully created two pages with map views. Interestingly, while the first page displays the map correctly, upon opening the second page, the map shows up with grey lines, ...

Issue during deployment: The type 'MiniCssExtractPlugin' cannot be assigned to the parameter type 'Plugin'

I'm working on deploying a Typescript / React project and have completed the necessary steps so far: Created a deployment branch Installed gh-pages for running the deployed application Added a deploy command as a script in the package.j ...

Implementing interactive dropdown menus to trigger specific actions

I have modified some code I found in a tutorial on creating hoverable dropdowns from W3. Instead of the default behavior where clicking on a link takes you to another page, I want to pass a value to a function when a user clicks. Below is a snippet of the ...

Tips for incorporating a randomly generated number in WGSL!

Looking to implement a fragment shader within a WebGPU application to generate a black and white image noise effect. For more information on white noise, you can refer to White noise (wikipedia). The goal is for each pixel to have a random color value. I& ...

Struggling to access the html elements within a component once the ng2 page has finished loading?

I am working on a web app that utilizes ng2-smart-table and I want to hide all cells within the table. However, when attempting to retrieve all the cells using document.getElementsByTagName("td") in the ngAfterViewInit() lifecycle hook, I noticed that the ...

Best Practices for Architecture and Routing in Angular 8 (suggestions)

As a newcomer to Angular, I find myself grappling with the recommended architecture for my project. In an effort to streamline my inquiry, I will structure it in the form of choosing between options A or B and exploring how to implement that choice. Specif ...

What is the best way to retrieve a {collection object} from a JavaScript map?

My application utilizes a third-party library that returns the map in the following format: public sids: Map<SocketId, Set<Room>> = new Map(); When I try to access it using the code below: io.of("/").adapter.sids.forEach(function(va ...

What steps can be taken to enable CORS on an existing server that was created with createServer function?

The following code snippet is what I currently have: var gqlServer =require('./server.js') var server=gqlServer() var port = process.env.PORT||5000 server.listen({port:port}, ()=> console.log(` ...

Utilize a method categorization while implicitly deducing parameters

Scenario In my project, I have a unique class setup where methods are passed in as a list and can be called through the class with added functionality. These methods are bound to the class (Foo) when called, creating a specific type FooMethod. class Foo { ...

Exploring angular2 nested routes and their construction using routerLink

I have been working on implementing a nested nested route structure where I have tabs within tabs using dynamic loading with the Angular 2 material tab component. The first nested tab works as expected, however, I am facing issues with the second nested t ...

"Even after running the 'ng build --prod' command, the updated changes in Angular

When using ng build, all new changes are working fine. However, when I try using ng build --prod in Angular 8, only previous changes get reflected in the dist folder. Can anyone provide assistance with this issue? ...

How to load multiple components simultaneously within a single router-outlet using Angular 2

I have designed a template for the root component of my angular2 app: <main class="main"> <div class="main__container"> <div class="main__left-area"> <router-outlet name="left-zone"></router-outlet> </div&g ...

What is the method for accessing the string value of a component's input attribute binding in Angular 2?

In my Angular2 application, I have a straightforward form input component with an @Input binding pointing to the attribute [dataProperty]. The [dataProperty] attribute holds a string value of this format: [dataProperty]="modelObject.childObj.prop". The mod ...

Exploring unit tests: Customizing an NGRX selector generated by entityAdapter.getSelectors()

Let's imagine a scenario where our application includes a books page. We are utilizing the following technologies: Angular, NGRX, jest. To provide some context, here are a few lines of code: The interfaces for the state of the books page: export int ...

What is the best way to conduct tests on this React component using Jest?

I'm currently working on increasing the test coverage for a wrapper component in my codebase using jest. Although I haven't been able to identify any specific usage of this component, it's important to ensure that it is covered by tests. M ...

Using async await with Angular's http get

In my service component, I have the following code snippet that retrieves data from an API: async getIngredientsByProductSubCategory(productSubCategoryId: number) { const url = '/my-url'; let dataToReturn: any; await this.http.get(ur ...

The compiler error TS2304 is indicating that it cannot locate the declaration for the term 'OnInit'

I successfully completed the Angular superhero tutorial and everything was functioning properly. However, when I close the CMD window running NPM and then reopen a new CMD window to reissue the NPM START command, I encounter two errors: src/app/DashBoard ...

The Google Maps feature encountered an error (ReferenceError: google is not defined)

Utilizing the Google Maps API on my website to display multiple locations has been successful so far. However, an issue arises when attempting to determine the distance between two sets of latitude and longitude coordinates - resulting in an error message ...

Trouble accessing data property within a method in Vue 3 with Typescript

I am facing an issue with accessing my data in a method I have written. I am getting a Typescript error TS2339 which states that the property does not exist in the type. TS2339: Property 'players' does not exist on type '{ onAddPlayers(): vo ...