Dotnet Core MVC Cookie Login Sample From Scratch(Part 1)

Introduction:

In general ASP.NET Core applications(MVC, RazorPages, WebAPI, Blazor Server Side) use login libraries like ASP.NET Core Identity, IdentityServer4, OAuth 2.0, etc. But ASP.NET Core can simply implement login with using Cookie-Based Authentication without any login libraries.

ASP.NET Core Identity is a membership program that helps to create a login functionality. Its rich library with all default login functionalities, creating users, adding roles, password encryption, and support to social logins like Google, Facebook, Outlook, Twitter, etc.

IdentityServer4 Or OAuth 2.0 is the latest login technology. It also gives all login functionalities and support to social logins as well additionally Single Sign-On and Token-Based user login.

Cookie-Based Authentication is a default login mechanism provided by ASP.NET Core applications.
But user creation, adding roles need to be done manually which is not hard to do. In this approach, we don't get too many pre-build methods or functionality available like in the login library.

Create ASP.NET Core MVC Project:

Let us create a sample MVC application in ASP.NET Core 3.0 using VisualStudio 2019 latest version. Make sure to uncheck the authentication checkbox while selecting the MVC project template. Click to see steps for project creation.

Create User And Roles Tables:

Create a "User" table with following SQL-Query

  CREATE TABLE [dbo].[User]
  (
    [Id] INT NOT NULL PRIMARY KEY IDENTITY, 
    [FirstName] VARCHAR(500) NULL, 
    [LastName] VARCHAR(500) NULL, 
    [Email] VARCHAR(MAX) NOT NULL, 
    [Password] VARCHAR(MAX) NOT NULL, 
    [LastLoginTime] DATETIME NULL
  )

Create  a "Roles" table with following SQL-Query

CREATE TABLE [dbo].[Roles]
(
    [Id] INT NOT NULL PRIMARY KEY IDENTITY, 
    [RoleName] VARCHAR(500) NOT NULL
)

Create a "UserRoles" mapping table with following SQL-Query

CREATE TABLE [dbo].[UserRole]
(
    [Id] INT NOT NULL PRIMARY KEY IDENTITY, 
    [UserId] INT NOT NULL, 
    [RoleId] INT NOT NULL
)

CodeFirst With Existing DataBase:

To communicate with a database we implement the Code-First approach click here to know more.

In this approach, the database is represented by DbContext and tables are represented by Model Classes. 

Install below to packages that help in creating DbContext

Install-Package Microsoft.EntityFrameworkCore -Version 3.0.0

Install-Package Microsoft.EntityFrameworkCore.Relational -Version 3.0.0 

In the model, folder create files like 'User.cs', 'Roles.cs', 'UserRole.cs' which represent database tables

User.cs:

  using System;

namespace CookieAuth.Web.Models
{
    public class User
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Email { get; set; }
        public string Password { get; set; }
        public DateTime? LastLoginTime { get; set; }
    }
}

Roles.cs:

namespace CookieAuth.Web.Models
{
    public class Roles
    {
        public int Id { get; set; }
        public string RoleName { get; set; }
    }
}

UserRole.cs:

namespace CookieAuth.Web.Models
{
    public class UserRole
    {
        public int Id { get; set; }
        public int UserId { get; set; }
        public int RoleId { get; set; }
    }
}

Now add new folder 'DAL', in that create a class name as 'UserContext.cs'.
UserContext.cs:

using CookieAuth.Web.Models;
using Microsoft.EntityFrameworkCore;

namespace CookieAuth.Web.DAL
{
    public class UserContext : DbContext
    {
        public UserContext(DbContextOptions context):base(context)
        {

        }

        public DbSet<User> User { get; set; }
        public DbSet<Roles> Roles { get; set; }
        public DbSet<UserRole> UserRole { get; set; }
        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            modelBuilder.Entity<User>(entity =>
            {
                entity.ToTable("User");
            });

            modelBuilder.Entity<Roles>(entity =>
            {
                entity.ToTable("Roles");
            });

