Discord Login routes to undefined

kylejschultz commented 1 year ago

I've got the stack deployed successfully and I'm able to reach the home page the the API appears to be up as well. When I attempt to log in with Discord in the top right corner, however, it throws me to a 404 with a path of /undefined. I'm wondering if I've maybe missed something in the .env files that would handle this? I've gone in and updated both the front and backend with client IDs, VUE_APP_API_HOST and the JWT key. I imagine that the localhost references need to be there, as it's pointing to it's path inside of the container, but let me know if I'm misunderstanding.

Was ultimately hoping to host this and eventually integrate a Discord bot with the data that's pulled to make it accessible to my group via Discord commands, but would obviously require the authentication mechanism first. If this integration is something you're interested in having merged in down the line as an offering, I can work on submitting a PR once I get something working.

I went ahead and added a copy of both my .env files as well as my docker-compose.yml that I used to deploy. I did have to adjust the networks and volume pathing for my environment, and did not require the SSL pathing as Traefik handles the redirect using the labels. I'm on Discord and can chat there if it's easier for you, I sent over a friend request just now.

Thanks! Kyle

./backend/.env.production.local

# PORT
PORT = 9898

# CLIENT
CLIENT_DOMAIN = localhost

# SERVER
SERVER_DOMAIN = localhost

# DATABASE
DB_HOST = mongo
DB_PORT = 27017
DB_DATABASE = dev

# REDIS
REDIS_HOST = redis
REDIS_PORT = 6379

# DISCORD
CLIENT_ID = XXXXX
CLIENT_SECRET = XXXXX
REDIRECT_URI = http://localhost:9797/login

# JWT Signing Key - https://stackoverflow.com/a/62095056
SECRET_KEY = XXXXX

# LOG
LOG_FORMAT = dev
LOG_DIR = ../logs

# CORS
ORIGIN = http://localhost:9797
CREDENTIALS = true

# SSL
# SSL_KEY: /certs/privkey.pem
# SSL_CERT: /certs/fullchain.pem
SSL_KEY = none
SSL_CERT = none

./frontend/.env

# Example .env file. Using https://dps.arsha.io as an example

# API HOST DOMAIN
VUE_APP_API_HOST=https://api.dps.xxxxx.com

# DISCORD REDIRECT URL
# See: https://discord.com/developers/applications
VUE_APP_DISCORD_REDIRECT=https://discord.com/api/oauth2/authorize?client_id=xxxx&redirect_uri=http%3A%2F%2Flocalhost%3A9797%2Flogin&response_type=code&scope=identify&prompt=none

docker-compose.yml

version: '3.7'

services:
  site:
    build:
      context: ./frontend
      dockerfile: Dockerfile
      target: production-build-stage
    container_name: dps-meter-site
    ports:
      - "9797:80"
    restart: 'unless-stopped'
    networks:
      - traefik-proxy
    depends_on:
      - api
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.dps.entrypoints=http"
      - "traefik.http.routers.dps.rule=Host(`dps.xxxxxx`)"
      - "traefik.http.middlewares.dps-https-redirect.redirectscheme.scheme=https"
      - "traefik.http.routers.dps.middlewares=dps-https-redirect"
      - "traefik.http.routers.dps-secure.entrypoints=https"
      - "traefik.http.routers.dps-secure.rule=Host(`dps.xxxxxx`)"
      - "traefik.http.routers.dps-secure.tls=true"
      - "traefik.http.routers.dps-secure.tls.certresolver=http"
      - "traefik.http.routers.dps-secure.service=dps"
      - "traefik.http.services.dps.loadbalancer.server.port=80"
      - "traefik.docker.network=traefik-proxy"
      - "flame.type=app"
      - "flame.name=dps"
      - "flame.url=dps.xxxxxx"
      - "flame.icon=custom"
  api:
    build:
      context: ./backend
      dockerfile: Dockerfile
      target: production-build-stage
    container_name: dps-meter-api
    ports:
      - "9898:9898"
    volumes:
      - /appdata/dps-meter/backend:/app
      - /appdata/dps-meter/backend/node_modules:/app/node_modules
    restart: 'no'
    networks:
      - traefik-proxy
    links:
      - mongo
      - redis
    depends_on:
      - mongo
      - redis
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.dps-api.entrypoints=http"
      - "traefik.http.routers.dps-api.rule=Host(`api.dps.xxxxxx`)"
      - "traefik.http.middlewares.dps-api-https-redirect.redirectscheme.scheme=https"
      - "traefik.http.routers.dps-api.middlewares=dps-api-https-redirect"
      - "traefik.http.routers.dps-api-secure.entrypoints=https"
      - "traefik.http.routers.dps-api-secure.rule=Host(`api.dps.xxxxxx`)"
      - "traefik.http.routers.dps-api-secure.tls=true"
      - "traefik.http.routers.dps-api-secure.tls.certresolver=http"
      - "traefik.http.routers.dps-api-secure.service=dps-api"
      - "traefik.http.services.dps-api.loadbalancer.server.port=9898"
      - "traefik.docker.network=traefik-proxy"
  redis:
    image: redis:latest
    container_name: redis
    restart: 'unless-stopped'
    ports:
      - '6378:6379'
    networks:
      - traefik-proxy
  mongo:
    image: mongo:latest
    container_name: mongo
    volumes:
      # Location for MongoDB data
      - /appdata/dps-meter/mongo/data:/data/db
    ports:
      - '27016:27017'
    networks:
      - traefik-proxy
    command: --bind_ip_all --replSet loa

networks:
 traefik-proxy:
    external: true

guy0090 commented 1 year ago

Hi, thanks for the detailed report!

Regarding the redirect, is there a chance traefik is the cause here? Looking at the provided environment/docker files everything should be working. I'm unsure how it's even returning undefined on the redirect URI unless your frontend .env is missing.

If you'd like to check the code yourself, you can find it in the following files:

Redirects: App.vue#L296
Loads environment vars: config/index.ts#L4
Vuex module to access the above vars: modules/env.module.ts#L13

Also, I may have declined your friend on Discord (been getting a lot of spam adds recently). If you still want to talk send it again!

Cheers

ksFPV commented 1 year ago

had almost the same issue, fixed it with deploying my owwn nginx.conf to the frontend container with:

    location / {
        root   /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }

since nginx inside the frontend Contrainer seemed to do the routing for /login and such. After altering that config it worked for me

guy0090 / LostArkLogs

Discord Login routes to undefined #7