Question 98509 in Nginx Question posted in
The official documentation can be found here.

Debug third-party authentications in localhost with docker and nginx

We have a website where we just added third-party authentications such as Google, Twitter. I’m trying to test these authentications in localhost (MacOS).

I’m running a docker to run nginx, here is docker-compose-dev.xml

version: "3"
services:
  https:
    image: bitnami/nginx:latest
    restart: unless-stopped
    ports:
      - 443:443/tcp
    volumes:
      - ./conf.d/dev.conf:/opt/bitnami/nginx/conf/server_blocks/default.conf:ro
    extra_hosts:
      - "host.docker.internal:host-gateway"

And here is conf.d/dev.conf:

upstream funfun {
   server 178.62.87.72:443;
}
server {
    listen  443 ssl;
    server_name localhost;
    ssl_certificate /certs/server.crt;
    ssl_certificate_key /certs/server.key;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_session_timeout 1d;
    ssl_stapling off;
    ssl_stapling_verify off;
    add_header Strict-Transport-Security max-age=15768000;
    add_header X-Frame-Options "";
    proxy_ssl_name "www.funfun.io";
    proxy_ssl_server_name on;
    location ~ /socialLoginSuccess {
        rewrite ^ '/#/socialLoginSuccess' redirect;
     }
    location ~ /auth/(.*) {
        proxy_pass  https://funfun/10studio/auth/$1?$query_string;
        proxy_set_header Host localhost;
     }
    location / {
        proxy_set_header    Host                $host;
        proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
        proxy_set_header    X-Forwarded-Proto   $scheme;
        proxy_set_header    Accept-Encoding     "";
        proxy_set_header    Proxy               "";
        proxy_pass          http://host.docker.internal:3000/;
        # These three lines added as per https://github.com/socketio/socket.io/issues/1942 to remove socketio error
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection "upgrade";
    }
}

The way we launch the app is sudo PORT=8000 HTTPS=true ./node_modules/.bin/react-scripts start. Then https://localhost:8000/#/sign in a browser does open the page where the authentication buttons are.

The url of the button linking to Google authentication is https://localhost/10studio/auth/google. By clicking on it, I see first https://localhost/10studio/auth/google in the browser address bar, but the page to enter Google ID and password does not appear, then several seconds later, the url becomes https://localhost/#/socialLoginSuccess, and the page shows 502 Bad Gateway. I see the following logs in the terminal running nginx:

$ docker-compose --f docker-compose-dev.yml up
WARNING: Found orphan containers (frontend_10studio_1, frontend_frontend_1) for this project. If you removed or renamed this service in your compose file, you can run this command with the --remove-orphans flag to clean it up.
Starting frontend_https_1 ... done
Attaching to frontend_https_1
https_1  | nginx 21:24:05.37 
https_1  | nginx 21:24:05.38 Welcome to the Bitnami nginx container
https_1  | nginx 21:24:05.38 Subscribe to project updates by watching https://github.com/bitnami/bitnami-docker-nginx
https_1  | nginx 21:24:05.39 Submit issues and feature requests at https://github.com/bitnami/bitnami-docker-nginx/issues
https_1  | nginx 21:24:05.39 
https_1  | nginx 21:24:05.39 INFO  ==> ** Starting NGINX setup **
https_1  | nginx 21:24:05.42 INFO  ==> Validating settings in NGINX_* env vars
https_1  | nginx 21:24:05.43 INFO  ==> Initializing NGINX
https_1  | realpath: /bitnami/nginx/conf/vhosts: No such file or directory
https_1  | 
https_1  | nginx 21:24:05.45 INFO  ==> ** NGINX setup finished! **
https_1  | nginx 21:24:05.47 INFO  ==> ** Starting NGINX **
https_1  | 172.19.0.1 - - [08/Nov/2021:21:25:06 +0000] "GET /10studio/auth/google HTTP/1.1" 302  0 "https://localhost:8000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36" "-"
https_1  | 172.19.0.1 - - [08/Nov/2021:21:25:07 +0000] "GET /auth/google/callback?code=4%2F0AX4XfWiqleRl2StBpNOgOtzjqZlftvq9-uDmiPVLZqcgo2xjjhohu47iAV5qxoJThaQYzg&scope=email+profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+openid&authuser=0&prompt=none HTTP/1.1" 302  82 "https://localhost:8000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36" "-"
https_1  | 172.19.0.1 - - [08/Nov/2021:21:25:07 +0000] "GET /auth/signinSuccess HTTP/1.1" 302  82 "https://localhost:8000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36" "-"
https_1  | 172.19.0.1 - - [08/Nov/2021:21:25:07 +0000] "GET /socialLoginSuccess HTTP/1.1" 302  138 "https://localhost:8000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36" "-"
https_1  | 2021/11/08 21:25:39 [error] 27#27: *2 connect() failed (110: Connection timed out) while connecting to upstream, client: 172.19.0.1, server: localhost, request: "GET / HTTP/1.1", upstream: "http://192.168.65.1:3000/", host: "localhost", referrer: "https://localhost:8000/"
https_1  | 172.19.0.1 - - [08/Nov/2021:21:25:39 +0000] "GET / HTTP/1.1" 502  552 "https://localhost:8000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36" "-"

