Blazor WASM to work with testing local Auth server

Question

Problem

I am currently trying to get Blazor WASM (Web Assembly) to work with a local Auth client (Fusion Auth).

Attempted solves

I tried to change the Cors policy on my Fusion Auth client. Additionally, I have tried to enable CORS on blazor WASM, but came to the conclusion that its not Blazor's job to care about CORS. It's a server thing.

Questions

I have two questions that I believe these are each related to CORS as well and probably only an issue because I am on localhost.

1. I am not getting a clean redirect to FusionAuth. Though, it does eventually redirect to the provider.

Refused to display 'http://localhost:9011/oauth2/authorize?client_id=ff87ab0d-0a7e-4bcc-af02-8fbf31a92b66&redirect_uri=https%3A%2F%2Flocalhost%3A5001%2Fauthentication%2Flogin-callback&response_type=code&scope=openid profile openid&state=30eaea5137a6491eb2447547c6948c7a&code_challenge=6KbxXv06jvGjTIG_KxvY2K6HRHy9v52z22usno4BnYk&code_challenge_method=S256&prompt=none&response_mode=query' in a frame because it set 'X-Frame-Options' to 'deny'.

2. Once I login and get back from Fusion Auth, I get the following error:

Access to XMLHttpRequest at 'http://localhost:9011/oauth2/token' from origin 'https://localhost:5001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. And POST http://localhost:9011/oauth2/token net::ERR_FAILED

My Setup

My Program.cs file looks like the following:

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.RootComponents.Add<App>("#app");

        builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

        builder.Services.AddOidcAuthentication(options =>
        {
            builder.Configuration.Bind("FusionAuth_test", options.ProviderOptions);

            options.ProviderOptions.ResponseType = "code";
            options.ProviderOptions.RedirectUri = "https://localhost:5001/authentication/login-callback";
            options.ProviderOptions.PostLogoutRedirectUri = "https://localhost:5001/";
            options.ProviderOptions.DefaultScopes.Add("openid");
        });

        await builder.Build().RunAsync();
    }
}

Where FusionAuth_Test config looks like the following:

{
  "Local": {
    "Authority": "https://login.microsoftonline.com/",
    "ClientId": "33333333-3333-3333-33333333333333333"
  },
  "FusionAuth_test": {
    "Authority": "http://localhost:9011",
    "ClientId": "myIDhere"
  }
}

To Replicate

1. Use the new .NET 5 sdk.
2. dotnet new blazorwasm -au Individual -o BlazorAuthSample5 in the CLI/powershell
3. copy my Program.cs into yours. Only a few lines added/replaced.
4. change wwwroot/appsettings.json to include your fusionAuth clientId (or other local auth provider). Fusion auth can be set up via docker like so

curl -o docker-compose.yml https://raw.githubusercontent.com/FusionAuth/fusionauth-containers/master/docker/fusionauth/docker-compose.yml
curl -o .env https://raw.githubusercontent.com/FusionAuth/fusionauth-containers/master/docker/fusionauth/.env
docker-compose up

5. dotnet run on folder and try to login

Answer 1

The error in your browser console is because FusionAuth is adding the HTTP response header of X-Frame-Options: DENY.

By default, this header will be added unless you register the origin with FusionAuth in your OAuth configuration.

In the UI, navigate to Applications > Edit > OAuth and find the Authorized request origin URLs configuration.

Try adding http://localhost:5001 to the Authorized request origin URLs and then attempt to recreate. This should cause FusionAuth to exempt this origin and not add the X-Frame-Options: DENY HTTP header to the response.

From FusionAuth Core Concepts : Application

Authorized request origin URLs OPTIONAL

This optional configuration allows you to restrict the origin of an OAuth2 / OpenID Connect grant request. If no origins are registered for this application, all origins are allowed.

By default FusionAuth will add the X-Frame-Options: DENY HTTP response header to the login pages to keep these pages from being rendered in an iframe. If the request comes from an authorized origin, FusionAuth will not add this header to the response. If you wish to load FusionAuth login pages in an iframe you will need to add the request origin to this configuration.