Nginx+oauth2_proxy and home assistant user authentication

Configuration
1

I’m trying to get nginx+oauth2_proxy working with home assistant and it is working fine as long as home assistant is using api password, but it breaks once I enable new user authentication feature.
Using fiddler I’ve narrowed it down to UI not being able to access /auth/providers and auth/login_flow URI, because oauth2 cookie not being present. I can see the cookie being sent by the browser if I access those URIs from the browser, but the frontend is using javascript to access those and browser does not send the cookie along, prompting oauth2_proxy authentication page.
Any ideas how to make browser to send a specific cookie for requests originated by the java script? The oauth2_proxy is configure not to issue “http only” cookie, but it is still not being sent from javascript.

2

Misread.

We probably wouldn’t allow JavaScript injection anyway

3

I’m not a web developer, but does it mean that none of the authentication methods which rely on a cookie to contain a session token would work?

And since I’m not really a webdev, I’m confused why browser is not sending a cookie, because javascripts access the same server where it originated. is it about adding Access-Control-Allow-Credentials: true response header?

4

so I made some progress. Adding {credentials: 'same-origin'} to fetch() calls sends cookies. I can pass nginx authentication now and get to HASS login successfuly, but now I can’t login.
is there any downside of this approach?

here’s the diff to frontend sources

diff --git a/src/auth/ha-auth-flow.js b/src/auth/ha-auth-flow.js
index a676aad..6e5b3e5 100644
--- a/src/auth/ha-auth-flow.js
+++ b/src/auth/ha-auth-flow.js
@@ -72,6 +72,7 @@ class HaAuthFlow extends EventsMixin(PolymerElement) {
 
     fetch('/auth/login_flow', {
       method: 'POST',
+      credentials: "same-origin",
       body: JSON.stringify({
         client_id: this.clientId,
         handler: [this.authProvider.type, this.authProvider.id],
@@ -111,6 +112,7 @@ class HaAuthFlow extends EventsMixin(PolymerElement) {
 
     fetch(`/auth/login_flow/${this._step.flow_id}`, {
       method: 'POST',
+      credentials: "same-origin",
       body: JSON.stringify(postData)
     }).then((response) => {
       if (!response.ok) throw new Error();
diff --git a/src/auth/ha-pick-auth-provider.js b/src/auth/ha-pick-auth-provider.js
index 2041ee5..9f5af5c 100644
--- a/src/auth/ha-pick-auth-provider.js
+++ b/src/auth/ha-pick-auth-provider.js
@@ -53,7 +53,7 @@ class HaPickAuthProvider extends EventsMixin(PolymerElement) {
   connectedCallback() {
     super.connectedCallback();
 
-    fetch('/auth/providers').then((response) => {
+    fetch('/auth/providers', {credentials: "same-origin"}).then((response) => {
       if (!response.ok) throw new Error();
       return response.json();
     }).then((authProviders) => {
5

well, while I was troubleshooting this for a few last days, google released new chrome version which apparently by default uses credentials: 'same-origin' for fetch() requests as per https://github.com/whatwg/fetch/pull/585
this wasn’t working for me with google chrom 67.0, but works out of the box with chrome 68.0.3440.
Still can’t get my phone to get the new chrome version.