Signing in and Signing out of an ASP.NET Core MVC web app can seem like a daunting task, but it doesn’t have to be! This blog post is here to make the process easier by walking through step-by-step how to implement this feature. Through this post, you’ll not only learn the necessary coding techniques but also understand more about the Sign-in and Sign-out process overall. By the end, you should have all of the knowledge and confidence to implement Sign-in and Sign-out into your web apps!
Implementing Sign-in in ASP.NET Core MVC
First, we need to inject SignInManager which is in Microsoft.AspNetCore.Identity to process Sign-in and Sign-out users.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
public class UserManagmentController : Controller { private readonly UserManager<IdentityUser> userManger; private readonly SignInManager<IdentityUser> signInManager; public UserManagmentController(UserManager<IdentityUser> _userManger, SignInManager<IdentityUser> _signInManager) { userManger = _userManger; signInManager = _signInManager; } } |
Then, we need to add the SignIn Action method with the HttpGet method that returns a View.
|
1 2 3 4 5 6 7 8 9 |
[HttpGet] public IActionResult SignIn() { return View(); } |
Now, we should create a View for this Action Method. For this purpose, we need to create a ViewModel which has Email, Password, and RememberMe properties.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
public class SignInViewModel { [Required] [EmailAddress] public string Email { get; set; } [Required] [DataType(DataType.Password)] public string Password { get; set; } [DisplayName("Remember Me")] public bool RememberMe { get; set; } } |
After creating the above ViewModel, we can create our View based on the above ViewModel.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
@model SignInViewModel @{ ViewBag.Title = "Login"; } <form asp-controller="UserManagment" asp-action="SignIn" method="post" class="mt-5 offset-3 col-6 border border-primary pt-2 pb-2 px-2 py-2"> <div> <label asp-for="Email" class="form-label"></label> <input asp-for="Email" class="form-control" /> <span asp-validation-for="Email" class="text-danger"></span> </div> <div> <label asp-for="Password" class="form-label"></label> <input asp-for="Password" class="form-control" /> <span asp-validation-for="Password" class="text-danger"></span> </div> <div class="form-check"> <input asp-for="RememberMe" class="form-check-input" type="checkbox" id="rememberMe"> <label asp-for="RememberMe" class="form-check-label" for="rememberMe"></label> </div> <div><button type="submit" class="btn btn-primary mt-2">Sign In</button></div> <div asp-validation-summary="All" class="text-danger"></div> </form> |
As shown above, the form is passed to the controller with the Post method. Thus we need to create HTTPPost Action Method for the posted data.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
[HttpPost] public async Task<IActionResult> SignIn(SignInViewModel signIn) { if (ModelState.IsValid) { var result = await signInManager.PasswordSignInAsync(signIn.Email, signIn.Password, signIn.RememberMe, false); if(result.Succeeded) { return RedirectToAction("Index", "Home"); } ModelState.AddModelError("", "UserName or Password is incorrect"); } return View(); } |
As you can see, we used the PasswordSignInAsync method of SignInManager class to process the sign-in procedure. Also, we use the value of the RememberMe property to set the IsPersistant option. If IsPersistnat is set to true, the cookie session would be persistent and the browser keeps the session even after closing the browser.
Implementing Sign-Out In ASP.NET Core
Also, each web app needs a Sign-Out ability. For this purpose, we can add an HtppPost Action method to the controller and use SignInManager class and SignOutAsync method.
|
1 2 3 4 5 6 7 8 9 10 |
[HttpPost] public async Task<IActionResult> SignOut() { await signInManager.SignOutAsync(); return RedirectToAction("Index", "Home"); } |
Then, we need to add Sign-in and Sign-out options to the main menu.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<li class="nav-item"> <a class="nav-link" asp-controller="UserManagment" asp-action="SignIn">Login</a> </li> <li class="nav-item"> <form asp-controller="UserManagment" asp-action="SignOut" method="post"> <button type="submit" class="nav-link btn-link btn">Sign Out</button> </form> </li> |
We use _MainLayout.cshtml, to add the options to the web app as do for Register User in the previous session. Also, as the method of Sign-Out action method is Post, we need to call the action method with a From as you can see.
Dynamic Sign-in & Sign-out Menu in ASP.NET Core
For making the menu dynamic, we need to inject SignInManager into the View or Layout View. For this purpose, we need to add the required namespace to the view as well which is Microsoft.AspNetCore.Identity in this case.
Then, with the IsSignedIn method, we can check whether the user is logged in or not.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
@using Microsoft.AspNetCore.Identity; @inject SignInManager<IdentityUser> signInManager; . . . <ul class="navbar-nav d-flex"> @if (signInManager.IsSignedIn(User)) { <li class="nav-item"> <form asp-controller="UserManagment" asp-action="SignOut" method="post"> <button type="submit" class="nav-link btn-link btn">Sign Out</button> </form> </li> } else { <li class="nav-item"> <a class="nav-link" asp-controller="UserManagment" asp-action="CreateUser">Register User</a> </li> <li class="nav-item"> <a class="nav-link" asp-controller="UserManagment" asp-action="SignIn">Login</a> </li> } </ul> |
You can download this Session Slides form HERE.