Nginx not working with domain/url that points to server IP

The configuration I have set (below) works for localhost but not for my domain. The goal is to access port 3000 externally with basic auth so only I can access it. When I go to localhost, it is upgraded to https, I have to complete the authentication, and then port 3000 is shown, just as it's meant to. However, going to api.example.com does not prompt authentication, does not upgrade the connection, and just shows Invalid Host header. When I open port 3000 for port forwarding and go to api.example.com:3000, I can access the port, but it doesn't require authentication, doesn't use https, and my goal is to avoid port forwarding. This configuration came from instructions so I don't know what could be the issue. Why is my subdomain not working with this config?

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

upstream supabase {
    server 127.0.0.1:3000;
}

server {
    listen      80;
    server_name localhost *host IP* api.example.com;
    access_log  off;
    rewrite ^ https://$host$request_uri? permanent;
}

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name localhost *host IP* api.example.com;

    ssl_certificate /etc/api.example.com/fullchain.pem;
    ssl_certificate_key /etc/api.example.com/privkey.pem;

    # STUDIO
    location / {
        auth_basic "Authentication Required";
        auth_basic_user_file /etc/nginx/.htpasswd;
        proxy_set_header Host $host;
        proxy_pass http://supabase;
        proxy_redirect off;
        proxy_set_header Upgrade $http_upgrade;
    }
}

Firewall:

 sudo ufw status verbose
Status: active
Logging: on (low)
Default: deny (incoming), allow (outgoing), deny (routed)
New profiles: skip

To                         Action      From
--                         ------      ----
80/tcp (Nginx HTTP)        ALLOW IN    Anywhere
80                         ALLOW IN    Anywhere
443                        ALLOW IN    Anywhere
80/tcp                     ALLOW IN    Anywhere
443/tcp                    ALLOW IN    Anywhere
8000                       ALLOW IN    Anywhere
80,443/tcp (Nginx Full)    ALLOW IN    Anywhere
443/tcp (Nginx HTTPS)      ALLOW IN    Anywhere
80/tcp (Nginx HTTP (v6))   ALLOW IN    Anywhere (v6)
80 (v6)                    ALLOW IN    Anywhere (v6)
443 (v6)                   ALLOW IN    Anywhere (v6)
80/tcp (v6)                ALLOW IN    Anywhere (v6)
443/tcp (v6)               ALLOW IN    Anywhere (v6)
8000 (v6)                  ALLOW IN    Anywhere (v6)
80,443/tcp (Nginx Full (v6)) ALLOW IN    Anywhere (v6)
443/tcp (Nginx HTTPS (v6)) ALLOW IN    Anywhere (v6)

Your server block for port 80 has only the name localhost configured.

server_name localhost;

The domain api.example.com is missing here. So the request to that domain via HTTP is captured by the default server block from the nginx default configuration.

Add the domain here, as you did it in the SSL server block.

server_name localhost api.example.com;