ember-mu-login

This addon provides a mu-login and mu-logout component for the mu-login microservice. The addon uses ember-simple-auth for authentication.

How-To

Basic usage

Install the Ember addons

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

Make sure to use ember-simple-auth >= v6.0.0

As part of installing ember-simple-auth it's necessary to set-up the session service, so somewhere near the root of your app, inject the service and call setup() on it. For example:

// app/routes/application.js
import Route from '@ember/routing/route'
import { service } from '@ember/service'

export default class ApplicationRoute extends Route {
  @service session

  async beforeModel(...args) {
    await this.session.setup()
  }
}

After installation, include the <MuLogin /> and <MuLogout /> component somewhere in your template(s).

Have a look at the ember-simple-auth addon to understand how to protect your routes. The session authentication/invalidation is already handled by this addon.

Customize the components layout

If you want to customize the layout of the MuLogin and/or MuLogout component, you will need to extend those components. This tutorial explains customization of the MuLogin component, but the process for MuLogout is similar.

Generate a MuLogin component for your application

ember g component -gc mu-login

Overwrite the generated app/components/mu-login.js file with the following contents

import MuLoginComponent from 'ember-mu-login/components/mu-login';

export default class MyMuLoginComponent extends MuLoginComponent {

}

You can now customize the generated app/components/mu-login.hbs file as needed. The login action can be triggered using {{on "click" this.login}}. Have a look at the MuLogin-component documentation for all options.

Reference

Components

MuLogin

Component rendering a login form with a username and password field.

Arguments

The following arguments can be passed to the component

Properties

The following properties can be used in the component's template using {{this.propName}}

Actions

The following actions are available

MuLogout

Component rendering a button to logout.

Arguments

The following arguments can be passed to the component

Properties

The following properties can be used in the component's template using {{this.propName}}

Actions

The following actions are available