Blazor Webassembly ASP.NET Core Hosted cannot authorize via Facebook

Question

I've got problem with my application. When I'm trying to authorize via Facebook on localhost - there's no problems, everything goes fine. After publishing my application authorization becames random... When you try to sign in via facebook there are two options:

• Infinity login display, after many login attemps one may be successfull
• You're authorized successfull

In project I use IdentityServer4 with default scaffolded Razor Pages. I think that problem may be in Blazor routing, because facebook response is interpreted by Blazor (but not always, it's random). When I got infinity login loop on one device, I can login without any problems on another device, sometimes clearing browser data helps, but not always. I know... it's very strange but much more frustrating. Below I attach screen from browser, where you can see that facebook callback is going to Blazor.

Screenshot of URL from browser

I suppose that it could be caused by Nginx configuration - because on localhost there's no problem with no metter if I'm using IIS or Kestrel. This is my Nginx site configuration:

server {
    server_name   izipass.pl www.izipass.pl;
    location / {
        proxy_pass         https://localhost:2020;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection keep-alive;
        proxy_set_header   Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;
        add_header         Service-Worker-Allowed /;
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/izipass.pl/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/izipass.pl/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

server {
    if ($host = www.izipass.pl) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = izipass.pl) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    server_name   izipass.pl www.izipass.pl;
    listen 80;
    return 404; # managed by Certbot
}

I try to figure it out from few days and I looked for any answer over Internet, but none of them solved my problem. I want try to change base path of Blazor app, and move it " https://.../app " to unable Blazor routing at "/signin-facebook".

I will be very grateful for any help.

Answer 1

Your Blazor app is intended to live as the fallback route, and invokes a static html page (index.html), when no other route is available.

So if you're getting a Blazor page loaded when you intended for an MVC controller or Api Controller to be invoked, that means that the route could not be resolved.

You could test this by removing Blazor entirely and verifying that signin-facebook now resolves to a 404 when supplying the exact same parameters as in your screenshot.

Ideally, you'll reserve a prefix like 'api' for all of your api actions so that there's no confusion between your client-side navigation and server actions.