{"id":80774,"date":"2023-02-02T08:00:37","date_gmt":"2023-02-02T07:00:37","guid":{"rendered":"https:\/\/code-maze.com\/?p=80774"},"modified":"2024-01-31T15:25:07","modified_gmt":"2024-01-31T14:25:07","slug":"dotnet-angular-two-factor-authentication-with-using-google-authenticator","status":"publish","type":"post","link":"https:\/\/code-maze.com\/dotnet-angular-two-factor-authentication-with-using-google-authenticator\/","title":{"rendered":"Two Factor Authentication with Web API and Angular using Google Authenticator"},"content":{"rendered":"

In this article, we will enable Two-Factor Authentication with Web API and Angular using Google Authenticator. We can use the Google Authenticator app to get a One-Time Password (OTP)<\/strong> value to enter during login.<\/p>\n

The initial steps of this article have been taken from the Angular Security with ASP.NET Core Identity<\/a> series. You may refer to this series for more details and explanations.<\/p>\n

We will start with creating an ASP.NET Core Web API project that will host our backend. Inside this project, we will also create the Angular frontend project. Moreover, you can check on the Angular<\/a> series for a complete account of how to set up an Angular project with ASP.NET Core.<\/p>\n

To download the source code for this article, you can visit our GitHub repository<\/a>.<\/div>\n

Let’s start.<\/p>\n

Preparing the Environment<\/h2>\n

To begin with, let’s install the ASP.NET Core Identity library. We will find it in NuGet under the Microsoft.AspNetCore.Identity.EntityFramework<\/code> name.<\/p>\n

Then, we create a new folder named Models<\/code>. Inside this folder, let’s create a new User<\/code> class that inherits from the IdentityUser<\/code> class:<\/p>\n

public class User : IdentityUser\r\n{\r\n    public string? FirstName { get; set; }\r\n    public string? LastName { get; set; }\r\n}<\/pre>\n
Let’s proceed with adding a context class:<\/p>\n
public class RepositoryContext : IdentityDbContext<User>\r\n{\r\n    public RepositoryContext(DbContextOptions options)\r\n    : base(options)\r\n    {\r\n    }\r\n\r\n    protected override void OnModelCreating(ModelBuilder modelBuilder)\r\n    {\r\n        base.OnModelCreating(modelBuilder);\r\n    }\r\n}<\/pre>\n
Next, let’s modify the Program.cs<\/code> file to register ASP.NET Core Identity in our project:<\/p>\n
var builder = WebApplication.CreateBuilder(args);\r\nvar allowSpecificOrigins = \"two_factor_auth_cors\";\r\n\r\nbuilder.Services.AddCors(options =>\r\n{\r\n    options.AddPolicy(allowSpecificOrigins,\r\n        builder =>\r\n          builder.WithOrigins(\"http:\/\/localhost:4200\", \"https:\/\/localhost:4200\")\r\n        .AllowAnyMethod()\r\n        .AllowAnyHeader()\r\n        .AllowCredentials());\r\n});\r\n\r\nbuilder.Services.AddDbContext<RepositoryContext>(opts =>\r\n    opts.UseSqlServer(builder.Configuration.GetConnectionString(\"sqlConnection\")));\r\n\r\nbuilder.Services.AddIdentity<User, IdentityRole>()\r\n    .AddEntityFrameworkStores<RepositoryContext>()\r\n    .AddDefaultTokenProviders();\r\n\r\nbuilder.Services.AddAutoMapper(typeof(MappingProfile));\r\nbuilder.Services.AddControllers();\r\n\r\nvar app = builder.Build();\r\napp.UseCors(allowSpecificOrigins);\r\napp.UseHttpsRedirection();\r\napp.UseAuthorization();\r\napp.MapControllers();\r\napp.Run();<\/pre>\n
Program.cs<\/code> is also the place to register the Context and the AutoMapper<\/strong>, as well as add CORS support<\/strong>.<\/p>\n
Finally, let’s create a migration for all ASP.NET Core Identity tables<\/strong> in our database:<\/p>\n
PM> Add-Migration IdentityTablesCreation \r\nPM> Update-Database<\/pre>\n
Two-Factor Authentication Options<\/h2>\n
Upon successful registration, the user will move to the login page. The user will initially log in without Two-Factor Authentication. Then, after logging in, the user can go to the settings page to set up the Two-Factor Authentication with Google Authenticator.<\/p>\n
Of course, there are different approaches how to handle TFA. One way could be to make TFA mandatory for logging in. This way, we would require the user to set up TFA at the same time as registration.<\/p>\n
In this article, we choose to make TFA optional. The user should go to the TFA setup page and manually enable it.<\/strong><\/p>\n
Here, we will not discuss the registration process as it is not related to the Two-Factor Authentication process. However, you may check the article’s code on GitHub, especially the AccountsController<\/code> file<\/a> in ASP.NET Core and the RegistrationComponent<\/code> file<\/a> in Angular for the implementation. Moreover, you can have a look at our article on User registration<\/a> for a detailed account.<\/p>\n
Here is a screenshot of the registration page:<\/p>\n
<\/a><\/p>\n
Now, let’s start with the Two-Factor Authentication setup.<\/p>\n
Two-Factor Authentication Using Google Authenticator in Angular Frontend<\/h2>\n
First, let’s add a HomeComponent<\/code> that is going to be a simple home page containing a link to the settings page:<\/p>\n
<h1>Two factor authentication with Google Authenticator<\/h1>\r\n<p>\r\n    <a routerLink=\"\/tfa-setup\">Press here to set up two-factor authentication<\/a>\r\n<\/p>\r\n<\/pre>\n
Then, let’s add the routing entry for this component in the app-routing.module.ts<\/code> file:<\/p>\n
const routes: Routes = [\r\n  { path: '', component: HomeComponent  },\r\n  { path: 'register', component: RegisterUserComponent  }\r\n}<\/pre>\n
To set up Two-Factor Authentication (TFA) with Google Authenticator, we create a TfaSetupComponent<\/code> component.<\/p>\n
The TFA setup process consists of two steps<\/strong>:<\/p>\n