Google Sign-in in Razor Pages (.Net 7) cannot log me in

I have built a relatively simple website which is using ASP.NET Core Web App, Razor Page with .NET version 7. I’m just using my own authentication system (no Identity service). I was adding Google Authentication to the project using this guide.

Problem

When I click my button to sign-in with Google, I get a popup asking me to login (so far, so good).

Google login page

But when I click “Next” on that popup, it says it cannot log me in.

enter image description here

I am having different problems with different browsers but I’m trying to get it working with one (Chrome) first, then I will sort out the others.

Code involved

Program.cs for Content Security Policy, and Cross Origin Opener Policy

builder.Services.AddAuthentication(options =>
{
    options.DefaultAuthenticateScheme = CookieAuthenticationDefaults.AuthenticationScheme;
    options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
    options.DefaultChallengeScheme = GoogleDefaults.AuthenticationScheme;
})
.AddCookie()
.AddGoogle(options =>
{
    options.ClientId = builder.Configuration["Authentication:Google:ClientId"];
    options.ClientSecret = builder.Configuration["Authentication:Google:ClientSecret"];
});

app.Use(async (context, next) =>
{
    context.Response.Headers.Add("Content-Security-Policy-Report-Only", "script-src 'self' https://accounts.google.com/gsi/client;" +
        " frame-src 'self' https://accounts.google.com/gsi/;" +
        " connect-src 'self' https://accounts.google.com/gsi/");
    context.Response.Headers.Add("Cross-Origin-Opener-Policy", "same-origin-allow-popups");
    await next();
});

appsettings.json

"Authentication": {
  "Google": {
    "ClientId": "<CLIENT-ID>",
    "ClientSecret": "<CLIENT-SECRET>"
  }
}

_Layout.cshtml, including the Google authentication html:

<head>
<script src="https://accounts.google.com/gsi/client" async defer></script>
</head>

<div id="g_id_onload"
     data-client_id="<CLIENT-ID>"
     data-login_uri="http://localhost:5250"
     data-auto_prompt="false">
</div>

<div class="g_id_signin"
     data-type="standard"
     data-shape="rectangular"
     data-theme="outline"
     data-text="signin_with"
     data-size="large"
     data-logo_alignment="left">
</div>

I think my Google settings are setup fine.

Google settings

and

Other Google settings

Any ideas on how to resolve this would be greatly appreciated.