DEV Community: Ankit

Announcing A Complete Blazor Mastery Course

Ankit — Sun, 29 Aug 2021 09:56:59 +0000

Introduction

Blazor is a .NET web framework that allows us to create client-side applications using C#, Razor syntax, and HTML. It allows us to create a rich and modern Single Page Application (SPA), using C#, and run it on the browser of our choice.

Browser + Razor = Blazor

The name “Blazor” comes from the ability of the framework to run C# and Razor in the browser. Combining “browser” and “Razor” gives us the name “Blazor.” Code running in the browser executes in the same security sandbox as JavaScript frameworks.

Get the course now

The course is published by Codered from EC-council. Get the course Getting Started with Blazor and start your journey to become a complete Blazor developer.

Course overview

The overview video for this course is available on YouTube.

Source Code

The source code of the project which we have built in this course is available at GitHub.

Try out the application

The live demo of the project is available at https://movieappdemo.azurewebsites.net/. Navigate to the URL and see what we are going to build in this course.

Key Features of the Blazor course

This Blazor course will cover the Blazor concepts such as component and component communication, data binding, forms and validations, routing, debugging, and JavaScript Interop in detail. You do not need any previous knowledge of Blazor in order to take up this course.
You will learn how to create a real-world, full-stack web application with the help of Blazor WebAssembly, Entity Framework Core, and SQL Server. The app will support CRUD operation, authentication, authorization, and client-side state management.
By the end of this course, you will have a complete understanding of working with the Blazor framework. You will be able to create real-world web applications using Blazor.

The approach followed in this Blazor course

This course is divided into 4 chapters.

The first chapter will introduce you to the Blazor framework. You will learn about the different Blazor hosting models and how to set up the Blazor development environment in your machine.
The second chapter will cover the core concepts of Blazor such as Blazor components, data binding, event handling, forms and validations, routing, debugging, and JavaScript Interop.
In the third chapter, we will create a full-stack, real-world application using Blazor WebAssembly, Entity Framework Core, and SQL Server.
In the fourth chapter, we will learn how to deploy the full-stack Blazor WebAssembly application to IIS and Azure.

The course is full of hands-on instructions. Each concept and topic is explained with the help of code samples. Get the source code from GitHub and play around to understand what we are going to build in this course.

Looking for a discount!!!

As an introductory offer, you can also avail of a special discount of 20% on CodeRed Pro subscription.

Use Coupon Code SPECIAL20

The offer is valid for a limited period only.

If you like my course on Blazor, share it with your friends. You can also connect with me on Twitter and LinkedIn. My DMs are always open.

Just Released - A Free eBook On Angular and Firebase

Ankit — Fri, 01 May 2020 13:36:58 +0000

Introduction

Angular is an open-source framework that allows us to create applications for multiple platforms such as web, mobile web, native mobile, and native desktop. It is one of the most popular Single Page Application frameworks.

In this eBook, we are going to create a blogging application using Angular on the front-end and Google cloud Firestore as our database. We will also learn how to deploy the application on Firebase.

Download the free eBook

The book is published by C# Corner.

You can download the free book from Build a Full-Stack Web Application Using Angular & Firebase

Source Code

The source code of the application which we have built in this book is available at GitHub.

Try out the application

The app is deployed at https://blogsite-30c69.firebaseapp.com/. Navigate to the URL and see what we are going to build in this book.

Features for the application

Our application will have the following features:

Material design
Add a new blog post
Edit an existing blog
Delete an existing blog
Authorization with Google account
Role-based authentication
Pagination for the blogs
Post comment on each blog
Option to share the blog on social channels

What you will learn in this eBook?

We will cover the following Angular concepts in this book:

Using Cloud Firestore with an Angular application
Angular Material and Bootstrap
Template-driven forms
Form validation
Custom pipes
Auth-guards in Angular
Authentication and Authorization
Login with Google using Firebase
Social share option using ngx-share
Client-Side pagination using ngx-pagination
Deploying an Angular app in Firebase

By the end of this book, you will have mastered the advanced concepts of the Angular framework. You will be able to create a rich and interactive web application using Angular and Google’s Firebase.

Prerequisites for the reader

The readers are expected to have a basic understanding of web development in general. They are also required to have a basic knowledge of HTML, CSS, and JavaScript. This book will not cover the basics of Angular. A fundamental understanding of the Angular framework is required before you proceed. Please learn and understand the following basic concepts of Angular.

What is Angular?
How Angular works in general?
What is Angular component?
What is Angular Module?
Understanding of Angular Services

Acknowledgment

I would like to thank Prakash Tripathi and Santosh Yadav for the valuable time on reviewing the book. Their constructive feedback was crucial in enhancing the quality of the content.

I would also like to thank Mahesh Chand and the C# Corner team for their support in reviewing and publishing the book.

Connect with me

You can connect with me via LinkedIn, Twitter and GitHub

Creating A Multi-Language Translator Using Blazor And Azure Cognitive Services

Ankit — Sun, 16 Feb 2020 18:20:40 +0000

Introduction

In this article, we will create a multi language translator using Blazor and the Translate Text Azure Cognitive Service. This translator will be able to translate between all the languages supported by the Translate Text API. Currently, the Translate Text API supports more than 60 languages for translation. The application will accept the text to translate and the target language as the input and returns the translated text and the detected language for the input text as the output.

Prerequisites

Install the latest .NET Core 3.1 SDK from https://dotnet.microsoft.com/download/dotnet-core/3.1
Install the latest version of Visual Studio 2019 from https://visualstudio.microsoft.com/downloads/
An Azure subscription account. You can create a free Azure account at https://azure.microsoft.com/en-in/free/

Source Code

You can get the source code from GitHub.

Create the Azure Translator Text Cognitive Services resource

Log in to the Azure portal and search for the cognitive services in the search bar and click on the result. Refer to the image shown below.

On the next screen, click on the Add button. It will open the cognitive services marketplace page. Search for the Translator Text in the search bar and click on the search result. It will open the Translator Text API page. Click on the Create button to create a new Translator Text resource. Refer to the image shown below.

On the Create page, fill in the details as indicated below.

Name: Give a unique name for your resource.
Subscription: Select the subscription type from the dropdown.
Pricing tier: Select the pricing tier as per your choice.
Resource group: Select an existing resource group or create a new one.
Click on the Create button.

Refer to the image shown below.

After your resource is successfully deployed, click on the “Go to resource” button. You can see the Key and the endpoint for the newly created Translator Text resource. Refer to the image shown below.

Make a note of the key, we will be using this in the latter part of this article to request the translations from the Translator Text API. The values are masked here for privacy.

Create a Server-Side Blazor Application

Open Visual Studio 2019, click on “Create a new project”. Select “Blazor App” and click on the “Next” button. Refer to the image shown below.

On the next window, put the project name as BlazorTranslator and click on the “Create” button. The next window will ask you to select the type of Blazor app. Select Blazor Server App and click on the Create button to create a new server-side Blazor application. Refer to the image shown below.

Creating the Models

Right-click on BlazorTranslator project and select Add >> New Folder. Name the folder as Models. Again, right-click on the Models folder and select Add >> Class to add a new class file. Put the name of your class as LanguageDetails.cs and click Add.

Open LanguageDetails.cs and put the following code inside it.

namespace BlazorTranslator.Models
{
    public class LanguageDetails
    {
        public string Name { get; set; }
        public string NativeName { get; set; }
        public string Dir { get; set; }
    }
}

Similarly, add a new class file TextResult.cs and put the following code inside it.

using System;
namespace BlazorTranslator.Models
{
    public class TextResult
    {
        public string Text { get; set; }
        public string Script { get; set; }
    }
}

Add a new class file Translation.cs and put the following code inside it.

namespace BlazorTranslator.Models
{
    public class Translation
    {
        public string Text { get; set; }
        public TextResult Transliteration { get; set; }
        public string To { get; set; }
    }
}

Create a class file DetectedLanguage.cs and put the following code inside it.

namespace BlazorTranslator.Models
{
    public class DetectedLanguage
    {
        public string Language { get; set; }
        public float Score { get; set; }
    }
}

Create a class file TranslationResult.cs and put the following code inside it.

namespace BlazorTranslator.Models
{
    public class TranslationResult
    {
        public DetectedLanguage DetectedLanguage { get; set; }
        public TextResult SourceText { get; set; }
        public Translation[] Translations { get; set; }
    }
}

Finally, create the class file AvailableLanguage.cs and put the following code inside it.

using System.Collections.Generic;

namespace BlazorTranslator.Models
{
    public class AvailableLanguage
    {
      public Dictionary<string, LanguageDetails> Translation { get; set; }
    }
}

Create the Translation service

Right-click on the BlazorTranslator/Data folder and select Add >> Class to add a new class file. Put the name of the file as TranslationService.cs and click on Add. Open TranslationService.cs file and put the following code inside it.

using BlazorTranslator.Models;
using Newtonsoft.Json;
using System;
using System.Net.Http;
using System.Text;
using System.Threading.Tasks;

namespace BlazorTranslator.Data
{
    public class TranslationService
    {
        public async Task<TranslationResult[]> GetTranslatation(string textToTranslate, string targetLanguage)
        {
            string subscriptionKey = "af19d996a3cb4a70a808567aad5bc41a";
            string apiEndpoint = "https://api.cognitive.microsofttranslator.com/";
            string route = $"/translate?api-version=3.0&to={targetLanguage}";
            string requestUri = apiEndpoint + route;
            TranslationResult[] translationResult = await TranslateText(subscriptionKey, requestUri, textToTranslate);
            return translationResult;
        }