            modelBuilder.Entity<UserRole>(entity =>
            {
                entity.ToTable("UserRole");
            });
        }
    }
}

ConnectionString:

Add Database ConnectionString in 'appSettings.json'

Register Database Context:

Need to install below NuGet package to register DbContext with some SQL options

Install-Package Microsoft.EntityFrameworkCore.SqlServer -Version 3.0.0

Now we need to register our DbContext in 'Startup.cs' file, inside it we have a method 'ConfigureServices' to register any service throughout the application.

 services.AddDbContext<usercontext>(options =>
 {
   options.UseSqlServer(Configuration.GetConnectionString("SportsDbContext")); 
 });

Create An Account Controller:

This controller generally contains user action methods like 'Sign-up', 'Sign-in' and 'logout', etc. Now add a new controller and name it as 'AccountController.cs'.

Create UserViewModel For SignUp Form:

In the model, folder add filename as 'UserViewModel.cs', which is used user registration. Using 'System.ComponentModel.DataAnnotations' for ASP.NET Core MVC Model validation

Validation Attributes:

.[Required] mandatory filed 

.[Compare('otherPropertyName')] compare and check matches with other property

using System.ComponentModel.DataAnnotations;

namespace CookieAuth.Web.Models
{
    public class UserViewModel
    {
        [Required]
        public string FirstName { get; set; }
        [Required]
        public string LastName { get; set; }

        [Required]
        public string Email { get; set; }

        [Required]
        public string Password { get; set; }

        [Required]
        [Compare("Password")]
        public string ConfirmPassword { get; set; }
    }
}
  

Http Get SignUp Action:

To register user add 'SignUp' HttpGet action method in the'AccountController.cs'. This HttpGet action method navigate user to application registration form

AccountController.cs:

[Route("sign-up")]
[HttpGet]
public IActionResult SignUp()
{
  return View(new UserViewModel());
}

SignUp Form:

Now create 'sign-up.cshtml' file in 'Views/Accounts' folder. Add the following Html to design sign-up from.

@model CookieAuth.Web.Models.UserViewModel
@{
    ViewData["Title"] = "SignUp";
}

<h1>SignUp Form</h1>

<div class="row">
    <div class="col col-sm-12">
        <form action="/account/sign-up" method="post">
            <div class="form-group row">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <label for="FirstName" class="col-sm-2 col-form-label">First Name</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="FirstName" name="FirstName" placeholder="Enter First Name" asp-for="FirstName" />
                    <span asp-validation-for="FirstName" class="text-danger"></span>
                </div>
            </div>
            <div class="form-group row">
                <label for="LastName" class="col-sm-2 col-form-label">Second Name</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="LastName" name="LastName" placeholder="Enter Last Name" asp-for="LastName" />
                    <span asp-validation-for="LastName" class="text-danger"></span>
                </div>
            </div>
            <div class="form-group row">
                <label for="Email" class="col-sm-2 col-form-label">Email</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="Email" name="Email" placeholder="Enter Email Address" asp-for="Email" />
                    <span asp-validation-for="Email" class="text-danger"></span>
                </div>
            </div>
            <div class="form-group row">
                <label for="Password" class="col-sm-2 col-form-label">Password</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="Password" name="Password" placeholder="Enter Passwor" asp-for="Password" />
                    <span asp-validation-for="Password" class="text-danger"></span>
                </div>
            </div>
            <div class="form-group row">
                <label for="ConfirmPassword" class="col-sm-2 col-form-label">Confirm Password</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="ConfirmPassword" name="ConfirmPassword" placeholder="Enter Confirm Password" asp-for="ConfirmPassword" />
                    <span asp-validation-for="ConfirmPassword" class="text-danger"></span>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-primary">Register</button>
                </div>
            </div>
        </form>
    </div>
</div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

. 'UserViewModel' is used for model binding.
. 'asp-validation-for' MVC attributes for form model validation.
. 'asp-for' data binding to the form fields from the view-model.

Http Post SignUp Action Method To Add Users:

