auth.js

export class AuthService {
  constructor() {
    this.token = null;
    this.user = null;
  }
 
  isAuthenticated() {
    if (this.user === null || this.token === null) {
      return false;
    }
    
    return true;
  }
  
  login(username, password) {
    return this.http.post('http://localhost:24655/token', { 
        body: formEncode({ grant_type: 'password', username: username, password: password })
      })
      .then(response => response.json())
      .then(content => {
        localStorage.setItem("refreshToken", content.refresh_token);
        this.refreshToken = content.refresh_token;
        this.token = content.access_token;
      })
      .then(this._fetchUser.bind(this))
      .then(user => {
        this.user = user;
        return user;
      })
      .catch(reject => {
        return false;
      });
  }
  
  attemptRelogin() {
    return new Promise(resolve => {
      let refreshToken = localStorage.getItem('refreshToken');
      
      if (!refreshToken) {
        return resolve(false); 
      }
      
      resolve(this.http.post('http://localhost:24655/token', {
        body: formEncode({ grant_type: 'refresh_token', refresh_token: refreshToken }) 
      })
      .then(response => response.json())
      .then(content => {
        localStorage.setItem("refreshToken", content.refresh_token);
        this.refreshToken = content.refresh_token;
        this.token = content.access_token;
      })
      .then(this._fetchUser.bind(this))
      .then(user => {
        this.user = user;
        return user;
      })
      .catch(reject => {
        return false;
      }));
    });
  }
  
  _fetchUser() {
    return this.http.get('http://localhost:24655/api/account/me').then(response => response.json());
  }
}

http-client.js

export class HttpClient extends SimpleClient {
  static inject() { return [AuthService]; }
  static metadata() { return Metadata.transient(); }
  constructor(authService) {
    super();
    
    this.authService = authService;
  }
  
  send(uri, opts) {
    if (!opts) {
      opts = {}; 
    }
    
    if (!opts.headers) {
      opts.headers = {}; 
    }
    
    if (uri.indexOf('http://localhost:24655/api') !== -1 && this.authService.token !== null) {
      opts.headers['Authorization'] = `Bearer ${this.authService.token}`;
    }
    
    return super.send(uri, opts);
  }
}

login-status.js

import {Behavior, Container} from 'aurelia-framework';
import {ViewSlot, ViewEngine} from 'aurelia-templating';

import loginView from './login.html!';
import logoutView from './logout.html!';


export class LoginStatus {
  static metadata() {
    return Behavior
      .customElement('login-status')
      .withProperty('user', 'userChanged', 'user')
      .skipContentProcessing()
      .noView();
  }
  
  static inject() { return [Element, Container, ViewSlot, ViewEngine]; }
  constructor(element, container, viewSlot, viewEngine) {
    this.element = element;
    this.viewSlot = viewSlot;
    this.container = container;
    
    this.wait = Promise.all(
      loginView.loadViewFactory(viewEngine).then(val => this.loginViewFactory = val),    
      logoutView.loadViewFactory(viewEngine).then(val => this.logoutViewFactory = val)
    );
  }
  
  bind() {
    this.userChanged(this.user);
  }

  userChanged(value) {
    this.wait.then(() => {
      let view;
      this.viewSlot.removeAll();

      if (value) {
        view = this.logoutViewFactory.create(this.container, value);
      }
      else {
        view = this.loginViewFactory.create(this.container, {});
      }

      this.viewSlot.add(view);
    });
   
  }
}