Authentication Filter In MVC With An Example

Introduction

 

ASP.NET MVC filters are used to add extra logic at the different levels of MVC Framework request processing. Authentication Filter runs before any other filter or action method. Authentication confirms if you are a valid or invalid user. These filters implement the “IAuthenticationFilter” interface and “ActionFilterAttribute” base class.

 

Create an MVC project in Visual Studio

 

We can create an MVC application in Visual Studio. I am using the latest Visual Studio 2019. You may use any version of the IDE.

Choose ASP.NET Web Application template and select MVC option.

 

 

In this application, we will check the user authentication before every request execution. Hence, we need a database and a “User” table inside the database. We will validate the user information before every request. We will use Entity Framework to connect with SQL database. We will create the database and table using the code-first approach and data migration process.

 

We can install EntityFramework NuGet package in our project.

 

 

 

Create a “User” model inside the “Models” folder now.

 

User.cs

using System.ComponentModel.DataAnnotations;

namespace CustomAuthenticationFilter.Models
{
    public class User
    {
        public int Id { get; set; }
        [Display(Name = "User Id")]
        public string UserId { get; set; }
        public string UserName { get; set; }
        public string Password { get; set; }
    }
}

Create a DbContext class also.

 

SqlDbContext.cs

using System.Data.Entity;

namespace CustomAuthenticationFilter.Models
{
    public class SqlDbContext : DbContext
    {
        public SqlDbContext() : base("name=SqlConnection")
        {
        }
        public DbSet<User> Users { get; set; }
    }
}

We have used a connection string “SqlConnection” inside the above DbContext class. We can create connection string inside the Web.Config also.

 

<connectionStrings>
    <add name="SqlConnection"
         connectionString="Data Source=Murugan; Initial Catalog=SarathlalDB; Integrated Security=SSPI"
         providerName="System.Data.SqlClient"
         />
  </connectionStrings>

We can create SQL database and table using database migration process. We can enable the DB migration first. Choose “Package Manager Console” from “Tools -> NuGet Package Manager” menu item.

 

 

Use the below command to enable the migration.

 

“enable-migrations”

 

The above command will generate a “Configuration.cs” file inside the “Migration” folder.

 

We can use the below command to add new migration.

 

“add-migration Initial”

 

The above command will create a new migration file suffix with “_Initial” and timestamp inside the “Migrations” folder.

 

We can use “Sql” command to insert a default record (Seed data) to User table while migration happens.

 

public partial class Initial : DbMigration
   {
       public override void Up()
       {
           CreateTable(
               "dbo.Users",
               c => new
                   {
                       Id = c.Int(nullable: false, identity: true),
                       UserId = c.String(),
                       UserName = c.String(),
                       Password = c.String(),
                   })
               .PrimaryKey(t => t.Id);

           Sql("Insert into Users (UserId,UserName,Password) Values ('sarath','Sarath Lal','password123')");
       }

       public override void Down()
       {
           DropTable("dbo.Users");
       }
   }

The above SQL command will insert one record to the User table during migration process.

 

We can use the below command in Package Manage Console to create a database and table.

 

“update-database”

 

You can see in the SQL server that a new database and table are created with a default record.

 

We can create an “Account” controller inside the “Controller” folder to control the login process.

 

Copy the below code and paste inside the controller class.

 

AccountController.cs

using CustomAuthenticationFilter.Models;
using System.Linq;
using System.Web.Mvc;