Now add an overloaded SignUp method in 'AccountController.cs', in this method we are going to add a new user. This action method takes care to verify MVC model validation, takes responsibility to have a unique email address in the database, and saving new users to the database.

Inject UserContext into AccountController using Constructor Injection:

private readonly UserContext _userContext;
public AccountController(UserContext userContext)
{
  _userContext = userContext;
}

SignUp Post Action:

[Route("sign-up")]
[HttpPost]
public IActionResult SignUp(UserViewModel viewModel)
{
    if (ModelState.IsValid)
    {
        if(!_userContext.User.Any(_ => _.Email.ToLower() == viewModel.Email.ToLower()))
        {
            User newUser = new User
            {
                Email = viewModel.Email,
                FirstName = viewModel.FirstName,
                LastName = viewModel.LastName,
                Password = viewModel.Password
            };
            _userContext.User.Add(newUser);
            _userContext.SaveChanges();

            return Redirect("/login");
        }
    }
    return View(viewModel);
}

. 'HttpPost' accepts the post request
. 'Route' attribute matches the requested route.
. 'UserViewModel' MVC automatically inputs the data from the posted form to the inputting model
. 'ModelState' is a default property created by the controller, which helps to check and validate the request model.
. Linq extension method Any() queries the database to check if the email is already registered to avoid duplication user registration
. Map the values from 'UserViewModel' to 'User' model (Tabel Model), then using 'UserContext', saves the data to a database.
. After a user successfully registered, navigate to the login page (implemented in following steps)

Note: Here I'm not encrypting password while saving to the database, you need to do encryption before saving to the database, to encrypt CSharp has a lot of encryption algorithms like 'SHA 512'. Never, ever save plain text password to the database.

Create LoginViewModel:

In 'Model' folder add a new class name as 'LoginViewModel' with 'Data Annotation' attributes for login form validation

using System.ComponentModel.DataAnnotations;

namespace CookieAuth.Web.Models
{
    public class LoginViewModel
    {
        [Required]
        public string Email { get; set; }
        [Required]
        public string Password { get; set; }
        public bool IsPersistant { get; set; }
    }
}

Http Get Login Action Method:

To load the login form update the 'AccountController' with the login action method

[Route("login")]
[HttpGet]
public IActionResult Login()
{
   return View(new LoginViewModel());
}

Register Cookie And Authentication Middleware:

In 'Startup.cs' file register authentication cookie in the 'ConfigureServices' method.

services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
.AddCookie();

'CookieAuthenticationDefault' is provided by 'Microsoft.AspNetCore.Authentication.Cookies'.
'AuthenticationScheme' name is useful when there are multiple instances of cookie authentication supported by the application.

In 'Startup.cs' file configure authentication middleware in the 'Configure' method. From ASP.NET 3.0 endpoint routing was implemented, where most of the middleware should implement between 'app.UseRouting()' and 'app.UseEndpoints()' as below

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

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

Login Form:

Now add 'Login.cshtml' in 'Views/Accounts' folder.

@model CookieAuth.Web.Models.LoginViewModel
@{
    ViewData["Title"] = "Login";
}

<h1>Login</h1>

<div class="row">
    <div class="col col-sm-6">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <form action="/account/login" method="post">
            <div class="form-group row">
                <label for="Email" class="col-sm-2 col-form-label">Email</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="Email" name="Email" placeholder="Enter Email" />
                    <span asp-validation-for="Email" class="text-danger"></span>
                </div>
            </div>
            <div class="form-group row">
                <label for="Password" class="col-sm-2 col-form-label">Password</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="Password" name="Password" placeholder="Enter Password" />
                    <span asp-validation-for="Password"></span>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-primary">Login</button>
                </div>
            </div>
        </form>
    </div>
</div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

. 'LoginViewModel' is the data binding object of this MVC view
. 'asp-validation-for' attribute to display the model validation error message

Http Post Login Action Method (User Login Method):

Now add user login logic in the login post action method in 'AccountController.cs'

