search

Yooooomi / your_spotify

Self hosted Spotify tracking dashboard
GNU General Public License v3.0
3.01k stars 122 forks source link

Login Problems #403

Closed Its4Nik closed 4 months ago

Its4Nik commented 4 months ago

So I saw this project and wanted to try it out, but I can't seem to get further than running it, actually using it doesn't work.

  server:
    image: yooooomi/your_spotify_server
    restart: always
    container_name: spotify-server
    ports:
      - "8180:8080"
    links:
      - mongo
    depends_on:
      - mongo
    environment:
      API_ENDPOINT: https://stats.XXX.de
      CLIENT_ENDPOINT: https://api-stats.XXX.de/
      SPOTIFY_PUBLIC: XXXXXX
      SPOTIFY_SECRET: XXXXXX
      CORS: i-want-a-security-vulnerability-and-want-to-allow-all-origins

  mongo:
    container_name: spotify-db
    image: mongo:6
    volumes:
      - ./spotify_db:/data/db

  web:
    container_name: spotify-client
    image: yooooomi/your_spotify_client
    restart: always
    ports:
      - "3004:3000"
    environment:
      API_ENDPOINT: https://stats.XXX.de

And those are my redirect URIs:

    https://api-stats.XXX.de/oauth/spotify/callback
    https://api-stats.XXX.de/oauth/spotify
    https://stats.XXX.de/oauth/spotify/callback
    https://stats.XXX.de/oauth/spotify
    https://stats.XXX.de

image

This is the login page: image

RagingCactus commented 4 months ago 
      API_ENDPOINT: https://stats.XXX.de
      CLIENT_ENDPOINT: https://api-stats.XXX.de/

That seems to be the wrong way around doesn't it?

Also, I'd recommend removing the CORS variable entirely, your deployment will work without setting it to any value manually.

Its4Nik commented 4 months ago 
      API_ENDPOINT: https://stats.XXX.de
      CLIENT_ENDPOINT: https://api-stats.XXX.de/

That seems to be the wrong way around doesn't it?

Also, I'd recommend removing the CORS variable entirely, your deployment will work without setting it to any value manually.

yeah, i changed it thanks, but it still doesn't show up (also after removing cors). Console log is clear.

And the container logs (server, client, db) are all clear (no errors only stdout) as well

RagingCactus commented 4 months ago

Did you change the values in both the server and web containers? Are you sure both containers were recreated properly after changing the setting?

Also, if the problem persists after checking both of the above: Please describe in detail what happens when you press the login button. To which URL are you redirected to? Is the browser console clear of errors? Does the network tab show any errors?

Its4Nik commented 4 months ago

Did you change the values in both the server and web containers? Are you sure both containers were recreated properly after changing the setting?

Also, if the problem persists after checking both of the above: Please describe in detail what happens when you press the login button. To which URL are you redirected to? Is the browser console clear of errors? Does the network tab show any errors?

Okay so i changed both values and i still get redirected to an empty page:

But this time the link is different:

https://api-stats.XXX.de

(im on the train rn so might have to take a look at it tomorrow)

RagingCactus commented 4 months ago

Again, please submit all the information you have. What happens in what order when you press which button? Is that the full URL you are being redirected to? (It pretty much can't be; the backend displays "Hello !" on its / index page, so the page wouldn't be empty) Also, please supply relevant logs from the frontend, backend, and browser.

Its4Nik commented 4 months ago

Again, please submit all the information you have. What happens in what order when you press which button? Is that the full URL you are being redirected to? (It pretty much can't be; the backend displays "Hello !" on its / index page, so the page wouldn't be empty) Also, please supply relevant logs from the frontend, backend, and browser.

On the login Site: Docker compose:

 server:
    image: yooooomi/your_spotify_server
    restart: always
    container_name: spotify-server
    ports:
      - "8180:8080"
    links:
      - mongo
    depends_on:
      - mongo
    environment:
      API_ENDPOINT: https://api-stats.XXX.de/
      CLIENT_ENDPOINT: https://stats.XXX.de/
      SPOTIFY_PUBLIC: XXX
      SPOTIFY_SECRET: XXX
      CORS: i-want-a-security-vulnerability-and-want-to-allow-all-origins

  mongo:
    container_name: spotify-db
    image: mongo:6
    volumes:
      - ./spotify_db:/data/db

  web:
    container_name: spotify-client
    image: yooooomi/your_spotify_client
    restart: always
    ports:
      - "3004:3000"
    environment:
      API_ENDPOINT: https://api-stats.XXX.de/

Console error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api-stats.XXX.de/me. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 301.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api-stats.XXX.de/me. (Reason: CORS request did not succeed). Status code: (null).

