Ember simple-auth mixins deprected

Question

I am an experienced (55+ years) programmer but a total noob in ember and js. I'm trying to get a simple authentication page working using the ember-cli addons ember-cli-simple-auth, ember-cli-simple-auth-oauth2 and cut-and-paste from the simplelabs tutorial.

I get the following in the console:

DEPRECATION: The LoginControllerMixin is deprecated. Use the session's authenticate method directly instead.

and:

DEPRECATION: The AuthenticationControllerMixin is deprecated. Use the session's authenticate method directly instead.

The solution may be trivial, but I have been chasing it for hours and get deep into javascript before reaching a dead-end. The code that is causing these errors is:

import LoginControllerMixin from 'simple-auth/mixins/login-controller-mixin';

export default Ember.Controller.extend(LoginControllerMixin, { authenticator: 'simple-auth-authenticator:oauth2-password-grant' });

which invokes the ApplicationControllerMixin somewhere in the bower code.

Before I "re-invent the wheel" by translating some old html/ruby/pascal code into js, can anyone help me "Use the session's authenticate method directly instead."?

Thanks.

Answer 1

I feel you're pain. I spent weeks trying to sort this out. A big part of the problem is that so much has changed in the past couple of years and there are a lot of code examples out there that are outdated or don't work together. It's really difficult to put the various pieces together coherently, and figure out what one does NOT need to do.

That said, please keep in mind that i'm a n00b as well. What i've done seems to work ok but i've no idea whether there's a much better way.

Also, what you're trying to do may not be the same as what i've done. My app authenticates against google (and twitter, fb, etc.) using Simple-Auth-Torii and then exchanges the returned Authenication Code for an Authentication Token. That last part happens on the server. So, after the session authenticates, i then pass the auth code to the server and get back the auth code.

// routes/login.js
import Ember from "ember";
import ENV from "../config/environment";

export default Ember.Route.extend({
  setupController: function(controller, model) {
    controller.set("errorMessage", null);
  },

  actions: {
    googleLogin: function() {
      var _this = this;

      // Using "session's authenticate method directly" right here

      this.get("session").authenticate("simple-auth-authenticator:torii", "google-oauth2")
        .then(function() {
          // We're now authenticated. The session should now contain authorization
          // code from provider. We now need to exchange that for an auth token.
          var secureData = _this.get("session.content.secure");

          // call server to initiate token exchange from provider
          var exchangeData = {
            authorizationCode: secureData.authorizationCode,
            redirectUri    : secureData.redirectUri,
            provider     : 'google'
          };

          // sends ajax request to server, which will in turn call provider
          // with authentication code and receive auth token
          _this.tokenService.fetch(exchangeData).then(function(response) {

            if (response.success) {
              _this.set("session.content.secure.access_token", response.data.token);
              _this.set("session.content.secure.userData", response.data.user);

              // take user somewhere ...
              _this.transitionTo("data_sets");
            }
            else {
              // set an error message, log the response to console, whatever, but
              // we need to invalidate session because as far as simple-auth
              // is concerned we're already authenticated. The following logs the user out.
              _this.get("session").invalidate();
            }
          }, function(error) {
            console.log("tokenService.fetch error", error);
            _this.get("session").invalidate();
          });

        }, function(error) {
          console.log("simple-auth-authenticator:torii error", error);
          _this.get("session").invalidate();
        });
    },

    twitterLogin: function() {
      // etc.
    }
  }
});

Logging a user out also uses the session directly.

{{!templates/application.hbs}}
<ul class="nav navbar-nav navbar-right">
{{#if session.isAuthenticated}}
  <li><button {{ action 'invalidateSession' }} class="btn btn-sm">Logout</button></li>
{{/if}}
  ...
</ul>


// routes/application.js
import Ember from "ember";
import ENV from "../config/environment";
import ApplicationRouteMixin from "simple-auth/mixins/application-route-mixin";

export default Ember.Route.extend(ApplicationRouteMixin, {

  actions: {
    // action is globally available because in application route
    invalidateSession: function() {
      // the most basic logout
      this.get("session").invalidate();
      return;

      // If you need to invalidate also on the server do something like:
      //
      // var _this = this;
      // return new Ember.RSVP.Promise(function(resolve, reject) {
      //   var params = {
      //     url    : ENV.logoutEndpoint,
      //     type     : "POST",
      //     dataType   : "json"
      //   };

      //   Ember.$.ajax(params).then(function(response) {
      //     console.log('session invalidated!');
      //     console.dir(response);
      //     _this.get("session").invalidate();
      //   });
      // });
    }
  }
});

Answer 2

I've met the same deprecation problem. I thinks this snippet for a lovely login controller will do, it's a bit more what you asked, but I hope it is still understandable. I use it with devise, it's almost the same except I use it this way: authenticate('simple-auth-authenticator:devise', credentials)

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    authenticate: function() {
      // identification and password are the names of the input fields in the template
      var credentials = this.getProperties('identification', 'password');

      if (!credentials.identification || !credentials.password) {
        return false;
      }

      this.get('session').authenticate('simple-auth-authenticator:oauth2-password-grant', credentials).then(function() {
        // authentication was successful
      }, function(errorMessage) {
        // authentication failed
      });
    }
  }
});