AngularJS Authentication with JWT

31 minutes

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.

pro-course-rss-logo

PRO RSS Feed

JSON Web Token (JWT) Introduction

Basic Server Setup for JWT Authentication

Client Setup for JWT Authentication

JWT Authentication Setup

P

Server JWT Authentication Setup

P

Auth Interceptor in Angular for JWT

P

Finalizing JWT Authentication with AngularJS

P
angularjs tutorial about JSON Web Token (JWT) Introduction

JSON Web Token (JWT) Introduction

1:23 angularjs

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

angularjs tutorial about Basic Server Setup for JWT Authentication

Basic Server Setup for JWT Authentication

1:44 angularjs

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

angularjs tutorial about Client Setup for JWT Authentication

Client Setup for JWT Authentication

3:33 angularjs

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).

angularjs tutorial about JWT Authentication Setup

JWT Authentication Setup

4:15 angularjs PRO

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

angularjs tutorial about Server JWT Authentication Setup

Server JWT Authentication Setup

4:03 angularjs PRO

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

angularjs tutorial about Auth Interceptor in Angular for JWT

Auth Interceptor in Angular for JWT

7:53 angularjs PRO

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.

angularjs tutorial about Finalizing JWT Authentication with AngularJS

Finalizing JWT Authentication with AngularJS

8:13 angularjs PRO

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.

Presented by:

Kent C. Dodds

a JavaScript developer who likes open source and teaching.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?