Unable to login with new token changes

[aeleos]

Describe the bug During login I get the below error

Cannot read properties of undefined (reading 'Protection')

To Reproduce Steps to reproduce the behavior:

1. Build and run master branch in docker container
2. Run and access on port 3000
3. Login and get error

Expected behavior Should correctly login.

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome
• Version latest

F1TV Account (please complete the following information):

• Subscription Type: Pro
• Country: US

Additional context This is the output from the console log Refused to execute script from 'http://192.168.1.99:3000/6657193977244c13' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

index.js:113 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Protection') at y.authenticate (index.js:113:38) at Array. (vuex.esm.js:851:23) at y.dispatch (vuex.esm.js:516:13) at y.dispatch (vuex.esm.js:406:21) at o.submit (Login.vue:75:1) at submit (Login.vue?e3f8:1:204) at it (vue.runtime.esm.js:1863:26) at HTMLFormElement.n (vue.runtime.esm.js:2188:14) at HTMLFormElement.Zr.a._wrapper (vue.runtime.esm.js:6961:25)

I get the same error accessing the web viewer from behind a reverse proxy. Do I also need to be running the go self hosted reverse proxy you wrote? or should running just this be enough?

Thanks for your work getting this fixed with all of the new changes.

[aeleos]

Ok so I was able to figure out the issue using some of the comments in this thread. https://github.com/bootsie123/F1-Web-Viewer/issues/68 I got your go reverse proxy running in a docker container but its still not as self-hosted as I would like (all of the framework requests go to a public server) but as far as I understand I should be able to edit the remote address and make it fully self hosted.

Also it would be nice if these could be combined together but I understand why you separated them for ease of language.

I also "should" have been able to get this to work using a regular reverse proxy that will direct the script path to the f1 api server. However I kept getting rejected by cloudfront, so that might be an issue for the future.

[iebb]

since the new changes (dash+widevine, reese tokens) are fairly new, I think providing a reverse proxy might be the best option as there might be better practice later, or something eventually found unreliable, it could also act as an auto-update mechanism.

Also the public server is the Netlify build of https://github.com/iebb/F1-Web-Viewer, you can also try build that yourself and modify the script to load from local path.

[iebb]

The 6657193977244c13 thing is now replaced with a public one with CORS enabled, which would solve this problem.

Currently this repo is currently only for producing static builds, using them currently requires the full reverse proxy at https://github.com/iebb/F1WebViewer-SelfHosted. would try making docker work as well, however there's no ETA

[aeleos]

@iebb I was able to make the self-hosted proxy work in a docker container, it was fairly simple. I will make a PR for the Dockerfile.

[aeleos]

I am now running into an issue with the latest code from the master branch. I am getting this error running the self-hosted scripting pointing to a local version for both the FE and BE section.

IS_NON_ELEC
:13331/authenticate:1
Failed to load resource: the server responded with a status of 500 (Internal Server Error) createError.js:16 Uncaught (in promise) Error: Request failed with status code 500 at e.exports (createError.js:16:15) at e.exports (settle.js:17:12) at XMLHttpRequest.y (xhr.js:54:7)

It is working with the provided exe so I would assume its something with the BE endpoint and the netifly section in the code.

[arjitc]

I'm running into a similar 500 error upon login, built form source and 500 Error upon login,

> f1-web-viewer@1.8.0 start
> node functions/server.js

Server running on port 3000
FetchError: invalid json response body at https://api.formula1.com/v2/account/subscriber/authenticate/by-password reason: Unexpected token < in JSON at position 0
    at /opt/F1-Web-Viewer2/node_modules/node-fetch/lib/index.js:273:32
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async /opt/F1-Web-Viewer2/functions/server.js:53:20 {
  type: 'invalid-json'
}

[iebb]

I'm running into a similar 500 error upon login, built form source and 500 Error upon login,

> f1-web-viewer@1.8.0 start
> node functions/server.js

Server running on port 3000
FetchError: invalid json response body at https://api.formula1.com/v2/account/subscriber/authenticate/by-password reason: Unexpected token < in JSON at position 0
    at /opt/F1-Web-Viewer2/node_modules/node-fetch/lib/index.js:273:32
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async /opt/F1-Web-Viewer2/functions/server.js:53:20 {
  type: 'invalid-json'
}

This repo alone wouldn't work at the moment because of cross-origin cookie stuffs at the moment. Check https://github.com/iebb/F1WebViewer-SelfHosted if you want to self-host it

