How to sign out over HttpContext in server-side Blazor

Question

I access the HttpContext in a Blazor server-side view to manually log out. I added this line to Startup.cs: services.AddHttpContextAccessor(); and inject it in the view with @inject IHttpContextAccessor HttpContextAccessor. I've got a log out button which tries to execute this code:

await HttpContextAccessor.HttpContext.SignOutAsync("Cookies");

but I get the following error message:

System.InvalidOperationException: 'Headers are read-only, response has already started.'

How can I prevent this error?

How did you sign in in the first place? The newly added authentication templates provide a LogOut button. — H H, Jul 29 '19 at 10:49

score 10 · Answer 1 · answered Feb 25 '21 at 04:06

If you scaffolded Identity and overridden the old "LogOut.cshtml" from when you created the project via template, the Logout button won't logout. Assume you've used the default IdentityUser model. I ran into this issue and just wanted to add this if anyone else had this problem as well. I'm using Blazor Server with .Net 5.0.3's template. You can remove the Logout.cshtml.cs after as well.

Replace this \Areas\Identity\Pages\Account\LogOut.cshtml

@page
@model LogoutModel
@{
    ViewData["Title"] = "Log out";
}

<header>
    <h1>@ViewData["Title"]</h1>
    @{
        if (User.Identity.IsAuthenticated)
        {
            <form class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Page("/", new { area = "" })" method="post">
                <button type="submit" class="nav-link btn btn-link text-dark">Click here to Logout</button>
            </form>
        }
        else
        {
            <p>You have successfully logged out of the application.</p>
        }
    }
</header>

Replace with

@page
@using Microsoft.AspNetCore.Identity
@attribute [IgnoreAntiforgeryToken]
@inject SignInManager<IdentityUser> SignInManager
@functions {
    public async Task<IActionResult> OnPost()
    {
        if (SignInManager.IsSignedIn(User))
        {
            await SignInManager.SignOutAsync();
        }

        return Redirect("~/");
    }
}

I replaced `OnPost` with `OnGet` so it would log out as soon as you opened the page — DLeh, Apr 07 '21 at 18:45
@DLeh Although it might work using OnGet it [recommended to use OnPost](https://stackoverflow.com/a/14587231/283787) to prevent [unintended consequences](https://twitter.com/Nick_Craver/status/296281730984316928) — openshac, Sep 01 '22 at 11:58

score 8 · Accepted Answer · edited Apr 04 '20 at 16:58

8

This tripped me up too, but you need the logout functionality to be on a Razor Page (not a Blazor component). Create a Logout page and put your logout code in the OnGetAsync() method.

Your logout button can then link to the logout page.

http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/4316/A-Demonstration-of-Simple-Server-side-Blazor-Cookie-Authentication.aspx - this is a helpful example

edited Apr 04 '20 at 16:58

Vy Do

46,709
59
215
313

answered Jul 29 '19 at 16:19

Robert Swilley

493
5
11

1

Thanks, that's exactly what I was looking for. – Pascal R. Aug 07 '19 at 15:24
6

Best answer but it's extremely sad the only way to log in/out is by using a decade old Razor page. Hoping this is not considered finished/ship-able by MS – Eric Holland Feb 14 '20 at 03:09
1

@EricHolland More than two years later this is still so. It's so ridiculous that I simply crossed off Blazor as another silly UI demo tool. – Zimano Jul 07 '22 at 09:02
The link you introduced should be updated to this link: "https://blazorhelpwebsite.com/ViewBlogPost/36" – Arani Aug 15 '22 at 07:26

score 4 · Answer 3 · edited Apr 04 '20 at 16:58

Don't use IHttpContextAccessor.

I guess that you're using ASP.NET Core Blazor authentication and authorization new system. If not, then start with it right now. Live is too short to be wasted over other things. This is the best product created so far for Blazor's authentication and authorization, and it is based on the Identity UI (This is not Blazor, of course). Additionally, there are a couple of Components which enable controlling the flow of authentication and authorization in your application, such as displaying a "Log in" button and a "Log out" button in your layout, interchangeably altering depending on your authentication state, etc.

Please, go to this page and start learning this excellent system, and then come here for specific issues you face: https://learn.microsoft.com/en-us/aspnet/core/security/blazor/?view=aspnetcore-3.0&tabs=visual-studio

Hope this helps...

How to sign out over HttpContext in server-side Blazor

3 Answers3

Linked