AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties.

JSON Web Tokens (JWT) are a more modern approach to authentication. As the web moves to a greater separation between the client and server, JWT provides a terrific alternative to traditional cookie based authentication models. For more information on JWT visit http://jwt.io/

In this series, we’ll be building a simple application to get random user information from a node server with an Angular client. We’ll then implement JWT to protect the random user resource on the server and then work through the frontend to get JWT authentication working.

By the end, we’ll have an application which has a single username/password combination (for simplicity) and uses tokens to authorize the client to see the random user information. You’ll be able to login, get random users, and logout.

A basic introduction to the mechanics of JWTs and the application we will be building in this lesson series.

JSON Web Token (JWT) Introduction

Creating the basic node server to serve up random users via API endpoints.

Basic Server Setup for JWT Authentication

Creating a basic Angular application to access the random users resource. Also setting up CORS on the node server to enable the resource sharing across different domains (ports in our case).

Client Setup for JWT Authentication

Setting up a login on the angular app and an authentication endpoint on the server.

JWT Authentication Setup

Adding JWT support to the server. Signing a JSON object as a payload and sending the signed token to the browser on authentication.

Server JWT Authentication Setup

Adding JWT support to the client. Storing the token in local storage, then creating a http interceptor to add the token to requests made to the server. Also implementing logout.


Auth Interceptor in Angular for JWT

Adding middleware to the node server to decode and verify the token sent from the client. And tidying up the rest of the application. Finally, a walkthrough of the whole process.

AngularJS Authentication with JWT

Kent C. Dodds

Course Content