0
votes

I'm working with ember.js and have a problem with the simple auth token package not returning a rejected promise, and I'm not sure why.

The issue that I'm trying to solve is to show an error message if the authentication is rejected, for this example we can even just show a hard-coded message if it fails for any reason. The behavior that I'm seeing is that a couple errors show up in the console, but no message is shown.

POST http://localhost:8000/v1/auth/login/ 400 (BAD REQUEST)

undefined: _emberMetalLogger["default"].error(error.stack);

// my authenticate action
authenticate: function() {
   let store = this.container.lookup('store:main');
   let credentials = this.getProperties('identification', 'password'),
      authenticator = 'simple-auth-authenticator:token';
      let authPromise = this.get('session').authenticate(authenticator, credentials);

      authPromise.then(() => {
        console.log('inside authPromise');
        let userPromise = store.find('user', {username: credentials.identification});

        userPromise.then(user => {
            console.log("inside userPromise");
            store.find('store', {user: user.get('firstObject').get('id')}).then(function(store) {
                this.get('appController').set('myStore', store.get('firstObject'));
            });
        }, err => {
            console.log('in error block');
            this.set('errorMessage', 'Unable to login with the provided credentials');
        });
    });
}

My authenticate action fires, but it never can get into the error block, nor can it reach inside the authPromise. As soon as it defines the authPromise the error happens and everything stops. I've tried even putting a try/catch around it, but I can't get anything returned with that etiher. I would expect the promise to reject and use the second function with the following response.

Diving a little further into the guts, I wanted to make sure the promise was being rejected properyly. In the package the authenticate function is fired and it does reject the promise according to the console.log() that I put in while debugging. The 2 variables it uses in the reject are defined as well, so I'm not sure when I'm not getting the rejected promise returned.

// authenticate action in the ember-simple-auth-token package
authenticate: function(credentials) {
    var _this = this;
    return new Ember.RSVP.Promise(function(resolve, reject) {
      var data = _this.getAuthenticateData(credentials);
      _this.makeRequest(data).then(function(response) {
        Ember.run(function() {
          resolve(_this.getResponseData(response));
        });
      }, function(xhr) {
        Ember.run(function() {
          console.log('rejecting');
          reject(xhr.responseJSON || xhr.responseText);
        });
      });
    });
  },
1

1 Answers

2
votes

According to RSVP.js example, if authPromise rejects then you should probably handle that in promise.catch() instead of promise.then():

authenticate() {
   let store = this.container.lookup('store:main');
   let credentials = this.getProperties('identification', 'password'),
      authenticator = 'simple-auth-authenticator:token';

    let authPromise = this.get('session').authenticate(authenticator, credentials);

    authPromise.then(() => {
      console.log('inside authPromise');
      let userPromise = store.find('user', {username: credentials.identification});

      userPromise.then(user => {
          console.log("inside userPromise");
          store.find('store', {user: user.get('firstObject').get('id')}).then(function(store) {
              this.get('appController').set('myStore', store.get('firstObject'));
          });
      }).catch(err => {
          console.log('in error block');
          this.set('errorMessage', 'Unable to login with the provided credentials');
      });
    }).catch(reason => {
      console.log('Inside authPromise.catch block');
      // put your logic here, maybe reason is defined
      console.log(reason);
    });
}