Trigger transition to 'loading' route after ember-simple-auth authentication

Question

I'd like to display a "loading..." animation to the users logging into my application.

Ember automatically transitions to a 'loading' route (if any) if a model returns a promise, so it gives the opportunity to display a 'loading' template till the server responds.

Now, I have a login form where submit triggers the 'authenticate' action in my controller (which is defined in the LoginControllerMixin). This seems not to be recognised as a promise by ember, hence the application does not transition to the 'loading' route.

Maybe there is a way around this using simple-auth session state, but I can't figure it out

any help would be appreciated

Answer 1

It's not that it isn't a promise, it's that it isn't part of a transition. If you want to modify the authentication mixin, you can have it manually transition to a loading route, then begin the promise, then transition to destination post authentication. Honestly, I'd be surprised if this is worth it, unless your back-end authenticates really slow.

You would change the authentication logic to something like this:

this.transitionTo('loading').then(function(){      
  authenticateLogicCall().then(function(){
    this.transitionTo('authenticatedResource');
  });
});

Answer 2

I think the loading routes only work nicely when there's a transition and the framework is waiting for the promise returned by the destination route's model hook to resolve. That's not the case with Ember Simple Auth's LoginControllerMixin's authenticate action though. To display a loading message you can simply override that authentication action though:

export default Ember.Controller.extend(LoginControllerMixin, { actions: { authenticate: function() { var _this = this; this.set('loading', true); this._super().then(function() { _this.set('loading', false); }, function() { _this.set('loading', false); }); } } });