        async Task<TranslationResult[]> TranslateText(string subscriptionKey, string requestUri, string inputText)
        {
            object[] body = new object[] { new { Text = inputText } };
            var requestBody = JsonConvert.SerializeObject(body);

            using (var client = new HttpClient())
            using (var request = new HttpRequestMessage())
            {
                request.Method = HttpMethod.Post;
                request.RequestUri = new Uri(requestUri);
                request.Content = new StringContent(requestBody, Encoding.UTF8, "application/json");
                request.Headers.Add("Ocp-Apim-Subscription-Key", subscriptionKey);

                HttpResponseMessage response = await client.SendAsync(request).ConfigureAwait(false);
                string result = await response.Content.ReadAsStringAsync();
                TranslationResult[] deserializedOutput = JsonConvert.DeserializeObject<TranslationResult[]>(result);

                return deserializedOutput;
            }
        }

        public async Task<AvailableLanguage> GetAvailableLanguages()
        {
            string endpoint = "https://api.cognitive.microsofttranslator.com/languages?api-version=3.0&scope=translation";
            var client = new HttpClient();
            using (var request = new HttpRequestMessage())
            {
                request.Method = HttpMethod.Get;
                request.RequestUri = new Uri(endpoint);
                var response = await client.SendAsync(request).ConfigureAwait(false);
                string result = await response.Content.ReadAsStringAsync();

                AvailableLanguage deserializedOutput = JsonConvert.DeserializeObject<AvailableLanguage>(result);

                return deserializedOutput;
            }
        }
    }
}

We have defined a GetTranslatation method which will accept two parameters – the text to translate and the target language. We will set the subscription key for the Azure Translator Text cognitive service and define a variable for the global endpoint for Translator Text. The request URL contains the API endpoint along with the target language.

Inside the TranslateText method, we will create a new HttpRequestMessage. This HTTP request is a Post request. We will pass the subscription key in the header of the request. The Translator Text API returns a JSON object, which will be deserialized to an array of type TranslationResult. The output contains the translated text as well as the language detected for the input text.

The GetAvailableLanguages method will return the list of all the language supported by the Translate Text API. We will set the request URI and create a HttpRequestMessage which will be a Get request. This request URL will return a JSON object which will be deserialized to an object of type AvailableLanguage.

Configuring the Service

To make the service available to the components we need to configure it on the server-side app. Open the Startup.cs file. Add the following line inside the ConfigureServices method of Startup class.

services.AddSingleton<TranslationService>();

Creating the Blazor UI Component

We will add the Razor page in BlazorTranslator/Pages folder. By default, we have “Counter” and “Fetch Data” pages provided in our application. These default pages will not affect our application but for the sake of this tutorial, we will delete fetchdata and counter pages from BlazorTranslator/Pages folder.

Right-click on BlazorTranslator/Pages folder and then select Add >> New Item. An “Add New Item” dialog box will open, select “Visual C#” from the left panel, then select “Razor Component” from the templates panel, put the name as Translator.razor. Click Add. Refer to the image shown below.

Open the Translator.razor file and add the following code at the top.

@page "/translator"
@using BlazorTranslator.Models
@using BlazorTranslator.Data
@inject TranslationService translationServi

We have defined the route for this component. We are also injecting the TranslationService in this component.

Now we will add the following HTML code in this file.

<h3>Multilanguage translator using Microsoft Translator API Cognitive Service</h3>
<hr />

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <select class="form-control" @bind="inputLanguage">
                <option value="">-- Select input language --</option>
                @foreach (KeyValuePair<string, LanguageDetails> lang in LanguageList)
                {
                    <option value="@lang.Key">@lang.Value.Name</option>
                }
            </select>
            <textarea placeholder="Enter text to translate" class="form-control translation-box" rows="5" @bind="@inputText"></textarea>
        </div>
        <div class="col-md-6">
            <select class="form-control" @onchange="SelectLanguage">
                <option value="">-- Select target language --</option>
                @foreach (KeyValuePair<string, LanguageDetails> lang in LanguageList)
                {
                    <option value="@lang.Key">@lang.Value.Name</option>
                }
            </select>
            <textarea disabled class="form-control translation-box" rows="5">@outputText</textarea>
        </div>
    </div>
    <div class="text-center">
        <button class="btn btn-primary btn-lg" @onclick="Translate">Translate</button>
    </div>
</div>

We have defined two dropdown lists one each for input language and the target language. The Azure Translate Text API will detect the input language and we will use that value to populate the dropdown for input language. We have also defined two text areas for the input and the translated text.

Finally, add the following code in the @code section of the page.

@code {
    private TranslationResult[] translations;
    private AvailableLanguage availableLanguages;

    private string outputLanguage { get; set; }
    private string inputLanguage { get; set; }

    string inputText { get; set; }
    string outputText { get; set; }

    private Dictionary<string, LanguageDetails> LanguageList = new Dictionary<string, LanguageDetails>();

    protected override async Task OnInitializedAsync()
    {
        availableLanguages = await translationService.GetAvailableLanguages();
        LanguageList = availableLanguages.Translation;
    }

    private void SelectLanguage(ChangeEventArgs langEvent)
    {
        this.outputLanguage = langEvent.Value.ToString();
    }

    private async Task Translate()
    {
        if (!string.IsNullOrEmpty(outputLanguage))
        {
            translations = await translationService.GetTranslatation(this.inputText, this.outputLanguage);
            outputText = translations[0].Translations[0].Text;
            inputLanguage = translations[0].DetectedLanguage.Language;
        }
    }
}

We are invoking the GetAvailableLanguages method from our service inside the OnInitializedAsync. This OnInitializedAsync is a lifecycle method that will be invoked upon component initialization. This will make sure that the language dropdown will be populated as the page loads.

The SelectLanguage method will be set the outputLanguage for the translation. The Translate method will invoke the GetTranslatation method from the service. We will set the outputText and the language detected for the inputLanguage as returned from the service.

Add styling for the Translator component

Navigate to BlazorTranslator\wwwroot\css\site.css file and put the following style definition inside it.

.translation-box {
    margin: 15px 0px;
}

Adding Link to Navigation menu

The last step is to add the link of our Translator component in the navigation menu. Open BlazorTranslator/Shared/NavMenu.razor file and add the following code into it.

<li class="nav-item px-3">
  <NavLink class="nav-link" href="translator">
    <span class="oi oi-list-rich" aria-hidden="true"></span> Translator
  </NavLink>
</li>

Remove the navigation links for Counter and Fetch-data components as they are not required for this application.

Execution Demo

Press F5 to launch the application. Click on the Translator button on the nav menu in the left. You can perform the multilanguage translation as shown in the image below.

Summary

We have created a Translator Text Cognitive Services resource on Azure. We have used the Translator Text API to create a multilanguage translator using Blazor. This translator supports more than 60 languages for translation. We fetched the list of supported languages for translation from the global API endpoint for Translator Text.

Get the Source code from GitHub and play around to get a better understanding.

Continuous Deployment For Angular App Using Heroku And GitHub

Ankit — Mon, 23 Dec 2019 02:30:00 +0000

Introduction

In this article, we will learn how to host an Angular app on Heroku. We will configure Continuous Deployment (CD) for our application using Heroku and GitHub. This will allow our app to be published automatically whenever we push the new code to the GitHub repository.

Prerequisites

Install the latest version of Angular CLI from here
Install Visual Studio code from here
Download and install Node.js from here

We are going to deploy the Angular application which I have created in my previous articles:

You can get the application source code from GitHub.

What is Continuous Deployment (CD)?

Continuous Deployment is a software development practice that automates the deployment process of the application. Once the developer merges their code to the repository, the build process will kick in, which will execute the automated tests and then deploy the application to the production stage. This is a completely autonomous process and does not require any manual intervention.

What is Heroku?

Heroku is a container-based cloud Platform as a Service (PaaS) that lets companies build, deliver, monitor and scale apps. Developers use Heroku to deploy, manage, and scale modern apps. Heroku claims that their platform is elegant, flexible, and easy to use, offering developers the simplest path to getting their apps to market. It provides support for a variety of languages such as Node, Ruby, Java, PHP, Python, GO, etc. You can read more about Heroku at the official website.

Install Express server

Heroku needs an express server to run our Angular application in production mode. Open a command window in the root folder of the Angular application. Execute the following command to install the express server.

npm install express --save

Now create a new JavaScript file in the root folder of the application and name it as server.js. Open the server.js file and put the following code into it.

const express = require('express');
const path = require('path');

const ngApp = express();

ngApp.use(express.static('./dist/angular-forms-validation'));

ngApp.get('/*', function (request, response) {
    response.sendFile(path.join(__dirname, '/dist/angular-forms-validation/index.html'));
});

ngApp.listen(process.env.PORT || 8080);

When we build an Angular app in production mode, the build package is created in the dist folder of the application. In the code mentioned above, we are configuring the express server to run the Angular application from the dist folder. Theindex.html file will be the start point for our application. The app will listen on the port 8080.

Note:

