如何处理 Firebase web 中的 auth/argument-error？

Question

I am working on a web project using Firebase, and I need to handle all authentication errors on the signin page.

Why I can't get the error.code equals 'auth/argument-error' like I do with others 'auth/something-error' error codes?

eg When I have a login form and press button without fill email and password, the following error in console is thrown:

How can I get this error object and save in a variable?

@Frank van Puffelen, please, answer it.

signin.js

vm.signIn = function() {
        vm.loading = true;
        return $q(function(resolve, reject) {
            firebaseAuth.$signInWithEmailAndPassword(vm.email, vm.password)
                .then(function(firebaseUser) {
                    console.log('[Firebase] User signed as', firebaseUser);
                    vm.loading = false;
                    resolve();
                    $state.go('main');
                }).catch(function(error) {
                    console.error('[Code]', error.code);
                    console.error('[Message]', error.message);
                    switch (error.code) {
                        case 'auth/argument-error':
                            vm.translationId = 'IT DOENST WORK LIKE ERRORS BELOW';
                            console.log('IT DOENST WORK LIKE ERRORS BELOW');
                            break;
                        case 'auth/wrong-password':
                            vm.translationId = 'FIREBASE.AUTH.WRONG_PASSWORD.ERROR_MSG';
                            break;
                        case 'auth/user-not-found':
                            vm.translationId = 'FIREBASE.AUTH.USER_NOT_FOUND.ERROR_MSG';
                            break;
                        case 'auth/user-disabled':
                            vm.translationId = 'FIREBASE.AUTH.USER_DISABLED.ERROR_MSG';
                            break;
                        case 'auth/invalid-email':
                            vm.translationId = 'FIREBASE.AUTH.INVALID_EMAIL.ERROR_MSG';
                            break;
                        default:
                            vm.loading = false;
                            vm.translationId = error.message;
                    }
                    $translate(vm.translationId)
                        .then(function(translated) {
                            vm.loading = false;
                            toastr.error(translated);
                        }, function(translationId) {
                            // NOTE: Validar quando o catch dispara!
                            vm.translationId = translationId;
                        });
                    vm.loading = false;
                    reject();
                });
        });
    };

Answer 1

This happens when email or password is not provided to firebase and cant be handled in catch block. as it is an argument error. below is code that checks if email and password is present and then only calls the firebase.auth()

$scope.login = function(data){
    $scope.err = null;
    $scope.busy = true;
    if(!data || !data.email || !data.password){
        $timeout(function(){
            $scope.err = {
                code:'InvalidParms',
                message: "Please provide correct email."
            };
            $scope.busy = false;
        },0);
        return;
    }

    firebase.auth().signInWithEmailAndPassword(data.email,data.password).then(function(res){
        if(res){                                    
            $rootScope.user = res;
            if(res.emailVerified){
                $location.path('/');
            }else{
                $timeout(function(){
                    $scope.err = {
                        code:'EmailNotVerified',
                        message: "You email is not yet verified. Please verify your email. Click on resend verification mail if you haven't got a verification mail from us."
                    };
                },0);
            }
            //
        }
        $scope.busy = false;
    }).catch(function(err){
        $timeout(function(){
            console.log(err);
            $scope.busy = false;
        },0);

    });


};

Answer 2

You need to have an div or button or any element that has the ID specified on the new RecaptchaVerifier constructor. Please have a look at the code below

window.recaptchaVerifier = new RecaptchaVerifier("sign-in-button", {
  'callback': (response) => {
    console.log("prepared phone auth process");
  }
}, auth);

Answer 3

I think this is a problem with the RecaptchaVerifier

Answer 4

In my case, I had to add the Dependecies in initializeAuth function, to use the Providers and Email & Password .

export const auth = () => initializeAuth(app(), {
  persistence: browserSessionPersistence,
  popupRedirectResolver: browserPopupRedirectResolver,
});

If you need more details, I found my solution here