Ember-simple-auth: How to use ember-simple-auth with ember engines?

[murli2308]

how to extend the routes which are part of ember in-repo-engine with authentication mixin ? and how it will redirect to login route ?

[jayhjkwon]

I am using ember-simple-auth in standalone routable ember engines.
Followings are snippets of how I have done it.

• Install ember-simple-auth in engines
• In your host application, share session service and login route

/* main/app/app.js */

App = Ember.Application.extend({
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix,
  Resolver,

  engines: {
    blogEngine: {
      dependencies: {
        services: [
          'session'
        ],
        externalRoutes: {
          'main-login': 'login'
        }
      }
    }
  }
});

• The same declaration should be done in your engines

/* [engine-name]/addon/engine.js */

const Eng = Engine.extend({
  modulePrefix,
  Resolver,
  dependencies: {
    services: [
      'session'
    ],
    externalRoutes: [
      'main-login'
    ]
  }
});

• Your engine's application route should mix ApplicationRouteMixin

/* [engine-name]/addon/routes/application.js */

import Ember from 'ember';
import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin';

export default Ember.Route.extend(ApplicationRouteMixin, {
});

• You can mix AuthenticatedRouteMixin in your engine's route if only authenticated users are allowed to access

/* [engine-name]/addon/routes/user-profile.js */

import Ember from 'ember';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin, {
});

-The last but the most important thing is that you need to redirect user to host application's login route from engine's login route so that unauthenticated user will be redirected to host application's login route when they try to access secured routes

/* [engine-name]/addon/routes/login.js */
import Ember from 'ember';

export default Ember.Route.extend({
  beforeModel() {
    this.transitionToExternal('main-login');
  }
});

Hope this helps.

[tschoartschi]

For me the solution @RayKwon describes worked. At first I forgot to include the login route in buildRoutes. One thing I noticed is, that if I specify ember-simple-auth as dependency in the package.json I get the following warning:

WARNING: Library "Ember Simple Auth" is already registered with Ember.

If I don't include it into package.json there is no warning and it also seems to work. But I'm not sure if it is a good idea to use a dependency and never specify it.

[mellatone]

@RayKwon Which versions of ember / simple auth did you use?

[jayhjkwon]

I am using ember 2.10.0 and ember-simple-auth 1.2.0-beta.1 and ember-simple-auth-token 1.2.0

[marcoow]

It would be awesome if someone could submit a PR adding a sample engine to the dummy app!

[justinaray]

@tschoartschi ... did you try adding it as a peerDependency?

[peStoney]

@RayKwon For me adding the mixin to the engine's application route did not work since in the unauthenticated state it looped into the beforeModel() method of the mixin instead of entering the one of the login route. Adding an index route and using the mixin there instead of in the application route solved the issue for me.

[spencer516]

I just want to chime in — this question came up in the Ember Discussion forum and I had a slightly different solution: https://discuss.emberjs.com/t/how-do-i-find-out-if-im-inside-an-engine/12627/3

But, it's not a solution I feel great about.

What if Ember Simple Auth exposed a new hook in the AuthenticatedRouteMixin —  something like transitionToLogin — which is used internally by the beforeModel hook so consumers of the mixing have a way to control the behavior of the transition.

Here's what that would look like

export default Mixin.create({
  session: service('session'),

  _isFastBoot: computed(function() {
    const fastboot = getOwner(this).lookup('service:fastboot');

    return fastboot ? fastboot.get('isFastBoot') : false;
  }),

  authenticationRoute: computed(function() {
    return Configuration.authenticationRoute;
  }),

  transitionToLogin(loginRoute) {
    return this.transitionTo(loginRoute);
  },

  beforeModel(transition) {
    if (!this.get('session.isAuthenticated')) {
      let authenticationRoute = this.get('authenticationRoute');

      if (this.get('_isFastBoot')) {
        const fastboot = getOwner(this).lookup('service:fastboot');
        const cookies = getOwner(this).lookup('service:cookies');

        cookies.write('ember_simple_auth-redirectTarget', transition.intent.url, {
          path: '/',
          secure: fastboot.get('request.protocol') === 'https'
        });
      } else {
        this.set('session.attemptedTransition', transition);
      }

      return this.transitionToLogin(authenticationRoute);
    } else {
      return this._super(...arguments);
    }
  }
});

Given that, ^^, then consumers of the Mixin in an engine could do something like:

// my-engine/addon/routes/protected-route.js

export default Route.extend(AuthenticatedRouteMixin, {
  transitionToLogin(loginRoute) {
    return this.transitionToExternal(loginRoute);
  }
});

[spencer516]

(I'd be happy to contribute a PR for this if this seems like a reasonable solution).

[devotox]

Hey guys so after going through this and finding some more problems with Ember Engines with Simple Auth I have written up everything I have found. So take a look if you are still having any troubles with this

https://gist.github.com/devotox/240c36aa1cb51e63fa2b8917582d2e3f

[marcoow]

cleaning up old issues