The file server.js must be created in the root folder of the Angular app.
The name server.js is not mandatory. You can use any name of your choice.

Configuring the package.json file

We will configure the package.json file to make it production ready for Heroku. Follow the steps mentioned below.

Step 1 : Add postinstall script

Add the following lines of code under the scripts section.

"postinstall": "ng build --aot --prod"

This command will build the Angular application using Ahead of Time (AOT) compiler in the production mode.

Step 2 : Update the start script

We will update the start script under the scripts section. Currently, the start script looks like the following.

"start": "ng serve",

Update this script as shown below.

"start": "node server.js",

This command willbe used by Heroku to run our application in production mode using the expressserver.

Step 3 : Add Node and NPM engines

We need to specify the Node and NPM engines which will be used by Heroku to run our application. Get the version of Node and NPM installed in your machine by executing the command shown below.

node -v
npm -v

Refer to the image shown below.

Add the following lines of code specifying the versions of Node and NPM.

  "engines": {
    "node": "12.13.0",
    "npm": "6.12.0"
  }

Finally, the package.json file will look like below. You can also refer to the file on GitHub.

{
  "name": "angular-forms-validation",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build  --aot --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.3",
    "@angular/common": "~8.2.3",
    "@angular/compiler": "~8.2.3",
    "@angular/core": "~8.2.3",
    "@angular/forms": "~8.2.3",
    "@angular/platform-browser": "~8.2.3",
    "@angular/platform-browser-dynamic": "~8.2.3",
    "@angular/router": "~8.2.3",
    "bootstrap": "^4.4.1",
    "express": "^4.17.1",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.0",
    "@angular/cli": "~8.3.0",
    "@angular/compiler-cli": "~8.2.3",
    "@angular/language-service": "~8.2.3",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  },
  "engines": {
    "node": "12.13.0",
    "npm": "6.12.0"
  }
}

Pushing the code to GitHub

Create a new repository on GitHub. Here I have created the repository with name angular-forms-validation. Navigate to the application root folder and open a command window. Execute the following set of commands to commit the code to your repository.

git init
git add .
git commit -m "configure Heroku build"

Get the URL of your repository from GitHub. Here the URL is https://github.com/AnkitSharma-007/angular-forms-validation. Now run the following set of commands to push the code to GitHub. Replace the URL with your own repository URL.

git remote add origin https://github.com/AnkitSharma-007/angular-forms-validation
git push -u origin master

We have successfully pushed the code to GitHub. Now we will configure the Heroku.

Create a new Heroku app

Navigate to https://www.heroku.com/ and signup for Heroku. Login using your credentials and you will be navigated to your personal dashboard. Click on the New button at the top right corner of the dashboard. Select “Create new app” option. Refer to the image below.

On the next page, put a unique name for your app. Choose a region of your choice and click on “Create app” to create a new Heroku app. Refer to the image below.

Important Note:

The name of your app should be globally unique. If your app name is already taken, then you will get an “app not available” error message.
The maximum length allowed for the app name is 30 characters.

Connect your Heroku app to GitHub

Once the Heroku app is created successfully, you will be navigated to the app dashboard page. Under the “Deploy” tab, click on the “GitHub” option under the “Deployment method” section. Then click on the “Connect to GitHub” button at the bottom. Refer to the image shown below.

Upon successful connection with GitHub, it will ask you to connect to a repository. Enter the name of your repository and click on search. Once the name of your repository appears, click on the Connect button. Refer to the image shown below.

Configure the Heroku app for continuous deployment

To enable yourHeroku app for CD, select the master branch under the “Automatic deploys”section. Click on the “Enable Automatic Deploys” button. If you have configuredany integration service for your repo then select the “Wait for CI to passbefore deploy”.

Under the Manual deploy section, select the master branch and click on the “Deploy Branch” button. This will deploy the current state of the master branch.

Refer to the image shown below.

After you click on the “Deploy Branch” button, Heroku will start building and deploying your app. You can see the output build window in the Manual deploy section. Refer to the image shown below.

If the deployment is successful, you will get a success message as “Your app was successfully deployed”. Click on the “view” button to open the app in a new tab. You can see the screen as shown below.

You can access the app which we have deployed here at https://ng-forms-validation.herokuapp.com/

The manual deploy is done only while deploying the app for the first time. After the first deployment, whenever we update the code and push it to the GitHub repository, the automatic deployment will kick-off. You can monitor the deployment progress in the “Activity” tab of your app dashboard.

Summary

We learned how to configure an Angular application for deployment on Heroku. We have also configured continuous deployment for our application on Heroku using GitHub. Continuous deployment is a software development practice that allows automatic deployments whenever a new code is pushed into the repository. This is a completely autonomous process and doesn’t require any manual intervention.

Template-Driven Form Validation In Angular

Ankit — Tue, 17 Dec 2019 02:30:00 +0000

In this article, we will learn about validations in the template-driven form in Angular. We will create a simple user registration form and implement some inbuilt validations on it. Along with the inbuilt validations, we will also implement some custom validations to the template-driven form. We will consider the following custom validations for this demo.

Checking for user name availability
Password pattern validation
Match the password entered in two different fields

Take a look at the application in action.

Prerequisites

Install Visual Studio code from here
Install the latest version of Angular CLI from here

Source Code

Get the source code from GitHub.

Create the Angular app

Navigate to the folder where you want to create your project file. Open a command window and run the command shown below.

ng new angular-forms-validation --routing=false --style=scss

We are specifying the command to create a new Angular application. The option to create the routing module is set to false and style files extension is set to scss. This command will create the Angular project with name as angular-forms-validation.

Change directory to the new project and open the project in VS Code using the set of the command shown below:

cd angular-forms-validation
code .

Install Bootstrap

Run the following command to install the bootstrap.

npm install bootstrap --save

Add the following import definition in styles.scss file.

@import "~bootstrap/dist/css/bootstrap.css";

Create the validation service

Run the following command to create a new service.

ng g s services\customvalidation

This command will create a folder named services having two files inside it – customvalidation.service.ts and customvalidation.service.spec.ts. Open customvalidation.service.ts and put the following code inside it.

import { Injectable } from '@angular/core';
import { ValidatorFn, AbstractControl } from '@angular/forms';
import { FormGroup } from '@angular/forms';

@Injectable({
  providedIn: 'root'
})
export class CustomvalidationService {

  patternValidator(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
      if (!control.value) {
        return null;
      }
      const regex = new RegExp('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$');
      const valid = regex.test(control.value);
      return valid ? null : { invalidPassword: true };
    };
  }

  MatchPassword(password: string, confirmPassword: string) {
    return (formGroup: FormGroup) => {
      const passwordControl = formGroup.controls[password];
      const confirmPasswordControl = formGroup.controls[confirmPassword];

      if (!passwordControl || !confirmPasswordControl) {
        return null;
      }

      if (confirmPasswordControl.errors && !confirmPasswordControl.errors.passwordMismatch) {
        return null;
      }

      if (passwordControl.value !== confirmPasswordControl.value) {
        confirmPasswordControl.setErrors({ passwordMismatch: true });
      } else {
        confirmPasswordControl.setErrors(null);
      }
    }
  }

  userNameValidator(userControl: AbstractControl) {
    return new Promise(resolve => {
      setTimeout(() => {
        if (this.validateUserName(userControl.value)) {
          resolve({ userNameNotAvailable: true });
        } else {
          resolve(null);
        }
      }, 1000);
    });
  }

  validateUserName(userName: string) {
    const UserList = ['ankit', 'admin', 'user', 'superuser'];
    return (UserList.indexOf(userName) > -1);
  }
}

The method patternValidator is used to validate the password pattern in our form. The parameter for this method is of type AbstractControl which is a base class for the FormControl. We will use a regular expression to validate the password. This regular expression will check for the following four conditions in the password.

The password should be a minimum of eight characters long.
It should have at least one lower case letter
It should have at least one upper case letter
It should have at least one number

If the password fails the regex check, we will set the invalidPassword property to true.

The method MatchPassword is used to compare the passwords in two fields. This method will accept two parameters of type string. These parameters represent the name of the fields to be matched. We will get the FormControl for these two fields and then match the values in them. If the values do not match, we will set the passwordMismatch property to true.

The method userNameValidator is used to verify if the username is already taken or not. This method will accept a parameter of type AbstractControl. We will check if the value of this field is present in a static array, UserList. If the value entered by the user is already present, we will set the userNameNotAvailable property to true. We are using the setTimeout function to invoke this check every two seconds. This will ensure that the error will be thrown after two seconds from the time the user stops typing in the field.

For the sake of simplicity of this article, we are using a static array to search for the availability of user names. Ideally, it should be a service call to the server to search the value in a database.

Create the User model

Create a new folder called models inside the src/app folder. Add a new file called user.ts inside the models folder. Put the following code in the user.ts file.

export class User {
    public name: string;
    public email: string;
    public username: string;
    public password: string;
    public confirmPassword: string;
}

Create custom directives

We will create custom directives to implement custom validators for template-driven forms.

Run the command shown below to create the passwordPattern directive

ng g d directives\passwordPattern

This command will create a folder named directives having two files inside it – passwordPattern.directive.ts and passwordPattern.directive.spec.ts. Open passwordPattern.directive.ts and put the following code inside it.

import { Directive } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl } from '@angular/forms';
import { CustomvalidationService } from '../services/customvalidation.service';

