0

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;
};
15
  • If I add a return statement after Ember.run(null, resolve, data); I still get undefined Commented Feb 28, 2017 at 3:39
  • oops sorry, re-reading the code ... ignore my comments Commented Feb 28, 2017 at 3:40
  • I take it that Ember.run(null, resolve, data); is asynchronous and in some way executes resolve(data) ? Commented Feb 28, 2017 at 3:41
  • yeah, thats right. Commented Feb 28, 2017 at 3:45
  • Don't you use from any session store? Commented Feb 28, 2017 at 3:47

1 Answer 1

1

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.
Sign up to request clarification or add additional context in comments.

2 Comments

I changed that block of code (still getting undefined) and edited the post to show my environment file.
What do you mean when you say it works with localstorage? And how is your HTTPS response?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.