Angular Advanced: JWT Authentication

Name: Angular Advanced: JWT Authentication
Author: Farhan Saleem

Learn what a JWT Tokens are and how you can use them for authentication

Preview the first lesson free — get full access to all 6 lessons.

Course: On-Demand

Hi, my name is Farhan, and this lesson will be learning how to set up authentication in an Angular application using JWT tokens. In order to showcase this, I'll create a simple application with a login form, which will look something like this, and the user will enter their credentials into the form with their username and password. The login button will make a call to the authentication service, which will mock a back-end API service which can authenticate the users to give you an idea of how you can build authentication in your real Angular application. And then the return credentials will be stored in local storage on the browser and will be referred to when the user needs to be redirected to another page. So, for example, if you're authenticating the user when your application first loads, their login page and a lot of applications is the first page. After the user is authenticated, only when they're authenticated, they're allowed access to the rest of the applications to the various pages, other private information, which you want to guard behind that login. So, in order to do that, I'll create an Angular application, and I have a few items that I wanted to just show you that I'll be using. I have created a login component, and the login component has the two fields on the form that you just saw. I've created a home component which the user will be directed to after the user is successfully logged in. I have a guard to protect the login page, and only when the user is successfully logged in will the user be redirected to the other pages. In the app routing module, I have a default home component page and a login page which is going to be our initial application page. And I will go over these other services that I have created, including authentication service, mock back end service, and JWT interceptor which implements an HTTP interceptor to interceptor request. So, it can pass on the token to any second, third request that you will make as a login user. Stay tuned, and we'll be looking at design considerations for creating authentication in your application in the next lesson. Thank you for watching.

Advanced Provider : Farhan Saleem 6 Lessons · 28m in English

Course Description

As a developer, it’s important to be not only aware of the different authentication options, but also their strengths and any associated risks. In these lessons, we will look at some options that are available in the UI for implementing security, as well as security concerns to be aware of. Implementing authentication has to be done in a few parts—we will look at how to create a mock backend server response and how to use Angular to get the JWT token, store it in the browser session storage, and send it to the backend for all requests after that. You will also learn how to use a route guard to allow or deny access to routes using the authentication service. This is a popular pattern in UI applications for authentication that, as a developer, is very important to understand and be able to implement.

Security is of critical concern to all modern applications. In these lessons, you will learn how to work with JWT tokens, implement authentication, and store user credentials. You will also learn about the HTTP interceptor and use it to intercept HTTP requests and send the token back to the server for every request.

What You'll Learn

Use JWT tokens to implement authentication in Angular UI applications
Create a mock backend server response and retrieve the JWT token
Store the JWT token in the browser session storage and send it on subsequent requests
Build an authentication service that works with a backend that authorizes the user
Implement an HTTP interceptor to intercept requests and send the token to the server
Apply a route guard (auth guard) to allow or deny access to routes using the authentication service

Key Takeaways

JWT authentication is a popular pattern in UI applications for handling security.
Implementing authentication involves creating a mock backend response, obtaining the JWT token, storing it in browser session storage, and sending it on all following requests.
An HTTP interceptor can intercept HTTP requests and send the token back to the server for every request.
A route guard uses the authentication service to allow or deny access to routes.
Developers should understand the different authentication options along with their strengths and associated security risks.

Frequently Asked Questions

Who is this course for?

It is for developers who want to understand and be able to implement authentication in Angular UI applications, including working with JWT tokens, authentication, and storing user credentials.

What topics does this course cover?

It covers Angular authentication project setup, design options and considerations, building an authentication service, using JWT tokens with an HTTP interceptor, using an auth guard with authentication, and security concerns and risks.

What skills will I gain?

Skills include application security, authentication protocols, JSON Web Token (JWT), secure application development, security tokens, and web application security.

What will I learn about HTTP interceptors?

You will understand what HTTP interceptors are and how to use them to intercept HTTP requests and send the token back to the server for every request.

How is access to routes controlled in this course?

You will learn how to use a route guard (auth guard) to allow or deny access to routes using the authentication service.