(C# ASP.NET Core) Sign out functionality in Identity based Authentication

Step 1 - Modify the _LoginPartial Page

Let us open the login partial page that we completed in the previous tutorial. This page appears at the top of each page and displays the name of a logged in user. We can now add a sign out link in this partial page itself.

This is the markup for the partial page.

// Pages -> Shared -> _LoginPartial 

@using Microsoft.AspNetCore.Identity

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@inject SignInManager<IdentityUser> _sm

@if (_sm.IsSignedIn(User))
{
  <div>

    <span>Welcome @User.Identity?.Name</span>
    | 
    <a asp-area="auth" asp-page="Logout">Logout</a>

  </div>
}
else
{
  <div>
    <a asp-area="auth" asp-page="Register">Register</a>
    |
    <a asp-area="auth" asp-page="Login"> Login </a>
  </div>
}

  

As you can see we have added an anchor link that points to the logout page.

Let us now add the logout page.

Video Explanation (see it happen!)

Please watch the following youtube video:

Step 2 - Add the Logout Page

Open the solution explorer and locate the auth area, and then the pages folder.

Right click the pages folder and add a page called Logout.cshtml. Let us double click to see the markup.

// Areas -> Auth -> Pages -> Logout.cshtml 

@page

@using Microsoft.AspNetCore.Identity

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@inject SignInManager<IdentityUser> _sm

@functions{

  public async Task<IActionResult> OnPostAsync() {

    await _sm.SignOutAsync();

    return LocalRedirect("~/");
  }

}

<form method="post">

  <button type="submit">Click to Logout</button>

</form>

  

First we have the directives for page, namespaces and tag helpers.

Then we have used the @inject directive for dependency injection of the SignInManager.

We have used the functions block to write the OnPost handler that executes when the user clicks the submit button for sign out.

The SignOutAsync function of the SignInManager class handles everything for logging off the user.

Lastly, we have a form that contains a submit button for sign out. So when the user clicks the sign off button, the sign out code executes and the user is logged out of the website.

Run the Application

Run the project to open the home page.

Click the login button to open the login page and do a login.

We verify that a sign out link now appears adjacent to the user name.

Click the link to open the log out page containing the button for log out.

Click the button - and we verify that the user logs out successfully. Thanks!