Setting a property of an object to a specific value

I need to extract information from a firebase auth credentials object that is formatted differently depending on the sign-in method being used.

For instance, for password sign up, the data I need is directly in credentials, but for Facebook or Google login, the data I need is in credentials.user.

So, I have this function set up:

parseCredentials(credentials: any): User {
    const parsedCredentials: User = {
      displayName: credentials.displayName || credentials.user.displayName,
      email: credentials.email || credentials.user.email,
      emailVerified: credentials.emailVerified || credentials.user.emailVerified,
      uid: credentials.uid || credentials.user.uid
    };
    return parsedCredentials;
  }

As you can see, I am using this function to create a new User object based on the provided credentials because unnecessary information should not be included in the User object.

The issue arises when signing up with an email-password combination and receiving the error: credentials.user is undefined.

I believe there may be an issue with the || operators. It appears that credentials.user is indeed undefined (due to the user property's absence on the credentials object during email-password sign up).

However, I employed the || operator precisely for this reason. I've been struggling with this problem for some time now and cannot seem to find a solution. Any assistance would be greatly appreciated. Thank you.

Answer №1

Great job with your approach!

Remember, when using the || operator, the right side is only evaluated if the left side is not undefined.

The error you're likely encountering is because credentials.displayName is undefined, causing the program to attempt to evaluate credentials.user.displayName.

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

Error encountered when attempting to update AWS CloudFront with exceeded rate allowance

As I attempt to delete a CloudFront distribution using the AWS SDK for JavaScript, I encountered an issue when trying to update it. Each time I send the request, I receive an internal server error stating "Rate exceeded". I have experimented with various v ...

Executing a function after another one has completed in Angular 6

I need to run 2 methods in the ngOnInit() lifecycle hook, with method2() being executed only after method1() has completed. These methods are not performing HTTP requests and both belong to the same component. ngOnInit() { this.method1(); this. ...

Tips for addressing the browser global object in TypeScript when it is located within a separate namespace with the identical name

Currently diving into TypeScript and trying to figure out how to reference the global Math namespace within another namespace named Math. Here's a snippet of what I'm working with: namespace THREE { namespace Math { export function p ...

When attempting to deploy an Angular 7 project for production, encountering the error message "Super expression must either be null or a

I am currently working on an older angular application that has been integrated with Okta authentication. The application is built using Angular 7.2 and Okta versions: "@okta/okta-angular": "^5.1.0", "@okta/okta-auth-js&quo ...

Return the callback from RxSwift before obtaining the result

When using the Firebase FirAuth API, I encountered a situation where the result is not clickable because Disposables.create() is returned before the API completes. This may be due to the lack of observer.onCompleted after calling the API. Is there a way ...

Using TypeScript to replace a current data type

Looking for a solution to implement a wrapper above the $http service in an AngularJS project. The goal is to have request promises with an abort() method. Attempting to achieve this by creating the following function: function request(params:ng.IRequest ...

Having trouble uploading an image using Angular, encountering an error in the process

Whenever I try to upload an image, the server keeps throwing an error saying Cannot read property 'buffer' of undefined. I am using Node.js as a backend server and interestingly, when I send the image through Postman, it gets stored in MongoDB wi ...

Error: The checkbox was clicked, but an undefined property (includes) cannot be read

Link to live project preview on CodeSandbox Visit the product page with checkbox I have developed a code snippet that allows users to filter products by checking a box labeled "Show Consignment Products Only", displaying only those products with the term ...

Typescript: Express RequestHandler variable potentially undefined even after validation within if statement

As I work on a solution for dynamically creating routes before the server fully initializes (not in response to a request, of course), I encountered an interesting issue. Here's a simplified example. In my actual code, there are more parameters like ...

Preventing dynamically generated components from reinitializing upon adding a new object

Within my application, there is a unique feature where components are dynamically generated through a *ngFor loop. Here is an example of how it is implemented: <div *ngFor="let actionCategory of actionCategories | keyvalue"> <h2>{ ...

Error in React Typescript Props in ListItem (Material UI Component)

I am encountering a problem with the ContainerComponent and ContainerProps. I believe that the issue lies in the fact that "li" is defined as a type string, but it needs to be explicitly declared as type React.ElementType<React.HTMLAttributes>. Howev ...

Utilize multiple activated modules in Angular 2

Recently, I've been exploring the new features of Angular 2 final release, particularly the updated router functionality. An interesting example showcasing the router in action can be found at this link: http://plnkr.co/edit/mXSjnUtN7CM6ZqtOicE2?p=pr ...

How can I retrieve the Axios error response object within a catch block?

After recently updating to axios version 0.23.0, I encountered an error when attempting to access the error response object in a catch clause. Here is where the issue arises: const loginUser = async (userData: UserPayload): Promise<void> => { ...

Incorporating an object into an array within another array using Angular 6 and Typescript

I am looking to insert an Object into an array that already contains another array by inputting the ID into a textfield. Can someone guide me on utilizing methods with arrays within arrays? Check out the demo here: Below are the classes for reference: ...

Decoding enum interface attribute from response object in Angular 4 using typescript

From an API response, I am receiving an enum value represented as a string. This enum value is part of a typescript interface. Issue: Upon receiving the response, the TypeScript interface stores the value as a string, making it unusable directly as an en ...

Implementing Angular2 routing within an HTTP interceptor

Using Angular 2.4.8, I communicate with the backend via REST and need to include X-Auth-Token in the header of each request. The token is stored in the session, and if it becomes outdated, the server returns a 401 status requiring the application to redire ...

Issue when transferring properties of a component to a component constructed Using LoadingButton MUI

Check out my new component created with the LoadingButton MUI: view image description here I'm having issues passing props to my component: view image description here Dealing with a TypeScript problem here: view image description here I can resolv ...

How to exclude specific {} from TypeScript union without affecting other types

Consider the following union type: type T = {} | ({ some: number } & { any: string }) If you want to narrow this type to the latter, simply excluding the empty object won't work: type WithEntries = Exclude<T, {}> This will result in neve ...

Leverage the TypeScript-generated controller within an Angular directive

I currently have an Angular controller that was generated using TypeScript: class FileManagerController { ... constructor($scope) { $scope.vm = this; ... } ...functions... } Can you guide me on how to integrate this controller i ...

Angular5 causing all divs to have click events at once instead of individually triggered

I am a beginner when it comes to working with Angular and I have encountered an issue. I created a click event on a FAQ page in Angular 5, but the problem is that when I click on one FAQ, they all open up instead of just the targeted one. Here is my TypeS ...