How do I access IAP identity within GAE flex (create react starter) web app?

Question

So I have a create react starter web app that i'm using to understand how to deploy web apps to GAE. I enabled IAP with limited access users. Part of this is also doing it in a CI/CD way, which i've successfully achieved. What i'm struggling to understand is how i'll then be able to access the identity of the user.

I know the header should have that information. So in an attempt to get the headers, from within the application, I added:

var req = new XMLHttpRequest();
req.open('GET', document.location, false);
req.send(null);
var headers = req.getAllResponseHeaders().toLowerCase();
headers = headers.split(/\n|\r|\r\n/g).reduce(function(a, b) {
    if (b.length) {
        var [ key, value ] = b.split(': ');
        a[key] = value;
    }
    return a;
}, {});
console.log(`${JSON.stringify(headers)}`);

But I can't seem to find a field/value of:

X-Goog-IAP-JWT-Assertion

which I then assume I can use to get the identity, as shown here: https://cloud.google.com/nodejs/getting-started/authenticate-users#create_the_source_code

Just for context, if it's helpful, my app.yaml is:

runtime: nodejs12
env: flex
instance_class: F1
handlers:
  # Serve all static files with url ending with a file extension
  - url: /(.*\..+)$
    static_files: build/\1
    require_matching_file: false
    upload: build/(.*\..+)$
    http_headers:
      Access-Control-Allow-Origin: "*"
  # Catch all handler to index.html
  - url: /.*
    static_files: build/index.html
    require_matching_file: false
    upload: build/index.html
    http_headers:
      Access-Control-Allow-Origin: "*"
  - url: .*
    script: auto
automatic_scaling:
  min_idle_instances: automatic
  max_idle_instances: automatic
  min_pending_latency: automatic
  max_pending_latency: automatic
network: {}

There's only 1 other issue i've seen posted where someone was having the same issue, but they didn't really go into detail on how they resolved it.

Answer 1

You are mixing up the App Engine Standard(ex. handlers & scaling elements ) and Flexible( ex. resources ) app.yaml configuration. Even it's not giving you any error, it's just being ignored. It still recommended to fix your app.yaml according to your application requirements.

If you are trying get the user's information(email and userID) using the x-goog-iap-jwt-assertion from IAP and App Engine, here is the complete sample :

let expectedAudience = null;
if (projectNumber && projectId) {
  // Expected Audience for App Engine.
  expectedAudience = `/projects/${projectNumber}/apps/${projectId}`;
}

const oAuth2Client = new OAuth2Client();

async function verify() {
  // Verify the id_token, and access the claims.
  const response = await oAuth2Client.getIapPublicKeys();
  const ticket = await oAuth2Client.verifySignedJwtWithCertsAsync(
    iapJwt,
    response.pubkeys,
    expectedAudience,
    ['https://cloud.google.com/iap']
  );
  // Print out the info contained in the IAP ID token
  console.log(ticket);
}

verify().catch(console.error);