Getting typescript error when using fetchSignInMethodsForEmail method from firebase

Question

I am trying to implement firebase authentication in react typescript app. I'm also using the method fetchSignInMethodsForEmail but I can't resolve the error.

The code is:

if(error.code === 'auth/account-exists-with-different-credential') {
var pendingCred = error.credential;
var existingEmail = error.email;

fire.auth.fetchSignInMethodsForEmail(existingEmail).then(methods => {
    if(methods[0] === 'password') {
        var password = window.prompt('Enter Password for Existing Email: ' + existingEmail) as string;

        fire.auth.signInWithEmailAndPassword(existingEmail, password).then(fbUser => {
            return fbUser.user.linkWithCredential(pendingCred);
        }).then(fbUser => {
            this.props.loginUserSuccess(fbUser);
        });

        return;
    }
})

}

The error is on line 5 return statement when it executes the then method:

Argument of type '(providers: string[]) => Promise | undefined' is not assignable to parameter of type '(value: string[]) => UserCredential | PromiseLike'. Type 'Promise | undefined' is not assignable to type 'UserCredential | PromiseLike'. Type 'undefined' is not assignable to type 'UserCredential | PromiseLike'

Function containing the above code:

loginMicrosoft = () => {
    this.props.loginUser();
    
    var microsoftProvider = new firebase.auth.OAuthProvider("microsoft.com");
    
    microsoftProvider.setCustomParameters({
        prompt: 'select_account'
    });
    
    fire.auth
        .signInWithPopup(microsoftProvider)
        .then( msUser => {
            this.props.loginUserSuccess(msUser);
        })
        .catch(error => {
    
            if(error.code === 'auth/account-exists-with-different-credential') {
                var pendingCred = error.credential;
                var existingEmail = error.email;
    
                fire.auth.fetchSignInMethodsForEmail(existingEmail).then(methods => {
                    if(methods[0] === 'password') {
                        var password = window.prompt('Enter Password for Existing Email: ' + existingEmail) as string;
    
                        fire.auth.signInWithEmailAndPassword(existingEmail, password).then(fbUser => {
                            return fbUser.user.linkWithCredential(pendingCred);
                        }).then(fbUser => {
                            this.props.loginUserSuccess(fbUser);
                        });
    
                        return;
                    }
                })
            }
    });
}

Could you edit the question to be more specific what line of code this error is referring to? We should be able to observe what you are observing. — Doug Stevenson
Yes. I have edited the question. Its on the return statement when it is executing the .then method. — Burhan Mullamitha
I think you might have to show more code. Is this inside another function? We should be able to copy the code and see the error ourselves. See: stackoverflow.com/help/minimal-reproducible-example — Doug Stevenson

Burhan Mullamitha Burhan Mullamitha · Accepted Answer · 2020-10-13T10:13:03

I got the error solved. The function might return undefined which shouldn't be the case. I added some conditions which resolved the error.

Solution: I stored the user in the variable and its value as firebase.User which solved the issue.

Example:

const fbUser = user.user as firebase.User

Getting typescript error when using fetchSignInMethodsForEmail method from firebase

1 Answers