Can't authenticate to AAD App Proxy using MSAL.js

Question

I have an on-prem web API published via Azure App Proxy that I'm trying to access from a SharePoint Online SPFx component using MSAL.js. I'm just doing a simple GET to a text file in IIS as a starting point.

I can access the app proxy and get the text file directly via a browser.

But when I try to use MSAL from inside the SharePoint page it fails at a certain point. I've been using the examples on Microsoft's website to get me started so I think I'm doing the right thing.

1. Setup the MSAL config info (app, tenant ID, etc)
2. Signon/request access token with scope consent (works)
3. Execute fetch to azure app proxy resource with access token (fails)

The fetch on step 3 does a preflight CORS OPTIONS request and fails with a 403. I get the feeling this request isn't getting as far as the internal IIS server as I can't see any activity in the IIS logs for it.

Is this senario supported?

const msalConfig = {
  auth: {
    clientId: '<guid>',
    authority: 'https://login.microsoftonline.com/<guid>',
    redirectUri: '<url>',
  },
  cache: {
    cacheLocation: 'sessionStorage', // This configures where your cache will be stored
    storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
  },
  system: {
    loggerOptions: {
      loggerCallback: (level, message, containsPii) => {
        if (containsPii) {
          return;
        }
        switch (level) {
          case msal.LogLevel.Error:
            console.error(message);
            return;
          case msal.LogLevel.Info:
            console.info(message);
            return;
          case msal.LogLevel.Verbose:
            console.debug(message);
            return;
          case msal.LogLevel.Warning:
            console.warn(message);
            return;
        }
      },
    },
  },
};

const myMSALObj = new msal.PublicClientApplication(msalConfig);

const account = myMSALObj.getAllAccounts()[0];
console.log(account);

const silentRequest = {
  scopes: ['<app proxy scope>'],
  account: account,
  forceRefresh: false,
};


myMSALObj
  .acquireTokenSilent(silentRequest)
  .then(response => {
    console.log(response);

    const headers = new Headers();
    const bearer = `Bearer ${response.accessToken}`;

    headers.append('Authorization', bearer);

    const options = {
      headers: headers
    };

    fetch('<app proxy resource url>', options).then((res) => {
      console.log(res);
      console.log(res.text());
    });
  })
  .catch((error) => {
    console.error('Silent Error: ' + error);
    if (error instanceof msal.InteractionRequiredAuthError) {
      myMSALObj.loginRedirect(loginRequest);
    }
  });

Answer 1

Hi @Tom-BC

Per my test, you can follow the steps to bulid AAD Proxy for SPFX.

Building Proxy Provider for SharePoint Framework and Microsoft Graph Toolkit

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.