Does anyone know what’s wrong here?

Additionally, when I debug nginx, it is like a black box for me. I really want to be able to trace and see which url enters which location block, and changes to which url (by proxy_pass or rewrite, etc.). Does anyone have a better way to debug or log that?

Edit 1:

I tried also another slightly different docker-compose-dev.xml:

version: "3"
services:
  https:
    image: bitnami/nginx:latest
    restart: unless-stopped
    ports:
      - 443:443/tcp
    volumes:
      - ./conf.d/dev.mac.conf:/opt/bitnami/nginx/conf/server_blocks/default.conf:ro
    extra_hosts:
      - "172.17.0.1:host-gateway"

And slight different dev.mac.conf:

upstream funfun {
   server 178.62.87.72:443;
}
server {
    listen 443 ssl;
    server_name localhost;
    ssl_certificate /certs/server.crt;
    ssl_certificate_key /certs/server.key;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_session_timeout 1d;
    ssl_stapling off;
    ssl_stapling_verify off;
    add_header Strict-Transport-Security max-age=15768000;
    add_header X-Frame-Options "";
    proxy_ssl_name "www.funfun.io";
    proxy_ssl_server_name on;
    location ~ /socialLoginSuccess {
        rewrite ^ '/#/socialLoginSuccess' redirect;
     }
    location ~ /auth/(.*) {
        proxy_pass  https://funfun/10studio/auth/$1?$query_string;
        proxy_set_header Host localhost;
     }
    location / {
        proxy_set_header    Host                $host;
        proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
        proxy_set_header    X-Forwarded-Proto   $scheme;
        proxy_set_header    Accept-Encoding     "";
        proxy_set_header    Proxy               "";
        proxy_pass          http://172.17.0.1:8000/;

        # These three lines added as per https://github.com/socketio/socket.io/issues/1942 to remove socketio error
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection "upgrade";
    }
}

I still launch the app by sudo PORT=8000 HTTPS=true ./node_modules/.bin/react-scripts start. This time, https://localhost:8000/#/sign in a browser opens the page where the authentication button is. Clicking on the button linked to https://localhost/10studio/auth/google opens the Google authentication page. After successful authentication, the url becomes https://localhost/#/socialLoginSuccess, and the page shows 502 Bad Gateway. However, the correct url would be https://localhost:8000/#/socialLoginSuccess.

Here is the log:

https_1  | nginx 03:12:10.32 INFO  ==> ** Starting NGINX **
https_1  | 172.19.0.1 - - [12/Nov/2021:03:12:28 +0000] "GET /10studio/auth/google HTTP/1.1" 302  0 "https://localhost:8000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:94.0) Gecko/20100101 Firefox/94.0" "-"
https_1  | 172.19.0.1 - - [12/Nov/2021:03:12:46 +0000] "GET /auth/google/callback?code=4%2F0AX4XfWgQ8g3LC6nYxBbk-BjBq0cWGFcfSwoPWZbC8Rky0IVngpAtKTTuYIbYsgbW96g6Dg&scope=email+profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+openid&authuser=0&prompt=consent HTTP/1.1" 302  82 "https://accounts.google.fr/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:94.0) Gecko/20100101 Firefox/94.0" "-"
https_1  | 172.19.0.1 - - [12/Nov/2021:03:12:46 +0000] "GET /auth/signinSuccess HTTP/1.1" 302  82 "https://accounts.google.fr/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:94.0) Gecko/20100101 Firefox/94.0" "-"
https_1  | 172.19.0.1 - - [12/Nov/2021:03:12:46 +0000] "GET /socialLoginSuccess HTTP/1.1" 302  138 "https://accounts.google.fr/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:94.0) Gecko/20100101 Firefox/94.0" "-"
https_1  | 172.19.0.1 - - [12/Nov/2021:03:12:46 +0000] "GET / HTTP/1.1" 502  150 "https://accounts.google.fr/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:94.0) Gecko/20100101 Firefox/94.0" "-"
https_1  | 2021/11/12 03:12:46 [error] 28#28: *1 connect() failed (111: Connection refused) while connecting to upstream, client: 172.19.0.1, server: localhost, request: "GET / HTTP/1.1", upstream: "http://172.17.0.1:8000/", host: "localhost", referrer: "https://accounts.google.fr/"
https_1  | 172.19.0.1 - - [12/Nov/2021:03:12:46 +0000] "GET /favicon.ico HTTP/1.1" 502  150 "https://localhost/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:94.0) Gecko/20100101 Firefox/94.0" "-"
https_1  | 2021/11/12 03:12:46 [error] 28#28: *1 connect() failed (111: Connection refused) while connecting to upstream, client: 172.19.0.1, server: localhost, request: "GET /favicon.ico HTTP/1.1", upstream: "http://172.17.0.1:8000/favicon.ico", host: "localhost", referrer: "https://localhost/"

I believe this version of the configuration files is closer to a correct solution. The only problem is that the final url should be https://localhost:8000/#/socialLoginSuccess instead of https://localhost/#/socialLoginSuccess. Does anyone know how to achieve that?

Tags:

2

Answers


  1. 0

    You have error in the logs (and it isn’t a problem with authentication):

    [error] 27#27: *2 connect() failed (110: Connection timed out) while connecting to upstream, client: 172.19.0.1, server: localhost, request: "GET / HTTP/1.1", upstream: "http://192.168.65.1:3000/"

    Your nginx container is not able to reach configured upstream (http://host.docker.internal:3000/). There can be many causes for that error: wrong network/port configuraton, port exposing, moby itself may have a own bugs with host.docker.internal DNS configuration, …

    Login or Signup to reply.
  2. 0

    The OAUTH flow happens successfully.
    Note that most of the flow is happening against localhost:8000 which means going AROUND nginx and direct to your app.
    Your app is running on port 8000 but you have configured nginx to connect to "upstream" (your app) on port 3000 (see your nginx config).

    At the end of the flow the request is not longer going direct to your app but it goes to nginx which then tries to connect to your app/upstream on port 3000 which doesn’t work because your app is running on 8000.

    Update your nginx config to point at port 8000 and try again.

    I’d also suggest that you test the entire flow connecting against nginx rather than connecting directly to your app on port 8000 to reduce confusion.

    https_1  | 172.19.0.1 - - [08/Nov/2021:21:25:07 +0000] "GET /socialLoginSuccess HTTP/1.1" 302  138 "https://localhost:8000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36" "-"
https_1  | 2021/11/08 21:25:39 [error] 27#27: *2 connect() failed (110: Connection timed out) while connecting to upstream, client: 172.19.0.1, server: localhost, request: "GET / HTTP/1.1", upstream: "http://192.168.65.1:3000/", host: "localhost", referrer: "https://localhost:8000/"
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search