@Directive({
  selector: '[appPasswordPattern]',
  providers: [{ provide: NG_VALIDATORS, useExisting: PasswordPatternDirective, multi: true }]
})
export class PasswordPatternDirective implements Validator {

  constructor(private customValidator: CustomvalidationService) { }

  validate(control: AbstractControl): { [key: string]: any } | null {
    return this.customValidator.patternValidator()(control);
  }
}

This directive is used to validate the password pattern. We will implement the Validator interface on the class PasswordPatternDirective. We will override the validate method which accepts a parameter of type AbstractControl i.e. the control we want to validate. We will then invoke the patternValidator method from the service.

Run the command shown below to create matchPassword directive.

ng g d directives\matchPassword

Open matchPassword.directive.ts and put the following code inside it.

import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, ValidationErrors, FormGroup } from '@angular/forms';
import { CustomvalidationService } from '../services/customvalidation.service';

@Directive({
  selector: '[appMatchPassword]',
  providers: [{ provide: NG_VALIDATORS, useExisting: MatchPasswordDirective, multi: true }]
})
export class MatchPasswordDirective implements Validator {
  @Input('appMatchPassword') MatchPassword: string[] = [];

  constructor(private customValidator: CustomvalidationService) { }

  validate(formGroup: FormGroup): ValidationErrors {
    return this.customValidator.MatchPassword(this.MatchPassword[0], this.MatchPassword[1])(formGroup);
  }
}

This directive is used to validate if the password entered in two fields are matching or not. This directive will accept an input of the type string array, which contains the fields to match. We will override the validate method and pass the parameter of type FormGroup. We will then invoke the MatchPassword method from the service. Run the command shown below to create validateUserName directive.

ng g d directives\validateUserName

Open validateUserName.directive.ts and put the following code inside it.

import { Directive, forwardRef } from '@angular/core';
import { Validator, AbstractControl, NG_ASYNC_VALIDATORS } from '@angular/forms';
import { CustomvalidationService } from '../services/customvalidation.service';
import { Observable } from 'rxjs';

@Directive({
  selector: '[appValidateUserName]',
  providers: [{ provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => ValidateUserNameDirective), multi: true }]

})
export class ValidateUserNameDirective implements Validator {

  constructor(private customValidator: CustomvalidationService) { }

  validate(control: AbstractControl): Promise<{ [key: string]: any }> | Observable<{ [key: string]: any }> {
    return this.customValidator.userNameValidator(control);
  }
}

This directive is used to validate the availability of the user name. We will override the validate method and pass the parameter of type AbstractControl. We will then invoke the userNameValidator method from the service. This method will return a promise.

Create the template-driven form component

Run the command shown below to create the template-driven-form component.

ng g c template-driven-form

Open template-driven-form.component.ts and put the following code in it.

import { Component } from '@angular/core';
import { User } from '../models/user';

@Component({
  selector: 'app-template-driven-form',
  templateUrl: './template-driven-form.component.html',
  styleUrls: ['./template-driven-form.component.scss']
})
export class TemplateDrivenFormComponent {

  userModal = new User();

  constructor() { }

  onSubmit() {
    alert('Form Submitted succesfully!!!\n Check the values in browser console.');
    console.table(this.userModal);
  }
}

We have created an object userModal of type User. We will bind the form fields with the property of this object. The onSubmit method will show the success message on the screen and print the content of the form on the console.

Open template-driven-form.component.html and put the following code in it.

<div class="container">
    <div class="row">
        <div class="col-md-8 mx-auto">
            <div class="card">
                <div class="card-header">
                    <h3>Angular Template-driven Form</h3>
                </div>
                <div class="card-body">
                    <form class="form" #registerForm="ngForm" [appMatchPassword]="['password', 'confirmPassword']"
                        (ngSubmit)="registerForm.form.valid && onSubmit()" novalidate>
                        <div class=" form-group">
                            <label>Name</label>
                            <input type="text" class="form-control" [(ngModel)]="userModal.name" name="name"
                                #name="ngModel" required>
                            <span class="text-danger"
                                *ngIf="(name.touched || registerForm.submitted) && name.errors?.required">
                                Name is required
                            </span>
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <input type="text" class="form-control" [(ngModel)]="userModal.email" name="email"
                                #email="ngModel" required email>
                            <span class="text-danger"
                                *ngIf="(email.touched || registerForm.submitted) && email.errors?.required">
                                Email is required
                            </span>
                            <span class="text-danger" *ngIf="email.touched && email.errors?.email">
                                Enter a valid email address
                            </span>
                        </div>
                        <div class="form-group">
                            <label>User Name</label>
                            <input type="text" class="form-control" [(ngModel)]="userModal.username" name="username"
                                #username="ngModel" appValidateUserName required>
                            <span class="text-danger"
                                *ngIf="(username.touched || registerForm.submitted) && username.errors?.required">
                                User Name is required
                            </span>
                            <span class="text-danger" *ngIf="username.touched && username.errors?.userNameNotAvailable">
                                User Name not available
                            </span>
                        </div>
                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" class="form-control" [(ngModel)]="userModal.password" name="password"
                                #password="ngModel" appPasswordPattern required>
                            <span class="text-danger"
                                *ngIf="(password.touched || registerForm.submitted) && password.errors?.required">
                                Password is required
                            </span>
                            <span class="text-danger" *ngIf="password.touched && password.errors?.invalidPassword">
                                Password should have minimum 8 characters, at least 1 uppercase letter, 1 lowercase
                                letter and 1 number
                            </span>
                        </div>
                        <div class="form-group">
                            <label>Confirm Password</label>
                            <input type="password" class="form-control" [(ngModel)]="userModal.confirmPassword"
                                name="confirmPassword" #confirmPassword="ngModel" required>
                            <span class="text-danger"
                                *ngIf="(confirmPassword.touched || registerForm.submitted) && confirmPassword.errors?.required">
                                Confirm Password is required
                            </span>
                            <span class="text-danger"
                                *ngIf="confirmPassword.touched && confirmPassword.errors?.passwordMismatch">
                                Passwords doesnot match
                            </span>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-success">Register</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

We will create a template-driven form and use the Bootstrap card for styling. The card header will contain a title whereas the card body will have the form fields. We will use the appMatchPassword directive on our form and pass the password and confirmPassword fields for validation. The ngModel property is used to bind the form control to the model. For validating the user name availability we will use the appValidateUserName directive on the username field. Similarly, we will use the appPasswordPattern directive on the password field to validate the password pattern. We will check for the errors in the form controls and then display the appropriate validation error message on the screen.

Create the nav-bar component

Run the commandshown below to create the nav-bar component.

ng g c nav-bar

Open nav-bar.component.html and put the following code in it.

<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" [routerLink]='["/"]'>Form Validation Demo</a>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" [routerLink]='["/template-form"]'>Template Form</a>
            </li>
        </ul>
    </div>
</nav>

Here we are adding the navigation link to the template-driven form component.

Update the app component

Open the app.component.html file and put the following code in it.

<app-nav-bar></app-nav-bar>
<div class="container">
  <router-outlet></router-outlet>
</div>

Update the App module

We will import the forms module and also set up the routing for our application in the app module. Add the following code in the app.module.ts file. You can refer to GitHub for the complete source code of this file.

import { RouterModule } from '@angular/router';
import { FormsModule } from  '@angular/forms';

@NgModule({
  ...    
  imports: [
    ...
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: TemplateDrivenFormComponent },
      { path: 'template-form', component: TemplateDrivenFormComponent }
    ]),
  ],
})

Execution demo

We will use the following command to start the webserver.

ng serve -o

This command will launch the application in your default browser at http://localhost:4200/. You can perform all the form validations which we have discussed here. This application is also hosted at https://ng-forms-validation.herokuapp.com/. Navigate to the link and play around for a better understanding.

Summary

We have created a sample user registration form using the template-driven form approach in Angular. We have implemented the inbuilt validations as well as custom validations to the form. The Bootstrap library is used to style the form. Get the source code from GitHub and play around for a better understanding.

Reactive Form Validation in Angular

Ankit — Thu, 12 Dec 2019 02:30:00 +0000

Introduction

In this article, we will learn about validations in the reactive form in Angular. We will create a simple user registration form and implement some inbuilt validations on it. Along with the inbuilt validations, we will also implement some custom validations to the reactive form. We will consider the following custom validations for this demo.

Checking for user name availability
Password pattern validation
Match the password entered in two different fields

Take a look at the application in action.

Prerequisites

Install Visual Studio code from here
Install the latest version of Angular CLI from here

Source Code

Get the source code from GitHub.

Create the Angular app

Navigate to the folder where you want to create your project file. Open a command window and run the command shown below.

ng new angular-forms-validation --routing=false --style=scss

We are specifying the command to create a new Angular application. The option to create the routing module is set to false and style files extension is set to scss. This command will create the Angular project with name as angular-forms-validation.

Change directory to the new project and open the project in VS Code using the set of the command shown below:

cd angular-forms-validation 
code .

Install Bootstrap

Run the following command to install the Bootstrap library.

npm install bootstrap --save

Add the following import definition in styles.scss file.

@import "~bootstrap/dist/css/bootstrap.css";

Create the validation service

Run the following command to create a new service.

ng g s services\customvalidation

