How can I call '/Identity/Account/ExternalLogin' from a Blazor component?

Question

My goal is to have the external provider buttons (exactly like the foreach from the /Identity/Account Login and Register pages, see below) in a Blazor component. I am using the "Blazor Server App" template.

I have successfully pulled in the external providers, enumerated buttons, and have a form with the same action as the default identity login page. My external login is with Twitter and is confirmed working on the default page.

<form action="/Identity/Account/ExternalLogin" method="post">
    @foreach (var provider in ExternalLogins)
    {
        <button type="submit" class="btn btn-primary btn-lg form-control" name="provider" 
value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
    }
</form>

When I use the button to login from the blazor component, the debug window shows a Microsoft.AspNetCore.Antiforgery.AntiforgeryValidationException being thrown. My only guess is that this is because the navigation is not initiating from one of the built-in identity pages that probably have Antiforgery elements. How do I directly navigate to this ExternalLogin page without the middle-man login/register page?

Well... you don't go the good path. Event if you get the anti CSRF token and pass it in your form data it's not going to work. Do you need only a Twitter login ? — agua from mars
Ok but if you add a new external provider you'll need the login page displaying the provider choice then. Do you need a local login ? — agua from mars
@aguafrommars No, I don't believe so. Only social/external logins. — Mark Clark

agua from mars agua from mars · Accepted Answer · 2020-07-20T07:23:04

Calling the /Identity/Account/ExternalLogin page means taking care of anti-CSRF mechanism (HTTP header and form's hidden field) and it's not easy to implement.
Instead of directly call /Identity/Account/ExternalLogin it's easier to customize the login page:

Starting from the default blazor template with authentication (wasm or server), scaffold Identity items, depending of what you need, but at least the login page and external login pages to customize them.

Select the Areas folder and right click to open the contextual menu. The choose Add -> New Scaffolded Item...

Choose Identity and click Add.

Select your Identity data context class and what you want to scaffold.

Update Areas/Identity/Pages/Account/Login.cshtml for your needs.

How can I call '/Identity/Account/ExternalLogin' from a Blazor component?

1 Answers