[arjitc]

Hi, Oh I see, so I run this code on the server and then https://github.com/iebb/F1WebViewer-SelfHosted on the client side?

and I need to update the URL on Line 33 and Line 41 to the server URL right?

Line 33 -- https://github.com/iebb/F1WebViewer-SelfHosted/blob/master/main.go#L33 Line 41 -- https://github.com/iebb/F1WebViewer-SelfHosted/blob/master/main.go#L41

[iebb]

Hi, Oh I see, so I run this code on the server and then https://github.com/iebb/F1WebViewer-SelfHosted on the client side?

and I need to update the URL on Line 33 and Line 41 to the server URL right?

Line 33 -- https://github.com/iebb/F1WebViewer-SelfHosted/blob/master/main.go#L33 Line 41 -- https://github.com/iebb/F1WebViewer-SelfHosted/blob/master/main.go#L41

run the client only, as the client would also reverse-proxy server-side stuffs from the public netlify. no modifications to the server code needed if you want to use that client.

[iebb]

I'm running into a similar 500 error upon login, built form source and 500 Error upon login,

> f1-web-viewer@1.8.0 start
> node functions/server.js

Server running on port 3000
FetchError: invalid json response body at https://api.formula1.com/v2/account/subscriber/authenticate/by-password reason: Unexpected token < in JSON at position 0
    at /opt/F1-Web-Viewer2/node_modules/node-fetch/lib/index.js:273:32
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async /opt/F1-Web-Viewer2/functions/server.js:53:20 {
  type: 'invalid-json'
}

Also I have added a proxy for authentication, which would make this code work. Try pulling the latest code if you wish :D

[aeleos]

@iebb can we can get some info on the new authentication process? Right now it looks like the username and password are being sent to your proxy endpoint. Would it also be possible for people to host their own auth endpoint?

[iebb]

@aeleos As browser is unable to send custom cookie header, this endpoint does forwarding the request while changing the "x-cookie" header to "cookie", adding apiKey headers.

This is the code for the endpoint

@app.route("/authenticate", methods=["POST"])
def authenticate():
    body = request.json
    cookie = ""
    if "cookie" in request.headers:
        cookie = request.headers["cookie"]
    elif "x-cookie" in request.headers:
        cookie = request.headers["x-cookie"]

    return requests.post(
        "https://api.formula1.com/v2/account/subscriber/authenticate/by-password",
        json=body,
        headers={
            "apiKey": "fCUCjWrKPu9ylJwRAv8BpGLEgiAuThx7",
            "Content-Type": "application/json",
            "Cookie": cookie
        }
    ).json()

[arjitc]

I downloaded the beta branch now, and built it but the login still returns the same 500 error, I am not on SSL/domain (just using http://Public-IP:3000), is that the reason for the 500 error?

[iebb]

@arjitc Using electron or just run after build?

[aeleos]

@aeleos As browser is unable to send custom cookie header, this endpoint does forwarding the request while changing the "x-cookie" header to "cookie", adding apiKey headers.

This is the code for the endpoint

@app.route("/authenticate", methods=["POST"])
def authenticate():
    body = request.json
    cookie = ""
    if "cookie" in request.headers:
        cookie = request.headers["cookie"]
    elif "x-cookie" in request.headers:
        cookie = request.headers["x-cookie"]

    return requests.post(
        "https://api.formula1.com/v2/account/subscriber/authenticate/by-password",
        json=body,
        headers={
            "apiKey": "fCUCjWrKPu9ylJwRAv8BpGLEgiAuThx7",
            "Content-Type": "application/json",
            "Cookie": cookie
        }
    ).json()

@iebb Is it possible for this code to be added to the go selfhosted proxy? or would that not work for some reason?

By the way thanks for all the work getting this working and updated with all of the F1 changes.

[iebb]

@aeleos it's possible and i will do it in the 1.0.0 version. it's server-side now because I made lots of changes to the frontend and want to have a relatively stable API which accepts "x-cookie", "cookie" as header, or in post body, or something else. since "x-cookie" seemingly works well, there's no more need of supporting other formats

[arjitc]

Would be nice to have a auto-login thing as well on the server-side setup, so that it can auto-connect/load as well, maybe via a .env file in the project folder?

[iebb]

Would be nice to have a auto-login thing as well on the server-side setup, so that it can auto-connect/load as well, maybe via a .env file in the project folder?

@arjitc Auto-login should be client-side imo, for a deployment could be simultaneously used by multiple users with different accounts