This command will create a folder named services having two files inside it – customvalidation.service.ts and customvalidation.service.spec.ts. Open the customvalidation.service.ts file and put the following code inside it.

import { Injectable } from '@angular/core';
import { ValidatorFn, AbstractControl } from '@angular/forms';
import { FormGroup } from '@angular/forms';

@Injectable({
  providedIn: 'root'
})
export class CustomvalidationService {

  patternValidator(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
      if (!control.value) {
        return null;
      }
      const regex = new RegExp('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$');
      const valid = regex.test(control.value);
      return valid ? null : { invalidPassword: true };
    };
  }

  MatchPassword(password: string, confirmPassword: string) {
    return (formGroup: FormGroup) => {
      const passwordControl = formGroup.controls[password];
      const confirmPasswordControl = formGroup.controls[confirmPassword];

      if (!passwordControl || !confirmPasswordControl) {
        return null;
      }

      if (confirmPasswordControl.errors && !confirmPasswordControl.errors.passwordMismatch) {
        return null;
      }

      if (passwordControl.value !== confirmPasswordControl.value) {
        confirmPasswordControl.setErrors({ passwordMismatch: true });
      } else {
        confirmPasswordControl.setErrors(null);
      }
    }
  }

  userNameValidator(userControl: AbstractControl) {
    return new Promise(resolve => {
      setTimeout(() => {
        if (this.validateUserName(userControl.value)) {
          resolve({ userNameNotAvailable: true });
        } else {
          resolve(null);
        }
      }, 1000);
    });
  }

  validateUserName(userName: string) {
    const UserList = ['ankit', 'admin', 'user', 'superuser'];
    return (UserList.indexOf(userName) > -1);
  }
}

The method patternValidator is used to validate the password pattern in our form. The parameter for this method is of type AbstractControl which is a base class for the FormControl. We will use a regular expression to validate the password. We will validate the following four conditions using the regular expression:

The password should be a minimum of eight characters long.
It has at least one lower case letter.
It has at least one upper case letter.
It has at least one number.

If the password fails the regex check, we will set the invalidPassword property to true.

The method userNameValidator is used to verify if the username is already taken or not. This method will accept a parameter of type AbstractControl. We will check if the value of this field is present in a static array, UserList. If the value entered by the user is already present, we will set the userNameNotAvailable property to true. We are using the setTimeout function to invoke this check every two seconds. This will ensure that the error will be thrown after two seconds from the time the user stops typing in the field.

For the sake of simplicity of this article, we are using a static array to search for the availability of user names. Ideally, it should be a service call to the server to search the value in a database.

Create the reactive form component

Run the following command to create the reactive-form component.

ng g c reactive-form

Open reactive-form.component.ts and put the following code in it.

import { Component, OnInit } from '@angular/core';
import { Validators, FormGroup, FormBuilder } from '@angular/forms';
import { CustomvalidationService } from '../services/customvalidation.service';

@Component({
  selector: 'app-reactive-form',
  templateUrl: './reactive-form.component.html',
  styleUrls: ['./reactive-form.component.scss']
})
export class ReactiveFormComponent implements OnInit {

  registerForm: FormGroup;
  submitted = false;

  constructor(
    private fb: FormBuilder,
    private customValidator: CustomvalidationService
  ) { }

  ngOnInit() {
    this.registerForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      username: ['', [Validators.required], this.customValidator.userNameValidator.bind(this.customValidator)],
      password: ['', Validators.compose([Validators.required, this.customValidator.patternValidator()])],
      confirmPassword: ['', [Validators.required]],
    },
      {
        validator: this.customValidator.MatchPassword('password', 'confirmPassword'),
      }
    );
  }

  get registerFormControl() {
    return this.registerForm.controls;
  }

  onSubmit() {
    this.submitted = true;
    if (this.registerForm.valid) {
      alert('Form Submitted succesfully!!!\n Check the values in browser console.');
      console.table(this.registerForm.value);
    }
  }
}

We will create a variable registerForm of type FormGroup. In the ngOnInit method, we will set the controls for the form using the FormBuilder class. All the fields are set as a required field for this form. We will invoke the userNameValidator method of the service using the bind function. For the password field, we will use the compose method to merge in multiple validators into a single function. We will also invoke the MatchPassword method and pass the name of the password and confirmPassword form controls as parameters.

The registerFormControl property will return the form controls of the form. The onSubmit method will print the content of the form on the console if the form is valid and submitted successfully.

Open reactive-form.component.html and put the following code in it.

<div class="container">
    <div class="row">
        <div class="col-md-8 mx-auto">
            <div class="card">
                <div class="card-header">
                    <h3>Angular Reactive Form</h3>
                </div>
                <div class="card-body">
                    <form class="form" [formGroup]="registerForm" (ngSubmit)="onSubmit()">
                        <div class="form-group">
                            <label>Name</label>
                            <input type="text" class="form-control" formControlName="name">
                            <span class="text-danger"
                                *ngIf="(registerFormControl.name.touched || submitted) && registerFormControl.name.errors?.required">
                                Name is required
                            </span>
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <input type="text" class="form-control" formControlName="email">
                            <span class="text-danger"
                                *ngIf="(registerFormControl.email.touched || submitted) && registerFormControl.email.errors?.required">
                                Email is required
                            </span>
                            <span class="text-danger"
                                *ngIf="registerFormControl.email.touched && registerFormControl.email.errors?.email">
                                Enter a valid email address
                            </span>
                        </div>
                        <div class="form-group">
                            <label>User Name</label>
                            <input type="text" class="form-control" formControlName="username">
                            <span class="text-danger"
                                *ngIf="(registerFormControl.username.touched || submitted) && registerFormControl.username.errors?.required">
                                User Name is required
                            </span>
                            <span class="text-danger"
                                *ngIf="registerFormControl.username.touched && registerFormControl.username.errors?.userNameNotAvailable">
                                User Name is not available
                            </span>
                        </div>
                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" class="form-control" formControlName="password">
                            <span class="text-danger"
                                *ngIf="(registerFormControl.password.touched || submitted) && registerFormControl.password.errors?.required">
                                Password is required
                            </span>
                            <span class="text-danger"
                                *ngIf="registerFormControl.password.touched && registerFormControl.password.errors?.invalidPassword">
                                Password should have minimum 8 characters, at least 1 uppercase letter, 1 lowercase
                                letter and 1 number
                            </span>
                        </div>
                        <div class="form-group">
                            <label>Confirm Password</label>
                            <input type="password" class="form-control" formControlName="confirmPassword">
                            <span class="text-danger"
                                *ngIf="(registerFormControl.confirmPassword.touched || submitted)&& registerFormControl.confirmPassword.errors?.required">
                                Confirm Password is required
                            </span>
                            <span class="text-danger"
                                *ngIf="registerFormControl.confirmPassword.touched && registerFormControl.confirmPassword.errors?.passwordMismatch">
                                Passwords doesnot match
                            </span>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-success">Register</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

We will create a reactive form and use the Bootstrap card for styling. The card header will contain a title whereas the card body will have the form fields. We will bind the formGroup property of the <form> tag to the name of our form which is registerForm. The onSubmit method will be invoked on submitting the form. We will also bind the formControlName property of each input field to the control name of our FormGroup. We will check for the errors in the form controls and then display the appropriate validation error message on the screen.

Create the nav-bar component

Run the following command to create the nav-bar component.

ng g c nav-bar

Open nav-bar.component.html and put the following code in it.

<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" [routerLink]='["/"]'>Form Validation Demo</a>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" [routerLink]='["/reactive-form"]'>Reactive Form</a>
            </li>
        </ul>
    </div>
</nav>

We are adding the navigation link to the reactive form component in the nav bar.

Update the app component

Open the app.component.html file and put the following code in it.

<app-nav-bar></app-nav-bar>
<div class="container">
  <router-outlet></router-outlet>
</div>

Update the App module

Add the following code in the app.module.ts file. We will import the forms module and define the routing for our application. You can refer to GitHub for the complete source code of this file.

import { RouterModule } from '@angular/router';
import { ReactiveFormsModule } from  '@angular/forms';

@NgModule({
  ...    
  imports: [
    ...
    ReactiveFormsModule,
    RouterModule.forRoot([
      { path: '', component: ReactiveFormComponent },
      { path: 'reactive-form', component: ReactiveFormComponent }
    ]),
  ],
})

Execution demo

We will use the following command to start the webserver.

ng serve -o

Summary

We have created a sample user registration form using the reactive form approach in Angular. We have implemented the inbuilt validations as well as custom validations to the form. The Bootstrap library is used to style the form. Get the source code from GitHub and play around for a better understanding.

Policy-Based Authorization In Angular Using JWT

Ankit — Mon, 25 Nov 2019 05:31:00 +0000

Introduction

In this article, we will create a web application using ASP.NET Core and Angular. We will then implement authentication and policy-based authorization in the application with the help of JWT. The web application will have two roles – Admin and User. The application will have role-based access for each role. We will learn how to configure and validate a JWT.

Take a look at the final application.

Prerequisites

Install the latest .NET Core 3.0 SDK from here
Install the latest version of Visual Studio 2019 from here

Source Code

Get the source code from GitHub

What is JWT?

