Default Ember component for login-service
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


This addon provides a mu-login and mu-logout component for the mu-login microservice. The addon is based on ember-simple-auth.


ember install ember-simple-auth
ember install ember-mu-login

Basic usage

Just include the {{mu-login}} or {{mu-logout}} component in your template.

Advanced usage

Overwriting the component templates

To overwrite the template of the components, create a custom mu-login.hbs or mu-logout.hbs file. Make sure you use the correct bindings and actions. You can have a look at the default templates in addon/templates/components.

For mu-login

  • call the login action
  • use nickname and password as value bindings for the input fields

For mu-logout

  • call the logout action

Customizing the components

To customize the components, generate your own new components and include the mu-login (ember-mu-login/mixins/mu-login) and mu-logout (ember-mu-login/mixins/mu-logout) mixins to handle the login and logout actions.

Ember Simple Auth in a nutshell

The ember-mu-login addon is based on ember-simple-auth. The following paragraphs highlight the features you will probably need in combination with ember-mu-login. A complete usage and configuration guide can be found in the ember-simple-auth documentation.

Session state

You can use ember-simple-auth's isAuthenticated property to check the current session's state. The session service needs to be injected.

// app/controllers/application.js
import Ember from 'ember';

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

{{!-- app/templates/application.hbs --}}
{{#if session.isAuthenticated}}

Authentication events

Mix the ApplicationRouteMixin into the application route to have the authenticationSucceeded and invalidationSucceeded events handled automatically:

// app/routes/application.js
import Ember from 'ember';
import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin';

export default Ember.Route.extend(ApplicationRouteMixin);

Protecting routes

To make a route in the application accessible only when the session is authenticated, mix the AuthenticatedRouteMixin into the respective route:

// app/routes/protected.js
import Ember from 'ember';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin);

This will make the route (and all of its subroutes) transition to the login route if the session is not authenticated.