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?

Homeward

How did you sign in in the first place? The newly added authentication templates provide a LogOut button. – Ramsden

Answer 1

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

Reprieve

Thanks, that's exactly what I was looking for. – Homeward

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 – Atharvaveda

@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. – Simulate

The link you introduced should be updated to this link: "blazorhelpwebsite.com/ViewBlogPost/36" – Nazar

Answer 2

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("~/");
    }
}

Levine

This solution worked beautifully for me! Thanks. – Trinidadtrinitarian

I replaced OnPost with OnGet so it would log out as soon as you opened the page – Darn

@Darn Although it might work using OnGet it recommended to use OnPost to prevent unintended consequences – Coriolanus

Answer 3

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...

Piecedyed

Answer 4

If you do Blazor SSR cookie auth login and logout...

Logout.razor

@page "/account/logout"
@layout Layout.NullLayout // Create an emptry layout

@using Microsoft.AspNetCore.Authentication

@inject NavigationManager NavManager

<PageTitle>Signing out...</PageTitle>

@if (LogoutModel != null)
{
    <EditForm method="post" OnSubmit="LogoutClicked" Model="LogoutModel" FormName="LogoutModel" name="LogoutModel"></EditForm>

    <script>
        window.onload = function () {
            document.forms['LogoutModel'].submit();
        }
    </script>
}

@code {
    [CascadingParameter]
    public HttpContext? HttpContext { get; set; }

    public string LogoutModel { get; set; } = string.Empty; // This is just a dummy model

    async Task LogoutClicked()
    {
        await HttpContext!.SignOutAsync();
        NavManager.NavigateTo("/account/login");
    }
}

Then in your logout button...

void LogoutClicked()
{
    NavManager.NavigateTo("/account/logout", forceLoad: true);
}

Faubert