JWT stands for JSON Web Token. It is an open standard that defines a compact and self-contained way to securely transfer the data between two parties. JWT is digitally signed hence it can be verified and trusted. JWT is recommended to be used in a scenario when we need to implement Authorization or information exchange. To explore JWT in-depth please refer to the official website of JWT.

Creating the ASP.NET Core application

Open Visual Studio 2019 and click on “Create a new Project”. A “Create a new Project” dialog will open. Select “ASP.NET Core Web Application” and click on Next. Refer to the image shown below.

Now you will be at “Configure your new project” screen, provide the name for your application as ngWithJWT and click on create. You will be navigated to “Create a new ASP.NET Core web application” screen. Select “.NET Core” and “ASP.NET Core 3.0” from the dropdowns on the top. Then, select “Angular” project template and click on Create. Refer to the image shown below.

This will create our project. The folder structure of our application is shown below.

The ClientApp folder contains the Angular code for our application. The Controllers folders will contain our API controllers. The angular components are present inside the ClientApp\src\app folder. The default template contains few Angular components. These components won’t affect our application, but for the sake of simplicity, we will delete fetchdata and counter folders from ClientApp/app/components folder. Also, remove the reference for these two components from the app.module.ts file.

Adding the Model to the Application

Right-click on the project and select Add >> New Folder. Name the folder as Models. Now right-click on the Models folder and select Add >> class. Name the class file as User.cs. This file will contain the User model. Put the following code in this class.

using System;

namespace ngWithJwt.Models
{
    public class User
    {
        public string UserName { get; set; }
        public string FirstName { get; set; }
        public string Password { get; set; }
        public string UserType { get; set; }
    }
}

Similarly, add a new class and name it Policies.cs. This class will define the policies for role-based authorization. Put the following code into it.

using Microsoft.AspNetCore.Authorization;
using System;
namespace ngWithJwt.Models
{
    public static class Policies
    {
        public const string Admin = "Admin";
        public const string User = "User";
        public static AuthorizationPolicy AdminPolicy()
        {
            return new AuthorizationPolicyBuilder().RequireAuthenticatedUser().RequireRole(Admin).Build();
        }
        public static AuthorizationPolicy UserPolicy()
        {
            return new AuthorizationPolicyBuilder().RequireAuthenticatedUser().RequireRole(User).Build();
        }
    }
}

We have also created two policies for authorization. The AdminPolicy method will check for the “Admin” role while validating a request. Similarly, the UserPolicy method will check for the “User” role while validating the request. We will register both of these policies in the ConfigureServices method of Startup.cs file later in this article.

Configure appsettings.json

Add the following lines in appsettings,json file.

"Jwt": {
  "SecretKey": "KqcL7s998JrfFHRP",
  "Issuer": "https://localhost:5001/",
  "Audience": "https://localhost:5001/"
}

Here we have defined a JSON config for the secret key to be used for encryption. We have also defined the issuer and audience for our JWT. You can use the localhost URL as the value for these properties.

We will be using HmacSha256 as our encryption algorithm for JWT. This algorithm requires a key size of 128 bits or 16 bytes. Hence make sure that your key must satisfy this criterion, otherwise, you will get a run time error .

Install NuGet package

We will install the AspNetCore.Authentication.JwtBearer NuGet package to configure ASP.NET Core middleware for JWT authentication and authorization. Navigate to NuGet gallery page for this package. Select the version of .NET Core 3 from the “Version History”. Copy the command from the “package manager” tab. Run this command in the NuGet package manager console of our application. For this application, we are using .NET Core 3.0.0. Therefore, we will run the following command in the package manager console of our application.

Install-Package Microsoft.AspNetCore.Authentication.JwtBearer -Version 3.0.0

Refer to the image below.

Adding the Login Controller

We will add a Login Controller to our application which will handle the Login request from the user. Right-click on the Controllers folder and select Add >> New Item. An “Add New Item” dialog box will open. Select Web from the left panel, then select “API Controller Class” from templates panel and put the name as LoginController.cs. Click on Add. Refer to the image below.

Open LoginController.cs file and put the following code into it.

using System;
using System.Collections.Generic;
using System.IdentityModel.Tokens.Jwt;
using System.Linq;
using System.Security.Claims;
using System.Text;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.IdentityModel.Tokens;
using ngWithJwt.Models;

namespace ngWithJwt.Controllers
{
    [Produces("application/json")]
    [Route("api/[controller]")]
    public class LoginController : Controller
    {
        private readonly IConfiguration _config;

        private List<User> appUsers = new List<User>
        {
            new User {  FirstName = "Admin",  UserName = "admin", Password = "1234", UserType = "Admin" },
            new User {  FirstName = "Ankit",  UserName = "ankit", Password = "1234", UserType = "User" }
        };

        public LoginController(IConfiguration config)
        {
            _config = config;
        }

        [HttpPost]
        [AllowAnonymous]
        public IActionResult Login([FromBody]User login)
        {
            IActionResult response = Unauthorized();
            User user = AuthenticateUser(login);
            if (user != null)
            {
                var tokenString = GenerateJWT(user);
                response = Ok(new
                {
                    token = tokenString,
                    userDetails = user,
                });
            }
            return response;
        }

        User AuthenticateUser(User loginCredentials)
        {
            User user = appUsers.SingleOrDefault(x => x.UserName == loginCredentials.UserName && x.Password == loginCredentials.Password);
            return user;
        }

        string GenerateJWT(User userInfo)
        {
            var securityKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(_config["Jwt:SecretKey"]));
            var credentials = new SigningCredentials(securityKey, SecurityAlgorithms.HmacSha256);

            var claims = new[]
            {
                new Claim(JwtRegisteredClaimNames.Sub, userInfo.UserName),
                new Claim("firstName", userInfo.FirstName.ToString()),
                new Claim("role",userInfo.UserType),
                new Claim(JwtRegisteredClaimNames.Jti, Guid.NewGuid().ToString()),
            };

            var token = new JwtSecurityToken(
                issuer: _config["Jwt:Issuer"],
                audience: _config["Jwt:Audience"],
                claims: claims,
                expires: DateTime.Now.AddMinutes(30),
                signingCredentials: credentials
            );
            return new JwtSecurityTokenHandler().WriteToken(token);
        }
    }
}

Here we have created a list of users called appUsers. We will use this list to verify user credentials. We are using a hard-coded list for simplicity. Ideally, we should store the user credentials in the database and make a DB call to verify the details. The Login method will receive the login details of the user and then verify it by calling the AuthenticateUser method. The AuthenticateUser method will check if the user details exist in the user list appUsers. If the user details exist, then the method will return an object of type User else it will return null. If the user details are verified successfully, we will invoke the GenerateJWT method.

The GenerateJWT method will configure the JWT for our application. We are using HmacSha256 as our encryption algorithm. We will also create claims to be sent as payload with our JWT. The claims will contain info about the user such as UserName, FirstName, and UserType. We will use this information on the client app. In the end, we will create the JWT by specifying details such as issuer, audience, claims, expire and signingCredentials. We are setting the expiry time as 30 mins from the time of the creation of token. We will send the JWT token back to the client with an OK response. If the user details are invalid, we will send an Unauthorized response.

Configuring Startup.cs file

We will configure the request pipeline for the application in the startup.cs file. This will handle the incoming requests for our application. We will add the following code snippet in ConfigureServices method. You can also check the full method definition on GitHub.

public void ConfigureServices(IServiceCollection services)
{
    services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddJwtBearer(options =>
    {
        options.RequireHttpsMetadata = false;
        options.SaveToken = true;
        options.TokenValidationParameters = new TokenValidationParameters
        {
            ValidateIssuer = true,
            ValidateAudience = true,
            ValidateLifetime = true,
            ValidateIssuerSigningKey = true,
            ValidIssuer = Configuration["Jwt:Issuer"],
            ValidAudience = Configuration["Jwt:Audience"],
            IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(Configuration["Jwt:SecretKey"])),
            ClockSkew = TimeSpan.Zero
        };
        services.AddCors();
    });

    services.AddAuthorization(config =>
    {
        config.AddPolicy(Policies.Admin, Policies.AdminPolicy());
        config.AddPolicy(Policies.User, Policies.UserPolicy());
    });

...
  Existing code in the method.
..
}

We are adding the JWT authentication scheme using the AddAuthentication method. We have provided the parameters to validate the JWT. The description for each parameter is as shown below:

ValidateIssuer = true: It will verify if the issuer data available in JWT is valid.
ValidateAudience = true: It will verify if the audience data available in JWT is valid.
ValidateLifetime = true: It will verify if the token has expired or not
ValidateIssuerSigningKey = true: It will verify if the signing key is valid and trusted by the server.
ValidIssuer: A string value that represents a valid issuer that will be used to check against the token’s issuer We will use the same value as we used while generating JWT.
ValidAudience: A string value that represents a valid audience that will be used to check against the token’s audience. We will use the same value which we used while generating JWT.
IssuerSigningKey: The secure key used to sign the JWT.
ClockSkew: It will set the clock skew to apply when validating the expiry time.

The default value for ClockSkew is 300 seconds i.e. 5 mins. This means that a default value of 5 mins will be added to the expiry time of JWT. E.g. in our case we have set the expiry time as 30 mins but actually it will be 30 + 5 = 35 mins. Hence, we have set the ClockSkew to zero so that the expiry time of JWT will remain the same as we set while generating it.

