Login Problems #403

Its4Nik · 2024-05-29T13:36:21Z

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

This is the login page:

The text was updated successfully, but these errors were encountered:

RagingCactus · 2024-05-29T13:40:24Z

      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 · 2024-05-29T13:47:10Z

      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 · 2024-05-29T13:52:14Z

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 · 2024-05-29T17:27:07Z

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 · 2024-05-29T17:33:58Z

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 · 2024-05-31T05:41:57Z

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:

RagingCactus · 2024-05-31T07:01:16Z

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 · 2024-05-31T07:48:26Z

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

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 · 2024-05-31T07:49:16Z

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 · 2024-05-31T07:54:00Z

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 · 2024-05-31T08:02:37Z

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 · 2024-05-31T10:26:14Z

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.......

RagingCactus mentioned this issue May 29, 2024

Fixed some minor typos in various files; fixed CORS verbiage #402

Merged

RagingCactus mentioned this issue May 29, 2024

Add dedicated frontend error page when API_ENDPOINT points to the frontend #404

Merged

Its4Nik closed this as completed May 31, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Login Problems #403

Login Problems #403

Its4Nik commented May 29, 2024

RagingCactus commented May 29, 2024

Its4Nik commented May 29, 2024

RagingCactus commented May 29, 2024

Its4Nik commented May 29, 2024

RagingCactus commented May 29, 2024

Its4Nik commented May 31, 2024 •

edited

Loading

RagingCactus commented May 31, 2024

Its4Nik commented May 31, 2024 •

edited

Loading

Its4Nik commented May 31, 2024

Its4Nik commented May 31, 2024

RagingCactus commented May 31, 2024

Its4Nik commented May 31, 2024 •

edited

Loading

Login Problems #403

Login Problems #403

Comments

Its4Nik commented May 29, 2024

RagingCactus commented May 29, 2024

Its4Nik commented May 29, 2024

RagingCactus commented May 29, 2024

Its4Nik commented May 29, 2024

RagingCactus commented May 29, 2024

Its4Nik commented May 31, 2024 • edited Loading

RagingCactus commented May 31, 2024

Its4Nik commented May 31, 2024 • edited Loading

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

Its4Nik commented May 31, 2024

Its4Nik commented May 31, 2024

RagingCactus commented May 31, 2024

Its4Nik commented May 31, 2024 • edited Loading

Its4Nik commented May 31, 2024 •

edited

Loading

Its4Nik commented May 31, 2024 •

edited

Loading

Its4Nik commented May 31, 2024 •

edited

Loading