[Route("login")]
[HttpPost]
public async Task<IActionResult> Login(LoginViewModel viewModel)
{
 if (ModelState.IsValid)
 {
  // note : real time we save password with encryption into the database
  // so to check that viewModel.Password also need to encrypt with same algorithm 
  // and then that encrypted password value need compare with database password value
  Models.User user = _userContext.User.Where(_ => _.Email.ToLower() == viewModel.Email.ToLower() && _.Password == viewModel.Password).FirstOrDefault();
  if(user != null)
  {
   user.LastLoginTime = DateTime.Now;
   _userContext.SaveChanges();
   var claims = new List<Claim>
    {
     new Claim(ClaimTypes.Name, user.Email),
     new Claim("FirstName",user.FirstName)
    };
   var claimsIdentity = new ClaimsIdentity(claims, CookieAuthenticationDefaults.AuthenticationScheme);
   var authProperties = new AuthenticationProperties() { IsPersistent = viewModel.IsPersistant };
   await HttpContext.SignInAsync(CookieAuthenticationDefaults.AuthenticationScheme, new ClaimsPrincipal(claimsIdentity), authProperties);
   return Redirect("/");
  }
  else
  {
   ModelState.AddModelError("InvalidCredentials", "Either username or password is not correct");
  }
 }
 return View(viewModel);
}

. 'HttpPost' attribute represents the post-action MVC page, which expects data from the client browser.
. 'Route' represents the route of the page, this type of router configuration is called 'Attribute Routing'.
. If the user tries to login with invalid credentials, we can add custom error to the model by using 'ModelState.AddModelError()'. This message will be displayed to the user
. If the user exists, update the 'LastLoginTime' and save it to the database. This field represents how frequently user login to the application.
. Claims contain a minimum amount of information, which used to identify the user on login. Claims can store user roles and permissions as well.
. 'ClaimsIdentity(IEnumerable claims, string authenticationType)' instantiate claims identity with one of the overloaded constructors which accept all our user login claim collection and authentication schema type like 'CookieAuthenticationDefaults.AuthenticationScheme'.
. 'Microsoft.AspNetCore.AuthenticationSignInAsync(this HttpContext context, string scheme, ClaimsPrincipal principal, AuthenticationProperties properties).' this method makes the user to login to the application. SignInAsync() is an overloaded method with accepts 'authentication scheme', 'user claims' and 'authentication settings.
. 'SignAsync()' method creates the authentication cookie and it needs to be given to the client(browser). So always reload the page after login so that authentication cookie gets available to the client and it will be sent to the server for every next request. Here in this sample after login, I'm redirecting to the home page.

Change Application Menu On User Authentication:

To get the authenticated user information into MVC views we need to inject the 'HttpContext' into the '_Layout.cshtml' page. Using @inject directive we can inject the 'HttpContext'. Dotnet Core provided an interface 'IHttpContextAccessor' to inject HttpContext

@using Microsoft.AspNetCore.Http
@inject IHttpContextAccessor _httpHttpContextAccessor;

Now add menu links like 'Sign-up', 'Login' show them conditionally based on user authentication. Below 'Privacy' menu link tag add the following Html in '_Layout.cshtml'

Here we are getting the user name that was added as a claim while the user login to the application.

SignOut Action Method:

Now in 'AccountController' add the sign-out method

[HttpGet]
[Route("sign-out")]
public async Task<IActionResult> SignOut()
{
 await HttpContext.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);
 return Redirect("/");
}

. 'HttpContext.SignOutAsync()' removes the login cookie to sign-out the user. This method only expects a login schema name.

Now run the application and navigate to sign-up form to register.

Now open login form and try to login into the application

After login your page looks:

Summary:

Here we created a simple login application using Cookie-Based Authentication, without any login libraries. We have created users, roles tables, we have implemented sign-in and sign-out methods. Model form validation did with the help of Data Annotations. Using this login cookie we going to implement Authorization in MVC application. Click here to Role-base Authorization
😀

Refer:

. Dotnet Core MVC Cookie Login Sample Role-based Authorization (Part 2)

. Source Code

. .Net Core Authentication Using JWT(JSON Web Token)

Facebook

Twitter

Pinterest