Using custom authenticator with ember-simple-auth and promises returning undefined for resolve

Question

I am using Ember.js and ember-simple-auth.

I have a custom authenticator named apps\authenticators\jwt.js with a method called authenticate:

  authenticate(credentials) {
    const { identification, password, secret } = credentials;

    const data = JSON.stringify({
      name: identification,
      password: password,
      secret: secret
    });

    const requestOptions = {
      async: true,
      crossDomain: true,
      url: 'https://website.com/api/auth/login',
      processData: false,
      method: 'POST',
      contentType: 'application/json',
      data: data,
    };

    return new Promise(function(resolve, reject) {
      Ember.$.ajax(requestOptions).then(function(data) {
        Ember.run(null, resolve, data);
        console.log(data); 
      }, function(jqXHR , textStatus, errorThrown) {
        jqXHR.then = null;
        Ember.run(null, reject, jqXHR, textStatus, errorThrown);
      });
    });
  },

and the controller for my login.hbs template:

import Ember from 'ember';

export default Ember.Controller.extend({
  session: Ember.inject.service('session'),

  actions: {
    authenticate() {
      var credentials = this.getProperties('identification', 'password', 'secret'),
      authenticator = 'authenticator:jwt';

      this.getProperties('identification', 'password', 'secret');
      this.get('session').authenticate(authenticator, credentials).then(function(result) {
        console.log(result);
      }, function(err) {
        console.log(err);
      });
    }
  }
});

If I successfully fill out the form and submit it I get a status code 200 and the proper response from the server from the line console.log(data); in the authenticate method in jwt.js But the line console.log(result); in the controller returns undefined.

However, if I fail to fill the form out and submit it I get the proper response from the server from the authenticate method AND I get that message from the console.log() in the controller.

My goal is to get the response on success to the template.

I can't seem to figure out why this is happening, any help is appreciated.

Edit: I am able to achieve my goal using localStorage however I would like to figure out the issue with the promise.

Edit 2: When I check the console, I get undefined first, then the data from console.log(data). Is the issue the order in which they're being executed asynchronously?

Edit 3: Here is my config/environment.js file

/* jshint node: true */

module.exports = function(environment) {
  var ENV = {
    modulePrefix: 'alpha',
    podModulePrefix: 'alpha/pods',
    environment: environment,
    rootURL: '/',
    locationType: 'auto',
    EmberENV: {
      FEATURES: {
        // Here you can enable experimental features on an ember canary build
        // e.g. 'with-controller': true
      },
      EXTEND_PROTOTYPES: {
        // Prevent Ember Data from overriding Date.parse.
        Date: false
      }
    },

    APP: {
      // Here you can pass flags/options to your application instance
      // when it is created
    }
  };

  ENV['ember-simple-auth'] = {
    authorizer: 'authorizer:session'
  };

  if (environment === 'development') {
    // ENV.APP.LOG_RESOLVER = true;
    // ENV.APP.LOG_ACTIVE_GENERATION = true;
    // ENV.APP.LOG_TRANSITIONS = true;
    // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
    // ENV.APP.LOG_VIEW_LOOKUPS = true;
  }

  if (environment === 'test') {
    // Testem prefers this...
    ENV.locationType = 'none';

    // keep test console output quieter
    ENV.APP.LOG_ACTIVE_GENERATION = false;
    ENV.APP.LOG_VIEW_LOOKUPS = false;

    ENV.APP.rootElement = '#ember-testing';
  }

  if (environment === 'production') {

  }

  return ENV;
};

If I add a return statement after `Ember.run(null, resolve, data);` I still get undefined — Eric Goncalves, Feb 28 '17 at 03:39
I take it that `Ember.run(null, resolve, data);` is asynchronous and in some way executes `resolve(data)` ? — Jaromanda X, Feb 28 '17 at 03:41
@EricGoncalves - in that case it shouldn't be undefined unless `data` is undefined — Jaromanda X, Feb 28 '17 at 03:50
According to [this](https://github.com/simplabs/ember-simple-auth/blob/master/addon/internal-session.js#L100) if you didn't set any session store so your output is relevant. You need to set a session store. And pay attention to that the out put of `authenticator.authenticate` is not passed to `session.authenticate` directly, and it is passed through the session store stuff — Ebrahim Pasbani, Feb 28 '17 at 03:53
data isn't undefined, it returns `Object { status: "ok", token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ…" }` from the custom authenticator — Eric Goncalves, Feb 28 '17 at 03:54
Sorry for my bad english. Please take a look at [session-store](https://github.com/simplabs/ember-simple-auth#session-stores). You need a session store — Ebrahim Pasbani, Feb 28 '17 at 04:02
Please do `return Ember.$.ajax(...` . You should return the inner promise — Ebrahim Pasbani, Feb 28 '17 at 04:08

score 1 · Answer 1 · edited May 23 '17 at 12:25

First, please avoid the explicit promise construction antipattern!

So first lets replace this code:

return new Promise(function(resolve, reject) {
  Ember.$.ajax(requestOptions).then(function(data) {
    Ember.run(null, resolve, data);
    console.log(data); 
  }, function(jqXHR , textStatus, errorThrown) {
    jqXHR.then = null;
    Ember.run(null, reject, jqXHR, textStatus, errorThrown);
  });
});

with this code:

return Ember.RSVP.resolve(Ember.$.ajax(requestOptions));

Wow, much nicer.

Next The rest of your code actually looks good. However I'm not sure what you mean by this:

I am able to achieve my goal using localStorage however I would like to figure out the issue with the promise.

But I assume what you actually mean is that it works if you use the LocalStorageStore? To dig into this deeper it would be interesting to see your config/environment.js. However a few things to notice:

If you don't specify a store you use the AdaptiveStore.
If you don't want a persistent store use the EphemeralStore.

I changed that block of code (still getting undefined) and edited the post to show my environment file. — Eric Goncalves, Feb 28 '17 at 15:34
What do you mean when you say it works with localstorage? And how is your HTTPS response? — Lux, Feb 28 '17 at 20:29

Using custom authenticator with ember-simple-auth and promises returning undefined for resolve

1 Answers1