The creation of a Firebase user account with the specified email and password

I'm currently facing an issue while creating a new user with email and password using firebase authentication. The problem arises when I try to access the displayName from the returned async call before the updateProfile function, as it returns a null value. To work around this issue, I have resorted to passing the username directly in the function to set it as the displayName. Additionally, I am also attempting to create a new document within the users collection. To access all the necessary fields, I had to use .then after the updateProfile function, which I believe is not the most efficient method. Could someone please review my code and point out any potential errors?

async signUp(email: string, password: string, username: string, phoneNumber: string){
    await this.afAuth.createUserWithEmailAndPassword(email, password)
      .then((result) => {
        this.router.navigate(['/home'])
        return result.user?.updateProfile({
          displayName: username
        })
          .then( () => {
            this.afs.collection("users").doc(result.user?.uid).set({
              uid: result.user?.uid,
              displayName: result.user?.displayName,
              phoneNumber: phoneNumber,
              photoURL: result.user?.photoURL,
              providerId: result.user?.providerId,
            })
        })
      })
      .catch((error) => {
        window.alert(error.message);
      })
  }

Answer №1

Modifying the user profile is a task that occurs independently and does not automatically update the Firebase Authentication user profile on your application. The displayName attribute within the user profile will remain unchanged until you manually trigger a refresh by either forcing it to update, waiting for up to an hour, or having the user re-login.

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

Sort columns using drag and drop feature in jQuery and AngularJS

Utilizing the drag and drop feature of jquery dragtable.js is causing compatibility issues with AngularJs, hindering table sorting functionality. The goal is to enable column sorting by clicking on the th label and allow for column rearrangement. Currentl ...

Issue with Angular 7: In a ReactiveForm, mat-select does not allow setting a default option without using ngModel

I have a Angular 7 app where I am implementing some reactive forms. The initialization of my reactive form looks like this: private initFormConfig() { return this.formBuilder.group({ modeTransfert: [''], modeChiffrement: [' ...

Organizing my AngularJS project for optimal structure

I'm new to AngularJs and despite going through the tutorials, I still have a lot of questions. Right now, I'm unsure about how to separate my application into modules. My goal is to create an app that serves as a gateway to various other apps, e ...

Find the total of values in an array that may be null or undefined

In this scenario, I have an array that looks like this: myData = [[2, null, null, 12, 2], [0, 0, 10, 1, null], undefined]; The goal is to calculate the sum of each sub-array, resulting in an array like this: result = [16, 11, 0]. The ...

JavaScript guide: Deleting query string arrays from a URL

Currently facing an issue when trying to remove query string arrays from the URL. The URL in question looks like this - In Chrome, it appears as follows - Var url = "http://mywebsite.com/innovation?agenda%5B%5D=4995&agenda%5B%5D=4993#ideaResult"; ...

Implementing the ability to add and remove classes in JavaScript

I am trying to implement an add or remove class feature in JavaScript, but I'm facing some issues with it. Below is the code snippet I have: if (window.location.hash == "#/profile/"){ document.getElementById("tabMenu").removeClass("bottomTa ...

Protractor encountering difficulties using by.repeater() on ng-repeat element

I am currently facing an issue with my Angular HTML code while attempting to conduct end-to-end testing using protractor for clicking on a dropdown. Below is the snippet of the HTML code: <ul class="dropdown-menu"> <li ng-repeat="currency in ...

What is the best way to implement a date filter for ng-select ng-repeat?

I have a repeat list within a nested structure and am trying to figure out how to format the values as 06-27-15 (mm-dd-yy) dates. <select ng-model="data.dayId" ng-value="day.id" ng-options="day.id as day.date group by day.name for day in days" requir ...

How can you personalize the dropdown button in dx-toolbar using DevExtreme?

Currently, I am working with the DevExtreme(v20.1.4) toolbar component within Angular(v8.2.14). However, when implementing a dx-toolbar and specifying locateInMenu="always" for the toolbar items, a dropdown button featuring the dx-icon-overflow i ...

How can I incorporate a counter into my ng-repeat loop in Angular?

Do you know where I can find documentation on adding a numbered count to each item returned by an ng-repeat in Angular? This is not like assigning an Id, but more like, if 4 items are returned, each JSON object could include a number before the data. Her ...

Upon reacting with Typescript, the window will transition to the homePage, however, it will also reset

Trying to redirect this component to the HomePage</code causes the data to restart once it reaches the home page.</p> <p>Any recommendations for an alternative to <code>window.location.href = "/HomePage"? import React, { useE ...

Sequencing asynchronous functions in Angular: Ensuring one function runs before another

When working with a save function that requires you to call another function to retrieve the revision number and make an API call, both of which are asynchronous in nature, how can you ensure one function waits for the other to execute? $scope.getRevision ...

Chrome stack router outlet and the utilization of the Angular back button

I'm experiencing an issue with the back button on Chrome while using Angular 14. When I return to a previous page (URL), instead of deleting the current page components, it keeps adding more and more as I continue to press the back button (the deeper ...

TypeDI is failing to recognize Services from a nearby external package

I've encountered an issue with my mono repo project that contains two packages built using Lerna: Base and Libs. I'm attempting to utilize TypeDi dependency injection, but the classes marked with the Service() decorator from the Libs package are ...

Angular animations: triggered by user interaction

I'm encountering some difficulties with animating elements in my Angular application. The issue involves a grid made up of cells (created using ng-repeat). What I'm aiming to achieve is a simple animation: when a cell is clicked, it should disapp ...

Creating a secure route with Vue and Firebase using Google Identity Platform

After successfully integrating Firebase (also known as Google Identity Platform) into my Vue project, I decided to secure specific routes. To achieve this, I made the following amendments: // router/index.js { path: '/profile', ...

What could be causing the 403 Error when using Blogger API with AngularJS?

I'm relatively new to working with 3rd Party APIs and I'm currently exploring how to integrate Blogger's API into my AngularJS website to create a blog feed feature. After setting everything up, I've made a request and received a 200 s ...

Securely import TypeScript modules from file paths that are dynamically determined during execution

Imagine you have a structure of TypeScript code and assets stored at a specific URL, like between a CDN and a debug location. You want to import the main module and ensure the rest of the structure is imported correctly only when needed, without repeating ...

Utilize AngularJS to dynamically alter CSS styles within the header section

I have a selection of template themes, and when one is picked, I need the corresponding CSS file to be changed in the head section. The CSS file has the same name as the theme. I am looking for an Angular solution to achieve this. Here are the designList ...

Navigate to a different route in AntD Table by clicking on it

I am currently implementing React Router in my navigation component. My goal is to enable users to navigate from screen Y to screen X when they click on a table element. In the past, I achieved this by using "this" command but it seems that it does not ...