Object { stack: "ec@https://stats.XXX.de/static/js/main.e3d08b6e.js:2:402371\nHc</</u.onerror@https://stats.XXX.de/static/js/main.e3d08b6e.js:2:417263\n", message: "Network Error", name: "AxiosError", code: "ERR_NETWORK", config: {…}, request: XMLHttpRequest }
[thunk.ts:24:14](https://stats.XXX.de/static/js/services/redux/modules/user/thunk.ts)
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api-stats.XXX.de/global/preferences. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 301.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api-stats.XXX.de/global/preferences. (Reason: CORS request did not succeed). Status code: (null).

Object { stack: "ec@https://stats.XXX.de/static/js/main.e3d08b6e.js:2:402371\nHc</</u.onerror@https://stats.XXX.de/static/js/main.e3d08b6e.js:2:417263\n", message: "Network Error", name: "AxiosError", code: "ERR_NETWORK", config: {…}, request: XMLHttpRequest }

When I press login it redirects to:

https://api-stats.XXX.de/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004//oauth/spotify

So I guess something is wrong with my redirect?

When I adjust the redirect manually it goes back to the same page.

Container Logs: image image image

RagingCactus commented 4 months ago

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api-stats.XXX.de/me. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 301.

This is very weird, as the /me endpoint in the backend does not return a 301, even when not logged in. Are you absolutely, positively sure that https://api-stats.XXX.de/me actually reaches the backend container and NOT the frontend container or any other unrelated service? To verify, can you please open https://api-stats.XXX.de/ in a browser and post a screenshot of what you see? Can you post the output of curl -v https://api-stats.XXX.de/me so we can see the headers and response body?

https://api-stats.xxx.de/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004//oauth/spotify

This also looks like something bad is happening on your reverse proxy level or some component that rewrites your paths. The :3004 looks suspiciously like the port you are using for your frontend container though. Just to make sure though, please post the content you get back when you open the following URL in a browser: https://stats.XXX.de/variables.js.

In general, my best guess is that this issue is related to your reverse proxy or load balancer configuration. Please double-check it and tell us a little more about your proxy setup.

Its4Nik commented 4 months ago

To verify, can you please open https://api-stats.XXX.de/ in a browser and post a screenshot of what you see? https://api-stats.XXX.de/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/32:3004/me image

Can you post the output of curl -v https://api-stats.XXX.de/me so we can see the headers and response body?

curl -v https://api-stats.XXX.de/me
*   Trying 116XXX:443...
* Connected to api-stats.XXXX.de (116.XXX) port 443 (#0)
* ALPN, offering h2
* ALPN, offering http/1.1
*  CAfile: /etc/ssl/certs/ca-certificates.crt
*  CApath: /etc/ssl/certs
* TLSv1.0 (OUT), TLS header, Certificate Status (22):
* TLSv1.3 (OUT), TLS handshake, Client hello (1):
* TLSv1.2 (IN), TLS header, Certificate Status (22):
* TLSv1.3 (IN), TLS handshake, Server hello (2):
* TLSv1.2 (IN), TLS header, Finished (20):
* TLSv1.2 (IN), TLS header, Supplemental data (23):
* TLSv1.3 (IN), TLS handshake, Encrypted Extensions (8):
* TLSv1.2 (IN), TLS header, Supplemental data (23):
* TLSv1.3 (IN), TLS handshake, Certificate (11):
* TLSv1.2 (IN), TLS header, Supplemental data (23):
* TLSv1.3 (IN), TLS handshake, CERT verify (15):
* TLSv1.2 (IN), TLS header, Supplemental data (23):
* TLSv1.3 (IN), TLS handshake, Finished (20):
* TLSv1.2 (OUT), TLS header, Finished (20):
* TLSv1.3 (OUT), TLS change cipher, Change cipher spec (1):
* TLSv1.2 (OUT), TLS header, Supplemental data (23):
* TLSv1.3 (OUT), TLS handshake, Finished (20):
* SSL connection using TLSv1.3 / TLS_AES_256_GCM_SHA384
* ALPN, server accepted to use h2
* Server certificate:
*  subject: CN=*.XXX.de
*  start date: May 19 05:24:35 2024 GMT
*  expire date: Aug 17 05:24:34 2024 GMT
*  subjectAltName: host "api-stats.XXX.de" matched cert's "*.XXX.de"
*  issuer: C=US; O=Let's Encrypt; CN=R3
*  SSL certificate verify ok.
* Using HTTP2, server supports multiplexing
* Connection state changed (HTTP/2 confirmed)
* Copying HTTP/2 data in stream buffer to connection buffer after upgrade: len=0
* TLSv1.2 (OUT), TLS header, Supplemental data (23):
* TLSv1.2 (OUT), TLS header, Supplemental data (23):
* TLSv1.2 (OUT), TLS header, Supplemental data (23):
* Using Stream ID: 1 (easy handle 0x560a9a0beeb0)
* TLSv1.2 (OUT), TLS header, Supplemental data (23):
GET /me HTTP/2
Host: api-stats.XXX.de
user-agent: curl/7.81.0
accept: */*

* TLSv1.2 (IN), TLS header, Supplemental data (23):
* TLSv1.3 (IN), TLS handshake, Newsession Ticket (4):
* TLSv1.2 (IN), TLS header, Supplemental data (23):
* TLSv1.3 (IN), TLS handshake, Newsession Ticket (4):
* old SSL session ID is stale, removing
* TLSv1.2 (IN), TLS header, Supplemental data (23):
* Connection state changed (MAX_CONCURRENT_STREAMS == 128)!
* TLSv1.2 (OUT), TLS header, Supplemental data (23):
* TLSv1.2 (IN), TLS header, Supplemental data (23):
* TLSv1.2 (IN), TLS header, Supplemental data (23):
< HTTP/2 301 
< server: openresty
< date: Fri, 31 May 2024 07:43:28 GMT
< content-type: text/html
< content-length: 166
< location: https://api-stats.XXX.de/32:3004/me
< strict-transport-security: max-age=63072000; preload
< x-served-by: api-stats.XXX.de
< 
<html>
<head><title>301 Moved Permanently</title></head>
<body>
<center><h1>301 Moved Permanently</h1></center>
<hr><center>openresty</center>
</body>
</html>
* Connection #0 to host api-stats.XXX.de left intact

This also looks like something bad is happening on your reverse proxy level or some component that rewrites your paths. The :3004 looks suspiciously like the port you are using for your frontend container though. Just to make sure though, please post the content you get back when you open the following URL in a browser: https://stats.XXX.de/variables.js.

window.API_ENDPOINT = 'https://api-stats.XXX.de/';

In general, my best guess is that this issue is related to your reverse proxy or load balancer configuration. Please double-check it and tell us a little more about your proxy setup.

I am using nginx-proxy-manager and Cloudflare as Proxy/CDN service

Its4Nik commented 4 months ago

Wait a second...

I accidentally added my subnet in nginx 132.XXX.XXX.XXX/32 like this.......

I'm going to try again I'm terribly sorry if this was the error

Its4Nik commented 4 months ago

Still get these errors:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api-stats.XXX.de/me. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

Object { stack: "ec@https://stats.XXX.de/static/js/main.e3d08b6e.js:2:402371\nHc</</u.onerror@https://stats.XXX.de/static/js/main.e3d08b6e.js:2:417263\n", message: "Network Error", name: "AxiosError", code: "ERR_NETWORK", config: {…}, request: XMLHttpRequest }
[thunk.ts:24:14](https://stats.XXX.de/static/js/services/redux/modules/user/thunk.ts)
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api-stats.XXX.de/global/preferences. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

Object { stack: "ec@https://stats.XXX.de/static/js/main.e3d08b6e.js:2:402371\nHc</</u.onerror@https://stats.XXX.de/static/js/main.e3d08b6e.js:2:417263\n", message: "Network Error", name: "AxiosError", code: "ERR_NETWORK", config: {…}, request: XMLHttpRequest }
[thunk.ts:28:14](https://statsXXX.de/static/js/services/redux/modules/settings/thunk.ts)​

and when I click on login it redirects to: https://api-stats.XXX.de//oauth/spotify

and then to: https://oauth/spotify

  server:
    image: yooooomi/your_spotify_server
    restart: always
    container_name: spotify-server
    ports:
      - "8180:8080"
    links:
      - mongo
    depends_on:
      - mongo
    environment:
      API_ENDPOINT: https://api-stats.XXX.de
      CLIENT_ENDPOINT: https://stats.XXX.de
      SPOTIFY_PUBLIC: XXX
      SPOTIFY_SECRET: XXX
      CORS: i-want-a-security-vulnerability-and-want-to-allow-all-origins

  mongo:    container_name: spotify-db
    image: mongo:6
    volumes:
      - ./spotify_db:/data/db

  web:
    container_name: spotify-client
    image: yooooomi/your_spotify_client
    restart: always
    ports:
      - "3004:3000"
    environment:
      API_ENDPOINT: https://api-stats.XXX.de
RagingCactus commented 4 months ago

Your proxy configuration is most likely still broken. Do curl -v https://api-stats.XXX.de/me again, and try to debug your proxy settings. Are you sure https://api-stats.XXX.de/me reaches the backend? I'm 99% sure that domain still points to your frontend.

Its4Nik commented 4 months ago

Okay guys i am terribly sorry im just a dumb ass....

Yes i have set the wrong port in my reverse proxy both hosts where proxying the same port...

Omg I am so sorry for wasting your time

That's what happens when you change ports 5 Times.......