We will register our authorization policies in the ConfigureServices method. The extension method AddAuthorization is used to add authorization policy services. To apply these policies, we will use the Authorize attribute on any controller or endpoint we want to secure.

To enable authentication and authorization in our application, we will add the UseAuthentication and UseAuthorization extension methods in the Configure method of Startup class. The code snippet is shown below. You can also check the full method definition on GitHub.

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    ...
    // Existing code
    ...

    if (!env.IsDevelopment())
    {
        app.UseSpaStaticFiles();
    }
    app.UseRouting();

    app.UseAuthentication();
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller}/{action=Index}/{id?}");
    });

    ...
    // Existing code
    ...
}

Adding the User Controller

We will add a user controller to handle all user-specific requests. Add a new API controller class, UserController.cs and put the following code into it.

using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using ngWithJwt.Models;

namespace ngWithJwt.Controllers
{
    [Produces("application/json")]
    [Route("api/[controller]")]
    public class UserController : Controller
    {
        [HttpGet]
        [Route("GetUserData")]
        [Authorize(Policy = Policies.User)]
        public IActionResult GetUserData()
        {
            return Ok("This is an normal user");
        }

        [HttpGet]
        [Route("GetAdminData")]
        [Authorize(Policy = Policies.Admin)]
        public IActionResult GetAdminData()
        {
            return Ok("This is an Admin user");
        }
    }
}

We have defined two methods, one for each role. Both the method will return a simple string to the client. We are using the Authorize attribute with the policy name to implement policy-based authorization to our controller methods.

Working on the Client side of the application

The code for the client-side is available in the ClientApp folder. We will use Angular CLI to work with the client code.

Using Angular CLI is not mandatory. I am using Angular CLI here as it is user-friendly and easy to use. If you don’t want to use CLI then you can create the files for components and services manually.

Install Angular CLI

You can skip this step if Angular CLI is already installed in your machine. Open a command window and execute the following command to install angular CLI in your machine.

npm install -g @angular/CLI

After the Angular CLI is installed successfully, navigate to ngWithJWT\ClientApp folder and open a command window. We will execute all our Angular CLI commands in this window.

Create the models

Create a folder called models inside the ClientApp\src\app folder. Now we will create a file user.ts in the models folder. Put the following code in it.

export class User {
    userName: string;
    firstName: string;
    isLoggedIn: boolean;
    role: string;
}

Similarly, create another file inside the models folder called roles.ts. This file will contain an enum, which will define roles for our application. Put the following code in it.

export enum UserRole {
    Admin = 'Admin',
    User = 'User'
}

Create the User Service

We will create an Angular service which will convert the Web API response to JSON and pass it to our component. Run the following command.

ng g s services\user

This command will create a folder with name services and then create the following two files inside it.

user.service.ts – the service class file.
user.service.spec.ts – the unit test file for service.

Open user.service.ts file and put the following code inside it.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  myAppUrl = '';

  constructor(private http: HttpClient) {
  }

  getUserData() {
    return this.http.get('/api/user/GetUserData').pipe(map(result => result));
  }

  getAdminData() {
    return this.http.get('/api/user/GetAdminData').pipe(map(result => result));
  }
}

We have defined two methods here to invoke our API endpoints. The method getUserData will invoke the GetUserData method from the User Controller to fetch the user data. The getAdminData method will invoke the GetAdminData method from the User Controller to fetch the Admin data.

Create the Auth Service

Run the following command to create the auth service class.

ng g s services\auth

Open auth.service.ts and put the following code inside it.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject } from 'rxjs';
import { map } from 'rxjs/operators';
import { Router } from '@angular/router';
import { User } from '../models/user';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  userData = new BehaviorSubject<User>(new User());

  constructor(private http: HttpClient, private router: Router) { }

  login(userDetails) {
    return this.http.post<any>('/api/login', userDetails)
      .pipe(map(response => {
        localStorage.setItem('authToken', response.token);
        this.setUserDetails();
        return response;
      }));
  }

  setUserDetails() {
    if (localStorage.getItem('authToken')) {
      const userDetails = new User();
      const decodeUserDetails = JSON.parse(window.atob(localStorage.getItem('authToken').split('.')[1]));

      userDetails.userName = decodeUserDetails.sub;
      userDetails.firstName = decodeUserDetails.firstName;
      userDetails.isLoggedIn = true;
      userDetails.role = decodeUserDetails.role;

      this.userData.next(userDetails);
    }
  }

  logout() {
    localStorage.removeItem('authToken');
    this.router.navigate(['/login']);
    this.userData.next(new User());
  }
}

The login method will invoke the Login API method to validate the user details. If we get an OK response from the API, we will store the JWT in the local storage. The setUserDetails method will extract the payload data from JWT and store it in a BehaviorSubject object called userData. The logout method will clear the local storage and navigate the user back to the login page. It will also reset the userData object.

The Login Component

Run the following command in the command prompt to create the Login component.

ng g c login --module app

The --module flag will ensure that this component will get registered at app.module.ts. Open login.component.ts and put the following code in it.

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { first } from 'rxjs/operators';
import { AuthService } from '../services/auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  loading = false;
  loginForm: FormGroup;
  submitted = false;
  returnUrl: string;

  constructor(private formBuilder: FormBuilder,
    private route: ActivatedRoute,
    private router: Router,
    private authService: AuthService) { }

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      username: ['', Validators.required],
      password: ['', Validators.required]
    });
  }

  get loginFormControl() { return this.loginForm.controls; }

  onSubmit() {
    this.submitted = true;
    if (this.loginForm.invalid) {
      return;
    }
    this.loading = true;
    const returnUrl = this.route.snapshot.queryParamMap.get('returnUrl') || '/';
    this.authService.login(this.loginForm.value)
      .pipe(first())
      .subscribe(
        () => {
          this.router.navigate([returnUrl]);
        },
        () => {
          this.loading = false;
          this.loginForm.reset();
          this.loginForm.setErrors({
            invalidLogin: true
          });
        });
  }
}

Open login.component.html and put the following code in it.

<div class="col-md-6 offset-md-3 mt-5">
  <div *ngIf="loginForm.errors?.invalidLogin" class="alert alert-danger mt-3 mb-0">
    Username or Password is incorrect.
  </div>
  <div class="card">
    <h5 class="card-header">JWT authentication with Angular and .NET Core 3</h5>
    <div class="card-body">
      <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
          <label for="username">Username</label>
          <input type="text" formControlName="username" class="form-control" tabindex="1" autofocus
            [ngClass]="{ 'is-invalid': submitted && loginFormControl.username.errors }" />
          <div *ngIf="submitted && loginFormControl.username.errors" class="invalid-feedback">
            <div *ngIf="loginFormControl.username.errors.required">Username is required</div>
          </div>
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" formControlName="password" class="form-control" tabindex="2"
            [ngClass]="{ 'is-invalid': submitted && loginFormControl.password.errors }" />
          <div *ngIf="submitted && loginFormControl.password.errors" class="invalid-feedback">
            <div *ngIf="loginFormControl.password.errors.required">Password is required</div>
          </div>
        </div>
        <button [disabled]="loading" class="btn btn-primary">
          <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
          Login
        </button>
      </form>
    </div>
  </div>
</div>

We are creating a login form having two fields – Username and Password. Both the fields of the form are required fields. The onSubmit method will be called when we click on the Login button. We are using formControlName attribute to bind the input field to the loginForm controls. If the loginForm has invalidLogin error we will display an error message on the screen. We are using Bootstrap for styling the form.

The User-home Component

The UserHomeComponent is accessible to the login with roles defined as “user”. Run the command mentioned below to create this component.

ng g c user-home --module app

Open the user-home.component.ts file and update the UserHomeComponent class by adding the code as shown below.

export class UserHomeComponent implements OnInit {

  userData: string;

  constructor(private userService: UserService) { }

  ngOnInit() {
  }

  fetchUserData() {
    this.userService.getUserData().subscribe(
      (result: string) => {
        this.userData = result;
      }
    );
  }
}

We have defined a method fetchUserData which will invoke the getUserData method of the UserService class. This will return a string and we will store the result in a variable userData of type string.

Open the user-home.component.html file and put the following code inside it.

<h2>This is User home page</h2>
<hr />
<button class="btn btn-primary" (click)=fetchUserData()>Fetch Data</button>
<br />
<br />
<div>
    <h4>
        {{userData}}
    </h4>
</div>

We have defined a button and invoking the fetchUserData on the button click. We are displaying the string value fetched from the API inside a <h4> tag.

The Admin-home Component

The AdminHomeComponent is accessible to the login with roles defined as “admin”. Run the command mentioned below to create this component.

ng g c admin-home --module app

Open the admin-home.component.ts file and update the AdminHomeComponent class by adding the code as shown below.

export class AdminHomeComponent implements OnInit {

  adminData: string;

  constructor(private userService: UserService) { }

  ngOnInit() {
  }

  fetchAdminData() {
    this.userService.getAdminData().subscribe(
      (result: string) => {
        this.adminData = result;
      }
    );
  }
}

We have defined a method fetchAdminData which will invoke the getAdminData method of the UserService class. This will return a string and we will store the result in a variable adminData of type string.

Open the admin-home.component.html file and put the following code inside it.

