Have a look at the Angular University Youtube channel, we publish about 25% to a third of our video tutorials there, new videos are published all the time.
Subscribe to get new video tutorials:
This post is a step-by-step guide for both designing and implementing JWT-based Authentication in an Angular Application.
The goal here is to discuss JWT-based Authentication Design and Implementation in general, by going over the multiple design options and design compromises involved, and then apply those concepts in the specific context of an Angular Application.
We will follow the complete journey of a JWT from creation on the Authentication server and back to the client, and then back to the Application server and talk about all the design options and decisions involved.
Because Authentication also requires some server code, we will show that too so that we have the whole context and can see how all the multiple parts work together.
The server code will be in Node / Typescript, as it’s very familiar to Angular developers, but the concepts covered are not Node-specific.
If you use another server platform, it’s just a matter of choosing a JWT library for your platform at jwt.io, and with it, all the concepts will still apply.
Table of Contents
In this post we will cover the following topics:
- Step 1 - The Login Page
- JWT-based Authentication in a Nutshell
- User Login in an Angular Application
- Why use a separately hosted Login Page?
- Login directly in our single page application
- Step 2 - Creating a JWT-based user Session
- Creating a JWT Session Token using node-jsonwebtoken
- Step 3 - Sending a JWT back to the client
- Where to store a JWT Session Token?
- Cookies vs Local Storage
- Step 4 - Storing and using the JWT on the client side
- Checking User Expiration
- Step 5 - Sending The JWT back to the server on each request
- How to build an Authentication HTTP Interceptor
- Step 6 - Validating User Requests
- Building a custom Express middleware for JWT validation
- Configuring a JWT validation middleware using express-jwt
- Validating JWT Signatures - RS256
- RS256 vs HS256
- JWKS (JSON Web Key Set) endpoints and key rotation
- Implementing JWKS key rotation using node-jwks-rsa
- Summary and Conclusions
So without further ado, let’s get started learning JWT-based Angular Authentication!
#angular #authentication #jwt
