Dealing with React and Firebase Authentication Errors: How to Handle Errors for Existing Accounts with Different Credentials

According to the documentation at https://firebase.google.com/docs/auth/web/google-signin#expandable-1, when error.code === 'auth/account-exists-with-different-credential', signInWithPopup() should return an error.email. However, in my specific case, I am encountering a different error:

FirebaseError: Firebase: Error (auth/account-exists-with-different-credential).
    at createErrorInternal (assert.ts:122:1)
    at _createError (assert.ts:83:1)
    at _makeTaggedError (index.ts:258:1)
    at _performFetchWithErrorHandling (index.ts:145:1)
    at async _performSignInRequest (index.ts:188:1)
    at async _signInWithCredential (credential.ts:37:1)
    at async PopupOperation.onAuthEvent (abstract_popup_redirect_operation.ts:102:1)

In my case, error.email is showing up as undefined.

Here's the code snippet:

const handleSignIn = (provider: AuthProvider) =>{
signInWithPopup(auth, provider).then((result) => {
  repeatAuth();
}).catch((error) => {
  console.log(error);
  if (error.code === 'auth/account-exists-with-different-credential') {
    let pendingCred = error.credential;
    let email = error.email;

    console.log(error.email); // undefined
    fetchSignInMethodsForEmail(auth, email).then( (methods) => {
      console.log(methods);
      if (methods[0] === 'password') {

        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.

        signInWithEmailAndPassword(auth, email, password!).then((result) => {
          return linkWithCredential(result.user, pendingCred);
        }).then(() => {
          repeatAuth();
        });
        return;
      }
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      signInWithPopup(auth, provider).then((result) => {
        repeatAuth();
      });
    }).catch((error) => {
      console.log(error);
    });
  }
});

Any assistance or guidance would be greatly appreciated. Thank you.

Answer №1

Having faced a comparable issue myself, I found a solution. Simply utilize the following code to retrieve the email:

error.customData.email

Answer №2

To successfully complete this task, follow the instructions below:

  1. Access the console on Firebase.

  2. Select your specific project.

  3. Next, navigate to the authentication section and choose the sign-in method option.

  4. Within the advanced settings, locate and click on One account per email address.

  5. Modify this setting to Allow creation of multiple accounts with the same email address.

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

What causes the select dropdown to display an empty default in Angular 8 following an HTTP request?

I have created a simple HTML code to populate array elements in a dropdown list, with the default value being fetched from an HTTP service during the ngOnInit lifecycle hook. However, I am encountering an issue where the default value is displayed as empty ...

What causes TypeScript to convert a string literal union type to a string when it is assigned in an object literal?

I am a big fan of string literal union types in TypeScript. Recently, I encountered a situation where I expected the union type to be preserved. Let me illustrate with a simple example: let foo = false; const bar = foo ? 'foo' : 'bar' ...

Angular data binding with an object instead of an array list

Currently, I am implementing Angular and attempting to iterate through an object. Data in JSON format employee {"fName":"mike","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ebb3b3b3b3b3b3b3b3ab83849f868a8287c588848 ...

Progressive series of observable conditions

The issue at hand: I am faced with the task of checking multiple conditions, some of which lead to the same outcome. Here is the current flow: First, I check if a form is saved locally If it is saved locally, I display text 1 to the user If not saved l ...

Deactivate the Mention and Hash tag in ngx-linkifyjs

I am currently utilizing ngx-linkifyjs to automatically convert URLs in text to clickable hyperlinks. However, I am facing an issue where it is also converting # and @ tags into links. Is there a way to prevent the conversion of # and @ while maintain ...

Internet Explorer is throwing unexpected routing errors in Angular 2

I have a spring-boot/angular 2 application that is working perfectly fine on Chrome, Safari, Opera, and Edge. However, when accessed through Internet Explorer, the app directly routes to the PageNotFound component. I have tried adding shims for IE in the i ...

Working with nested arrays in TypeScript and how to push values onto them

I am facing some challenges with nested array behavior in TypeScript. I am looking for a way to define a single type that can handle arrays of unknown depth. Let me illustrate my issue: type PossiblyNested = Array<number> | Array<Array<number& ...

Angular: Granting an external module access to a provider

One of the modules I imported provides a service with an optional dependency. Although it being optional didn't affect my application, as it just prevented any errors from occurring when not present. Here's an example: import { FooModule } from ...

Discover the power of debugging Typescript in Visual Studio Code with Gulp integration

I've been working on setting up an express/typescript/gulp application, and while it's functional, I'm struggling to debug it using source-maps. Here is how I've set it up: Gulp File var gulp = require('gulp'), nodemon ...

How to define a TypeScript recursive object with a defined endpoint?

Welcome to my first question! I am currently facing an issue with defining an object to store strings in multiple languages. I am looking for a flexible solution and have considered using a nested object structure. However, I want the final object to adhe ...

Analyze two sets of JSON data and compile a new JSON containing only the shared values

I am trying to generate two JSON arrays based on a shared property value from comparing two sets of JSON data. this.linkedParticipants =[ { "id": 3, "name": "Participant 2", "email": "<a href="/ ...

Every time I attempt to destructure the state object in react typescript, I encounter the error message stating 'Object is possibly undefined'

Whenever I attempt to destructure my state object in react typescript, I encounter an error stating Object is possibly 'undefined'. When I try using optional chaining, a different error pops up saying const newUser: NewUser | undefined Argument o ...

Tips for displaying a notification about data filtering and loading using the Async Pipe in Angular

Can someone assist me with this issue? I have a code snippet that retrieves characters from an API and allows me to search for specific characters using input. I am trying to display different messages on my HTML page based on the search results. If no it ...

Error in vue3 with typescript: unable to assign a ComputeRef<number[]> argument to an iterable<number> in d3.js

This code snippet was originally sourced from an example at https://medium.com/@lambrospd/5-simple-rules-to-data-visualization-with-vue-js-and-d3-js-f6b2bd6a1d40 I attempted to adapt the example to a TypeScript/Vue 3 version, and below is my implementatio ...

Is there a way to exclusively view references of a method override in a JS/TS derived class without any mentions of the base class method or other overrides in VS Code?

As I work in VS Code with TypeScript files, I am faced with a challenge regarding a base class and its derived classes. The base class contains a method called create(), which is overridden in one specific derived class. I need to identify all references ...

Exporting Types in an NPM Package: Best Practices

Struggling to create a private NPM package for internal use within my company's Nodejs applications using Typescript. Currently, I have a basic proof of concept with some constants, but I'm having trouble structuring it in a way that is importabl ...

Breaking apart a combination of unions into a collective group of tuples within TypeScript

Looking for a solution similar to TypeScript extract union type from tuple, this question delves into how to split ['a' | 'b', number] into ['a', number] | ['b', number] rather than focusing on why they are not direc ...

What method can be used to modify the src attribute of an <img> tag given that the id of the <img> element is known?

My challenge involves displaying an array of images using a *ngFor loop. itemimg.component.html <div *ngFor="let itemimg of itemimgs" [class.selected]="itemimg === selectedItemimg" (click)="onSelect(itemimg)"> <img id="{{itemim ...

Including a Javascript library (jsencrypt) in an Angular 2 application

I have gone through countless tutorials on this particular issue, but unfortunately, I have not yet found a solution. Let me provide some context first. I am working on an Angular 2 application and I need to incorporate this JS library for encryption: http ...

What steps can be taken to resolve the error message "Property does not have an initializer and is not definitively assigned in the constructor"?

I'm encountering an issue with these classes. I want to utilize the doSomething() method that is exclusive to class B without having to type cast it each time. However, when I specify property a to be of type B, it gives me an error saying it's n ...