Cannot use domain names with reverse proxy

[Thomas-Philippot]

Hello, I have succesfully installed the app, but when I try to change my local IP addresses with domain names, i get an error on login (constantly redirected to login page)

My docker-compose.yml file :

version: "3"

services:
  server:
    image: yooooomi/your_spotify_server
    restart: always
    ports:
      - "8000:8080"
    links:
      - mongo
    depends_on:
      - mongo
    environment:
      API_ENDPOINT: http://spotify-api.home # This MUST be included as a valid URL in the spotify dashboard (see below)
      CLIENT_ENDPOINT: http://spotify.home
      SPOTIFY_PUBLIC: <private>
      SPOTIFY_SECRET: <private>
  mongo:
    container_name: mongo
    image: mongo:bionic
    volumes:
      - ./your_spotify_db:/data/db

  web:
    image: yooooomi/your_spotify_client
    restart: always
    ports:
      - "3000:3000"
    environment:
      API_ENDPOINT: http://spotify-api.home

In nginx proxy manager i added two hosts :

1. spotify.home -> wich redirect to my server ip port 3000
2. spotify-api.home -> wich redirect to my server ip port 8000

Finally on my spotify app the redirect URI is : http://spotify-api.home/oauth/spotify/callback

When I access spotify.home the frontend loads, but i keep getting redirected to /login

The error in console : GET http://spotify-api.home/version 401 (Unauthorized)

(I tried adding CORS env var, refreshing browser cache... can't see what is wrong)

[jack-mil]

I am also trying a similar setup, let me know if you figure anything out

[Yooooomi]

I feel like this is a cookie problem. Having it on a domain without https might be the issue actually.

[Geda173]

I've been wrestling with this problem for weeks now and I finally found the solution. Here is my .yml:

Version: "3"

services:
  server:
    image: yooooomi/your_spotify_server
    restart: always
    ports:
      - "8090:8080"
    links:
      - mongo
    depends_on:
      - mongo
    environment:
      API_ENDPOINT: http://api.subdomain.domain.de
      CLIENT_ENDPOINT: https://subdomain.domain.de
      SPOTIFY_PUBLIC: secret key
      SPOTIFY_SECRET: secret key
  mongo:
    container_name: mongo
    image: mongo:6
    volumes:
      - ./your_spotify_db:/data/db

  web:
    image: yooooomi/your_spotify_client
    restart: always
    ports:
      - "3090:3000"
    environment:
      API_ENDPOINT: http://api.subdomain.domain.de

Note the slight difference in API_ENDPOINT and CLIENT_ENDPOINT: API uses http, CLIENT https. This has finally solved my problem as the login always came back with an error message. Maybe this helps.

Here is my nginx config:

# http -> https
server {
    if ($host = api.subdomain.domain.de) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

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

   listen 80;
   server_name subdomain.domain.de *.subdomain.domain.de;
   return 301 https://$host$request_uri;

}

# Spotify Web client
server {
    listen 443 ssl;
    server_name subdomain.domain.de;

    location / {
        proxy_pass http://localhost:3090;

        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";

        # set proxy headers
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    ssl_certificate  # managed by Certbot
    ssl_certificate_key  # managed by Certbot
}

# Spotify Server
server {
    listen 443 ssl;
    server_name api.subdomain.domain.de;

    location / {
        proxy_pass http://localhost:8090;

        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";

        # set proxy headers
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    ssl_certificate # managed by Certbot
    ssl_certificate_key # managed by Certbot
}

[Dav-Git]

I need to correct my previous comment by saying that @Geda173 's approach worked beautifully after tinkering a little. It is however crucial to redirect your http traffic to https in your reverse proxy! I can also add an example on doing this in Caddy

http://your.domain {
        redir https://your.domain{uri} permanent
}
https://your.domain {
        tls you@your.email
        reverse_proxy localhost:8080
}