Calling an ASP.NET WebAPI From Aurelia

In my last article, I promised I would deal with authentication of an ASP.NET WebAPI. Well, to do that, I need a WebAPI and I didn’t want to mix the additions because of the WebAPI with the additions because of the authentication requirements. As a result, I decided to add a page to my Aurelia app that utilized the WebAPI to return some data.

Create a WebAPI

I’m going to create a simple WebAPI for this example. When I do a GET /api/spells, it will return a simple JSON object like this: {id: 1}. It’s really the most simple WebAPI you could possibly produce.

First off, I’ve already added Microsoft.AspNet.Mvc to my project.json file. I only have to create a Controller class. That is located in Controllers/SpellsController.cs. I had to create the Controllers directory since this is my first controller.

using Microsoft.AspNet.Mvc;

namespace aurelia_2.Controllers
    public class SpellsController : Controller
        public string GetAll()
            return "{id:1}";

You can test this with Postman or a similar REST client. Just send a GET request for /api/spells and you will see the embedded string returned. Note that I didn’t have to provide a route map to the app.useMvc() call in Startup.cs. It happens thanks to the decorators on the class.

Creating a new View in Aurelia

Back to my Aurelia page, I wanted to create a new view called “spells”. I need two files – pages/spells.html contains my view:

        <h2>${heading} - ${code}</h2>
        <div id="data">

The heading, code and data variables are bound to the class – pages/spells.ts contains the definition:

import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-http-client';

export class Spells {
    public heading: string = 'Spells';
    public data: string = '';
    public code: string = '';
    private loading: boolean = false;
    private http: HttpClient = null;

    constructor() {
        var auth_token = localStorage.getItem("auth_token");
        if (auth_token != null) {
            this.http = new HttpClient().configure(x => {
                x.withHeader("Authorization", "Bearer " + localStorage.getItem("auth_token"));
                x.withHeader("Accept", "application/json");
        } else {
            this.http = new HttpClient().configure(x => {

    activate() {
        this.loading = true;
        return this.http.get("/api/Spells").then(response => {
   = response.content;
            this.code = response.statusCode.toString();
            this.loading = false;

    canDeactivate() {
        if (this.loading) {
            return confirm("Still loading - are you sure?");
        return true;

The constructor should have a little explanation. Firstly, I pull the auth_token. If I’m authenticated, then I will create a new HttpClient object that contains the authorization. If the user is not signed in, then I create a new HttpClient() object without the authorization. That way, the usage of the WebAPI follows the status of the user. Signed in – send the authorization. Not signed in – don’t. I’d probably abstract this (and all the other authentication information) into it’s own class in a real application.

If you remember the flickr page from the Aurelia tutorial, you will note that the activate() methods and canDeactivate() methods (which are part of the page lifecycle that Aurelia provides). When I get a response from the server, I set the data and code and the values will get automatically reflected in the view.

Wire in the new View

Before I can use the view I’ve just created, I need to create a route for it. That is done within the configureRouter() method in app.ts:[
            { route: 'welcome', name: 'welcome', moduleId: './pages/welcome', nav: true, title: 'Welcome' },
            { route: 'flickr', name: 'flickr', moduleId: './pages/flickr', nav: AuthorizeStep.isLoggedIn(), auth: true, title: 'Flickr' },
            { route: 'spells', name: 'spells', moduleId: './pages/spells', nav: true, title: 'Spells' },
            { route: '', redirect: 'welcome' },

Don’t forget to clear your cache before reloading the page. I found that the browser hung on to this javascript file until I did.

Running the project will provide the appropriate response. You will see a Spells link on the top bar. Clicking on the Spells link will do an XHR request to the backend, which will then fill in the data for you. If you are viewing the page in Chrome, you can open up the Developer Tools and click on Network. Reload the page and check out the XHR request for /api/Spells – you will note the Authorization header if you are signed in.

This means I am now all ready for dealing with authentication. I have a page that should send the appropriate authentication when signed in. However, my backend is not configured to handle that authentication yet – in fact, it simply ignores it.

You can get this code from my GitHub Repository.