Google Auth error getting access token in Blazor

Question

I currently have a ASP.Net Core Web Api with Blazor WASM which can login successfully to Google OAuth using the component RemoteAuthenticatorView. My intention is now to pass the token I have to the web api, which hopefully can be used to authenticate with the web api. The issue is that TokenProvider.RequestAccessToken() produces the following error.

blazor.webassembly.js:1 Microsoft.JSInterop.JSException: An exception occurred executing JS interop: The JSON value could not be converted to System.DateTimeOffset. Path: $.token.expires | LineNumber: 0 | BytePositionInLine: 88.. See InnerException for more details.
System.Text.Json.JsonException: The JSON value could not be converted to System.DateTimeOffset. Path: $.token.expires | LineNumber: 0 | BytePositionInLine: 88.

            var tokenResult = await TokenProvider.RequestAccessToken();

            if (tokenResult.TryGetToken(out var token))
            {
                requestMessage.Headers.Authorization =
                  new AuthenticationHeaderValue("Bearer", token.Value);
                var response = await Http.SendAsync(requestMessage);

            }
        

Program.cs

            builder.Services.AddOidcAuthentication(options =>
            {
                builder.Configuration.Bind("Local", options.ProviderOptions);
                options.ProviderOptions.DefaultScopes.Add("email");
            });

Any ideas? Is a scope missing? I can see id_token in Session storage... Perhaps any net 5 example of Blazor WASM and core web api?

Edit: I see there is a network call made by RequestAccessToken to google auth, like if it were trying to authenticate again

Answer 1

Create a WebAssembly Blazor App standalone with individual accounts.

Replace the content in the appsettings.json file with the following code:

{
  "Google": {
    "Authority": "https://accounts.google.com/",
    "ClientId": "11111111111-11111111111111111111111111111111.apps.googleusercontent.com",
    "DefaultScopes": [ "email" ], // The Blazor WebAssembly template automatically configures default scopes for openid and profile
    "PostLogoutRedirectUri": "https://localhost:44313/authentication/logout-callback",
    "RedirectUri": "https://localhost:44313/authentication/login-callback",
    "ResponseType": "id_token token"
  }
}

Run your app, and click on the Login link...You're being redirected to Google' Login page. Authenticate with Google...You are being redirected to your app, the Login is changed into Logout, and your user name appears near it.

You may view the id_token and profile via the developers' tools.

How to retrieve the access token ?

Add the following code snippet to your Index page and run...

@page "/"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication;

@inject IAccessTokenProvider TokenProvider

<p>@output</p>

<button @onclick="DisplayToken">Display Access Token </button>

@code
{
    private string output;

    private async Task DisplayToken()
    {
        var tokenResult = await TokenProvider.RequestAccessToken();

        if (tokenResult.TryGetToken(out var token))
        {
            output = token.Value;

        }
    }

}

Note: The code above is for demonstration purposes only (following your code sample). However, if you perform an HTTP call to your Web Api using the HttpClient service the access token is automatically retrieved and assigned to the Authorization header by the AuthorizationMessagelHandler object.