I'm trying to add basic authentication to a nginx reverse proxy which is in front of a nuxtjs app.

I've configured nginx as such

server {

server_name <url>;

auth_basic "Restricted Content";
auth_basic_user_file /etc/nginx/.htpasswd;


gzip on;
gzip_types text/plain application/xml text/css application/javascript;
gzip_min_length 1000;

location / {


proxy_pass http://127.0.0.1:3222;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}

listen 443 ssl; # managed by Certbot
But if hangs. I've also tried it in the location section, but this hangs too, what am I missing?

The .htpasswd file exists with the correct details in.

Have also tried changing

upstream backend {
server backend1.example.com weight=5;
server backend2.example.com:8080;
server unix:/tmp/backend3;

server backup1.example.com:8080 backup;
server backup2.example.com:8080 backup;
}

server {
location / {
proxy_pass http://backend;
}
}
to something similar to this, but still no luck

Remove basic auth and everything works fine. I type in the username and password, and it just sits there spinning. I've tried chrome dev tools, and nothing actually appears in the network page. Eventually i'll get error 504 timeout