how to access THIS in cordova plugin with IONIC

Question

i am trying to implement the apple-sign-in method using a cordova plugin and set the credentials to firebase.

what i actually have is:

    constructor (
        public afAuth: AngularFireAuth,
        public afs: AngularFirestore,
        @Inject(FirebaseApp) firebase: any
    ){
        this.firebase = firebase;
    }

    loginApple(): Promise<boolean> {
        return new Promise((resolve, reject) => {
            cordova.plugins.SignInWithApple.signin({ 
                requestedScopes: [0, 1] 
            }, function(succ){
                var provider = new firebase.auth.OAuthProvider('apple.com').credential(succ.identityToken);
                this.afAuth.auth.signinWithCredential(provider).then(result => {
                    //--> it seems the problem is here, because variable THIS is not available in the cordova plugin without a ionic-native wrapper <--
                }).catch( error => {
                    reject( error.message || error );
                })
            }, function(err){
                reject("Apple login failed");
            })
        })
    }

Answer 1

The meaning of this changes when you define a callback with the function keyword. The simplest way to prevent that is to use fat arrow notation to define the function:

return new Promise((resolve, reject) => {
    cordova.plugins.SignInWithApple.signin({ 
        requestedScopes: [0, 1] 
    }, (succ) => { // change is here
        var provider = new firebase.auth.OAuthProvider('apple.com').credential(succ.identityToken);
        this.afAuth.auth.signinWithCredential(provider).then(result => {
        }).catch( error => {
            reject( error.message || error );
        })
    },(err) => { // changed here too, for consistence
        reject("Apple login failed");
    })
})

Also see this answer on the cause of the problem, and other solutions: How to access the correct `this` inside a callback?