namespace CustomAuthenticationFilter.Controllers
{
    public class AccountController : Controller
    {
        [HttpGet]
        public ActionResult Login()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Login(User model)
        {
            if (ModelState.IsValid)
            {
                using (var context = new SqlDbContext())
                {
                    User user = context.Users
                                       .Where(u => u.UserId == model.UserId && u.Password == model.Password)
                                       .FirstOrDefault();

                    if (user != null)
                    {
                        Session["UserName"] = user.UserName;
                        return RedirectToAction("Index", "Home");
                    }
                    else
                    {
                        ModelState.AddModelError("", "Invalid User Name or Password");
                        return View(model);
                    }
                }
            }
            else
            {
                return View(model);
            }
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult LogOff()
        {
            Session["UserName"] = string.Empty;
            return RedirectToAction("Index", "Home");
        }
    }
}

We have checked the user id and password in the database for authentication purposes. Also, we created a logout action to delete the user name stored in a session storage in login action.

 

We can create a Login view and add the below code.

 

Login.cshtml

@model CustomAuthenticationFilter.Models.User

@{
    ViewBag.Title = "Login";
}
<h2>Login</h2>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">

        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.UserId, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.UserId, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.UserId, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.PasswordFor(model => model.Password, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Proceed" class="btn btn-default" />
            </div>
        </div>
    </div>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

Create custom authentication filter

 

We can create an important portion in our project, custom authentication filter. Create a new “Infrastructure” folder and create “CustomAuthFilter.cs” class inside it.

 

CustomAuthFilter.cs

using System;
using System.Web.Mvc;
using System.Web.Mvc.Filters;
using System.Web.Routing;

namespace CustomAuthenticationFilter.Infrastructure
{
    public class CustomAuthFilter : ActionFilterAttribute, IAuthenticationFilter
    {
        public void OnAuthentication(AuthenticationContext filterContext)
        {
            if (string.IsNullOrEmpty(Convert.ToString(filterContext.HttpContext.Session["UserName"])))
            {
                filterContext.Result = new HttpUnauthorizedResult();
            }
        }
        public void OnAuthenticationChallenge(AuthenticationChallengeContext filterContext)
        {
            if (filterContext.Result == null || filterContext.Result is HttpUnauthorizedResult)
            {
                //Redirecting the user to the Login View of Account Controller
                filterContext.Result = new RedirectToRouteResult(
                new RouteValueDictionary
                {
                     { "controller", "Account" },
                     { "action", "Login" }
                });
            }
        }
    }
}

We have implemented “ActionFilterAttribute” class and “IAuthenticationFilter” interface in the above class. Please note that there are two important methods implemented - “OnAuthentication” and “OnAuthenticationChallenge”. Inside OnAuthentication, we have checked the session value “UserName” to see if it is empty or not. If the value is empty, it will throw the result as “HttpUnauthorizedResult” and then, the second method OnAuthenticationChallenge will be executed. This method will redirect the request to a specific action and controller. In this example, we will redirect to “Login” action in “Account” controller.

 

Now, we can decorate this filter inside the “Home” controller.

 

HomeController.cs

using CustomAuthenticationFilter.Infrastructure;
using System.Web.Mvc;

namespace CustomAuthenticationFilter.Controllers
{
    [CustomAuthFilter]
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

We can add a partial view to show the username in the right-top corner along with logout link. This will show only after a successful login. If the user is not yet logged in, this will show as a simple login link. We can add the logic for that. We will create this partial view inside the shared views folder.

 

_LoginPartial.cshtml

@if (!string.IsNullOrEmpty(Convert.ToString(Session["UserName"])))
{
    using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
    {
        @Html.AntiForgeryToken()
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Welcome : @Session["UserName"]</a></li>
            <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
        </ul>
    }
}
else
{
    <ul class="nav navbar-nav navbar-right">
        <li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
    </ul>
}

We can call this partial view from _Layout.cshtml.

<div class="navbar-collapse collapse">
               <ul class="nav navbar-nav">
                   <li>@Html.ActionLink("Home", "Index", "Home")</li>
                   <li>@Html.ActionLink("About", "About", "Home")</li>
                   <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
               </ul>
               @Html.Partial("_LoginPartial")
           </div>

We have completed the entire coding part. We can run the application now. Please note that we have added authentication filter attribute to the entire home controller. Hence, though the index action in home controller is the default route, it will be redirected to login action automatically.

 

You can also notice a login link in the right top corner of the page.

 

Once the user enters the correct user id and password, we can navigate to other pages as well. You can see the username also visible on the right-top corner now.

 

 

Conclusion

 

In this post, we have created an MVC application in Visual Studio and created a custom authentication filter and used this filter attribute to control the other actions like index, about and contact in the home controller. We have also seen how to create a database and table from the code-first approach using db migration process.