examples: Add single page (React) app with OAuth

[phlax]

Commit Message:
Additional Description:
Risk Level:
Testing:
Docs Changes:
Release Notes:
Platform Specific Features:
[Optional Runtime guard:]
[Optional Fixes #Issue]
[Optional Fixes commit #PR or SHA]
[Optional Deprecated:]
[Optional API Considerations:]

[phlax]

cc @mmorel-35 this will need the dependatool npm update we discussed

[phlax]

/docs

[repokitteh-read-only]

Docs for this Pull Request will be rendered here:

https://storage.googleapis.com/envoy-pr/31534/docs/index.html

The docs are (re-)rendered each time the CI envoy-presubmit (precheck docs) job completes.

🐱

Caused by: a #31534 (comment) was created by @phlax.

see: more, trace.

[phlax]

https://storage.googleapis.com/envoy-pr/f61f0a6/docs/start/sandboxes/single-page-app.html

[phlax]

requires #31499

[mmorel-35]

cc @mmorel-35 this will need the dependatool npm update we discussed

I see, I'm going to provide a PR on toolshed before the end of the week to fix this.

[phlax]

I see, I'm going to provide a PR on toolshed before the end of the week to fix this.

i made an attempt at it here envoyproxy/toolshed#1374 - it needs some tests, cleanups and to be tested yet

[phlax]

updated docs https://storage.googleapis.com/envoy-pr/4ecb47d/docs/start/sandboxes/single-page-app.html

[phlax]

ill try and get to this today - been a bit snowed under with release stuff

[phlax]

@htuch this should be ready for another review, apologies for force-push, commits were preserved after rebase

[htuch]

Drop this stanza.

[htuch]

Suggested change

means the provided access token will be forwarded to upstreams proxied by Envoy unless explicitly excluded.

means the provided access token will be forwarded to any cluster / upstreams proxied by Envoy for this HTTP filter chain. In general, upstreams should be trusted in this scenario. If untrusted upstreams are present, care will need to be taken to not only disable the OAuth2 filter on a per-route basis but to also remove sensitive cookies with bearer tokens, etc. This scenario is outside the scope of this sandbox.

[phlax]

ill work this in

[phlax]

i may be wrong but i think the important thing is removing the cookie/header - not sure that enabling/disabling the oauth filter would achieve this or help - besides in this situation you would need to disable it for given upstreams anyway (whether by pass_through or disabling the filter) just to get it to work correctly

ive updated on this basis

[htuch]

What does production mean when we're using a dummy OAuth backend as per previous paragraph?

[phlax]

it means not served by a dev backend - static assets essentially - i added gzip/tls as pointers to what else you might add

[phlax]

its hard not to call it production becase that is what js/node calls it when you build the assets rather than serve them

eg - it reads .env.production in that circumstance

[htuch]

Not sure I fully follow - shouldn't the access token creation obtain sufficient scope to be able to reuse the OAuth cookie in future accesses to other paths?

[phlax]

if you dont restrict what triggers the oauth flow then its triggered on the assets

this can cause redirect loops which take over the client (browser) machine and flood the proxy

not knowing this when i started i really struggled to get anything working so i think we need to say something - here im trying to highlight the strategy/config used to avoid that (ie inverse matching)

[ravenblackx]

Guess I should have said - my approval is typescript-specific and continues to apply so long as no typescript files are changed. I'm not going to re-approve since other reviewers are still reviewing other stuff, but feel free to assume from here on that the typescript is already reviewed.

[ravenblackx]

With other comments mostly addressed, approving as on-call to unblock it for release.

[phlax]

@htuch landing this to get it in - we can follow as required

[htuch]

I think my main concerns are addressed. I haven't walked through the Github production parts but the core guidance seems generally correct.