Securing a Vue.js app and API with IdentityServer - Part 1

People regularly ask me how authentication should be performed when calling a secured HTTP API from a Single Page Application.

This blog series provides a worked example, from beginning to end, showing you how to build a SPA with Vue.js, connect it to an HTTP API built with ASP.NET Core and to secure it with IdentityServer v4.

Because you’re busy and you might not want to read the entire series just to solve that one small problem you have, here’s what we’ll cover in each part.

• Part 1 - Overview and Solution Structure (this post)
• Part 2 - Creating and configuring your IdentityServer
• Part 3 - Adding Google authentication to IdentityServer
• Part 4 - Creating and securing an ASP.NET Core Web API
• Part 5 - Creating the Vue.js client
• Part 6 - Calling an HTTP API from Vue.js
• Part 7 - Securing a router view in Vue.js
• Part 8 - Calling a secured API from Vue.js
• Part 9 - Refreshing identity tokens with Vue.js

Note: You can find the source code for this post series on GitHub.

Overview

Our sample application will be calling an API and displaying the data returned. It’s deliberately simple so you can focus on the authentication of users and how to manage the identity tokens.

The end-to-end flow in the final application is:

• A person browses to our web site to load the Vue.js JavaScript client.
• They trigger the sign-in process by navigating to a secured page.
• They authenticate with IdentityServer using a username/password or Google sign in.
• The Vue.js client calls our secured API with the person’s identity token, and shows the result in the browser.
• The Vue.js client automatically refreshes the identity token so that our person won’t have to keep logging in at regular intervals.

The solution has 3 main components

1. IdentityServer: Our secure token server (STS). It runs using ASP.NET Core and will be configured for username/password and Google authentication.
2. Web Server: Our ASP.NET Core Web API. It will also be serving the static content for the Vue.js web application.
3. Single Page Application: Our Vue.js client application. We’ll use Axios to make the API calls.

Enough with the preamble. Let’s get started!

Solution Setup

Since we don’t want to tightly couple the deployment of our authentication service with the deployment of the HTTP API, we’ll have two projects. One for the IdentityServer and one for our ASP.NET Core Web API.

We’re going to start by creating a new ASP.NET Core Web API project in Visual Studio called ‘VueApi’.

Ensure you create an API project with No Authentication and with support for HTTPS. What’s the point of securing an API if you transmit all your data in plain text, huh?

And… That’s it for now! The default project template provides a Values controller that’s sufficient for our initial needs.

It’s time to move to the next step.

Up Next: Part 2 - Creating and Configuring your IdentityServer