Blazor C# equivalent to submit form method="post" action="/Account/Logout"

[michaelcsikos]

Is there a way to call the logout function with NavigationManager.NavigateTo or something else in C# code?

<form method="post" action="/Account/Logout">
    <button type="submit" class="nav-link btn btn-link">Log out</button>
</form>

[rockfordlhotka]

Blazor server or wasm?

In Blazor server you normally have a logout page like this. And you navigate to that page like this.

In Blazor wasm you don't have to log out the aspnetcore server - just set the current user in the authentication provider to an unauthenticated ClaimsPrincipal.

[michaelcsikos]

Blazor Server.

Yes, I have implemented the logout exactly like this, however, I would like to have an avatar drop-down menu with Log out as an option like GitHub, Google, etc:

I can't figure out how to perform the logout from C# in the menu item's click event. NavigationManager.NavigateTo("/Account/Logout") doesn't work. How do you perform a submit for method="post" action="/Account/Logout" with C# code?

[michaelcsikos]

@swegele @TheCakeMonster Can you shed any light on this for me?

[TheCakeMonster]

If it is triggered by a user clicking on it, then they simply need click on an input in an HTML form that triggers the post to the server,, using the HTML you have. You probably don't need to run it in code - unless you are saying that, for some reason, you have no control of the HTML that the menu contains?

[swegele]

Yes I had some trouble with that too because the logoff.cshtml is a razor view which is not included in the normal routes.
But I think it is worth the trouble because by sending the user to the logoff page, we effectively cut the circuit and the browser is no longer consuming server resources in the form of a blazor/SignalR circuit.

Anyway, I took care of it like this...

1. On the App.razor page I have the following:

<AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    @{
                        SendToLogoff();
                    }
                </NotAuthorized>
</AuthorizeRouteView>

This causes any unauthorized UI to simply redirect user to logoff page. I've got a custom security policy that handles our custom authentication mechanism.

Here is that method:

    private async Task SendToLogoff()
    {
        //several child components attempting to render will all trigger the unauthorized ui path above which calls SendToLogoff multiple times...we only need to process one
        if (!_LogoffInProgress)
        {
            _LogoffInProgress = true;

            //custom url helper method that creates a safe URL regardless of how site is deployed in IIS as root or subapp 
            var url = _jtNav.GetFullURL(Pages.LogoffModel.CONST_PAGEROUTE);

            _JSRuntime.InvokeVoidAsync("locationChange", new object[1] { url });
        }
    }

2. From the logout.razor button component - I logout the user by calling this method:

    public async Task<AuthenticationState> Logout()
    {
        var task = Task.Run(() =>
        {
            var unauthClaim = new ClaimsPrincipal();
            return new AuthenticationState(unauthClaim);
        });

        _serverAuthProvider.SetAuthenticationState(task);
        return await task;
    }

3. This causes the user to become unauthorized which triggers that redirect above in App.razor

4. Here is that javascript method on Layout.cshtml

    <script>
        window.locationChange = (url) => {
            window.location.href = url;
        };
    </script>

That all seems to be working nicely for me. Hope this helps.

P.S. I can't remember why, but I am purposely not awaiting the javascript method. I think there was some weird script error if I did.

[michaelcsikos]

Fantastic, thank you!