<h2>This is Admin home page</h2>
<hr />
<button class="btn btn-primary" (click)=fetchAdminData()>Fetch Data</button>
<br />
<br />
<div>
    <h4>
        {{adminData}}
    </h4>
</div>

We have defined a button and invoking the fetchAdminData on the button click. We are displaying the string value fetched from the API inside a <h4> tag.

Adding the links in Nav Menu

Open nav-menu.component.ts and update the NavMenuComponent class as shown below.

export class NavMenuComponent {
  isExpanded = false;
  userDataSubscription: any;
  userData = new User();
  userRole = UserRole;

  constructor(private authService: AuthService) {
    this.userDataSubscription = this.authService.userData.asObservable().subscribe(data => {
      this.userData = data;
    });
  }

  collapse() {
    this.isExpanded = false;
  }

  toggle() {
    this.isExpanded = !this.isExpanded;
  }

  logout() {
    this.authService.logout();
  }
}

We are subscribing to the userData subject of the AuthService class in the constructor and setting the value of a local variable userData. We will use the properties of userData object to toggle the nav-menu links in the template file. The logout method will call the logout method of the AuthService class.

We will add the links for our components in the nav menu. Open nav-menu.component.html and remove the links for Counter and Fetch data components and add the following lines.

<li class="nav-item" [routerLinkActive]='["link-active"]'>
    <a class="nav-link text-dark" *ngIf="!userData.isLoggedIn" [routerLink]='["/login"]'>Login</a>
</li>
<li class="nav-item" [routerLinkActive]='["link-active"]'>
    <a class="nav-link text-dark" *ngIf="userData.isLoggedIn && userData.role==userRole.User" [routerLink]='["/user-home"]' [routerLink]=''>UserHome</a>
</li>
<li class="nav-item" [routerLinkActive]='["link-active"]'>
    <a class="nav-link text-dark" *ngIf="userData.isLoggedIn && userData.role==userRole.Admin" [routerLink]='["/admin-home"]' [routerLink]=''>AdminHome</a>
</li>
<li class="nav-item" [routerLinkActive]='["link-active"]'>
    <a class="nav-link text-dark" *ngIf="userData.isLoggedIn" (click)=logout() [routerLink]=''>Logout</a>
</li>
<li class="nav-item" [routerLinkActive]='["link-active"]' *ngIf="userData.isLoggedIn">
    <a class="nav-link text-dark">Welcome <b>{{userData.firstName}}</b> </a>
</li>

Here we are displaying the links for UserHome and AdminHome based on the role of the user. We are also toggling between the Login and Logout button based on the isLoggedIn property of userData object. Clicking on the Login button will navigate the user to the login page whereas clicking on the logout button will invoke the logout method. We will also display the firstName of the user along with a welcome message once the user is authenticated.

Securing the routes with route guards

To protect URL routes from unauthorized access we will create route guards. We will create two guards for protecting user routs and admin routes. Run the following commands to create an admin guard.

ng g g guards/admin --implements CanActivate

Here we are specifying the interfaces to implement using the implements flag. This command will create a folder name guards and add two files admin.guard.ts and admin.guard.spec.ts. Open admin.guard.ts file and put the following code inside it.

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from '../services/auth.service';
import { User } from '../models/user';
import { UserRole } from '../models/roles';

@Injectable({
  providedIn: 'root'
})
export class AdminGuard implements CanActivate {
  userDataSubscription: any;
  userData = new User();
  constructor(private router: Router, private authService: AuthService) {
    this.userDataSubscription = this.authService.userData.asObservable().subscribe(data => {
      this.userData = data;
    });
  }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

    if (this.userData.role === UserRole.Admin) {
      return true;
    }

    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
    return false;
  }
}

We will subscribe to userData subject in the constructor of the AdminGuard class. We will override the canActivate method of the interface CanActivate. This method will return true if the user role is Admin otherwise it will set the returnUrl and navigate to the login page.

Similarly, we will create another guard to protect user routes. Run the command shown below.

ng g g guards/auth --implements CanActivate

Open auth.guard.ts file and put the following code inside it.

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from '../services/auth.service';
import { User } from '../models/user';
import { UserRole } from '../models/roles';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  userDataSubscription: any;
  userData = new User();
  constructor(private router: Router, private authService: AuthService) {
    this.userDataSubscription = this.authService.userData.asObservable().subscribe(data => {
      this.userData = data;
    });
  }
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

    if (this.userData.role == UserRole.User) {
      return true;
    }

    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
    return false;
  }
}

This guard is similar to the AdminGuard. We will verify if the user role is User then return true else set the returnUrl and navigate to the login page.

Add Http Interceptor

We will create an HTTP interceptor service to send the authorization token in the header of each API request. This will make sure that only the authorized user can access a particular API. Run the command shown below to create HttpInterceptorService class.

ng g s services\http-interceptor

Open the http-interceptor.service.ts file and put the following code inside it.

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class HttpInterceptorService implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = localStorage.getItem('authToken');
    if (token) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`,
        }
      });
    }
    return next.handle(request)
  }
}

The HttpInterceptorService class will implement the HttpInterceptor interface and override the intercept method. Inside this method, we will fetch the JWT from the localStorage. If the token exists we will modify the request header of the API call by assigning the token value to the Authorization property of headers.

Add Error Interceptor

We will add an error interceptor to intercept and handle the errors gracefully. This will make sure that the user experience is not hampered in case of any error from the server.

Run the command shown below to create ErrorInterceptorService.

ng g s services\error-interceptor

Open the error-interceptor.service.ts file and put the following code inside it.

import { Injectable } from '@angular/core';
import { AuthService } from './auth.service';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class ErrorInterceptorService implements HttpInterceptor {

  constructor(private authService: AuthService) { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(catchError(err => {
      if (err.status === 401) {
        this.authService.logout();
      }
      return throwError(err.status);
    }));
  }
}

This is similar to HttpInterceptorService. We will implement the HttpInterceptor interface and inside the intercept method, we will catch the error from HttpRequest. If we get error code as 401 i.e. unauthorized from the server, we will invoke the logout method for that user.

In a real-world scenario, we should implement the refresh token feature upon getting an unauthorized error from the server. This will make sure that the user doesn’t get logged out frequently. Implementing refresh token on JWT is beyond the scope of this article but I will try to cover it in future article.

Update App component

Open app.component.ts file and update the AppComponent class as shown below. This will make sure that the logged-in user data won’t be lost on page reload.

export class AppComponent {
  constructor(private authService: AuthService) {
    if (localStorage.getItem('authToken')) {
      this.authService.setUserDetails();
    }
  }
}

Update App module

At last, we will update the app.module.ts file by adding routes for our components and applying auth guards to the routes. We will also add our interceptors in the providers array. Update the app.module.ts file as shown below. You can refer to the GitHub for the complete code of this file.

imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
HttpClientModule,
FormsModule,
ReactiveFormsModule,
RouterModule.forRoot([
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'user-home', component: UserHomeComponent, canActivate: [AuthGuard] },
  { path: 'admin-home', component: AdminHomeComponent, canActivate: [AdminGuard] }
])
],
providers: [{ provide: HTTP_INTERCEPTORS, useClass: HttpInterceptorService, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptorService, multi: true },
],
bootstrap: [AppComponent]

Execution Demo

Launch the application by pressing F5 from Visual Studio. You can perform the authentication and authorization as shown in the GIF below.

Summary

We have created an ASP.NET Core application and configured JWT authentication for it. We learned how JWT is configured and validated on the server. The application also has policy-based authorization. We defined two roles for our application and provided role-based access for each role. The client app is created using Angular. We also implemented interceptors for our client to send authorization token in the headers and to handle any error response coming from the server.

DEV Community: Ankit

Announcing A Complete Blazor Mastery Course

Introduction

Get the course now

Course overview

Source Code

Try out the application

Key Features of the Blazor course

The approach followed in this Blazor course

Looking for a discount!!!

Just Released - A Free eBook On Angular and Firebase

Introduction

Download the free eBook

Source Code

Try out the application

Features for the application

What you will learn in this eBook?

Prerequisites for the reader

Acknowledgment

See Also

Connect with me

Creating A Multi-Language Translator Using Blazor And Azure Cognitive Services

Introduction

Prerequisites

Source Code

Create the Azure Translator Text Cognitive Services resource

Create a Server-Side Blazor Application

Creating the Models

Create the Translation service

Configuring the Service

Creating the Blazor UI Component

Add styling for the Translator component

Adding Link to Navigation menu

Execution Demo

Summary

See Also

Continuous Deployment For Angular App Using Heroku And GitHub

Introduction

Prerequisites

What is Continuous Deployment (CD)?

What is Heroku?

Install Express server

Note:

Configuring the package.json file

Pushing the code to GitHub

Create a new Heroku app

Important Note:

Connect your Heroku app to GitHub

Configure the Heroku app for continuous deployment

Summary

See Also

Template-Driven Form Validation In Angular

Prerequisites

Source Code

Create the Angular app

Install Bootstrap

Create the validation service

Create the User model

Create custom directives

Create the template-driven form component

Create the nav-bar component

Update the app component

Update the App module

Execution demo

Summary

See Also

Reactive Form Validation in Angular

Introduction

Prerequisites

Source Code

Create the Angular app

Install Bootstrap

Create the validation service

Create the reactive form component

Create the nav-bar component

Update the app component

Update the App module

Execution demo

Summary

See Also