Azure App Proxy Header Based SSO not passing headers to WebAPP

One of my customer wanted to implement SSO with Azure App Proxy, they had a requirement to display the username, and persist the username and user email back to the cosmos db to retrieve in future for further use cases.

Issue faced.
Headers sent from App Proxy was not reaching the webapp.

We had an architecture similar to below one.

Checks done
First point of check was to intercept App proxy traffic and we indeed confirmed headers are being send from there.

Second check was in nginx, from which the React UI is served. It looked like nginx was not forwarding the headers.

We did the following changed in ngnix.conf and it started flowing.

        location / {
            root /app/www/;
            add_header UserUPN $http_userupn;
            add_header UserDisplayName $http_userdisplayname;
        }

Second Issue
Another issue we faced was , the react UI was not able to fetch the response header, since it was loaded by nginx and no back end api calls are made as well during the load. We got were able to retrieve the headers after doing another get from the app proxy , but it was a round trip again. We finally overcame it by injecting the headers to response html meta headers using nginx using sub_filter, and made react to read the dom and query the meta headers.

        location / {
            root /app/www/;
            add_header userupn $http_userupn;
            add_header userdiplayname $http_userdisplayname;
            sub_filter '</head>' '<meta name="userupn" content="$http_userupn" />\n<meta name="userdisplayname" content="$http_userdisplayname" /></head>';
            sub_filter_once off;
        }

  React.useEffect(() => {
    // Select all meta elements in the document's head
    const metaElements = document.head.querySelectorAll('meta');

    // Loop through the meta elements and extract values
    metaElements.forEach((meta) => {
      const name = meta.getAttribute('name');
      const content = meta.getAttribute('content');

      // Check for the "userupn" and "userdisplayname" meta tags
      if (name === 'userupn') {
        setUserUpn(content || 'User Upn Not Found'); // Set the userUpn state
      } else if (name === 'userdisplayname') {
        setUserDisplayName(content || 'User'); // Set the userDisplayName state
      }
    });
  }, []);