Authenticating a user in static_dir single-page-app so that it can call sibling GAE APIs

Question

I have a React app that is being served on GAE via a static directory.

app.yaml:

- url: /my_admin_app
  static_dir: admin_app
  login: required
  secure: always

When accessing via browser, GAE presents a login page as expected before continuing to the React app.

Because the React app is completely separate from the GAE app that is also running, I need the web app to call APIs that should require auth, as they control sensitive data.

The React app is calling sensitive APIs behind this URL:

app.yaml:

- url: /admin/.*
  login: required // this causes a login page to be sent instead of data
  script: main.app
  secure: always

Is there a better way to serve my static files such that login isn't required again? Or is there a way to pass along the auth info when GAE presents its own login page?

Answer 1

I've learned that when Google presents the login, it passes along the auth cookie to the following web page.

Then, any requests that the page makes using fetch should specify that the cookie should be passed along with that request.

From the Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

By default, fetch won't send or receive any cookies from the server, resulting in unauthenticated requests if the site relies on maintaining a user session (to send cookies, the credentials init option must be set).

So to make sure the auth gets passed on:

// to only pass to to same origin endpoints
fetch('/endpoint', {credentials:'same-origin'}).then(/*..*/)

// to pass without restriction
fetch('/endpoint', {credentials:'include'}).then(/*..*/)