title: Authorisation using MSAL for a function in Azure Static Web App
body: <p>I'm trying to authenticate and authorise a user for an Azure function that's created and exposed using an Azure Static Web App, using Azure AD and MSAL. The user can succesfully access the API if I configure the app to use the older AAD v1 flow but not with MSAL. The setup/use-case:</p>
  <ul>
  <li>a Single Page Application (SPA) deployed and hosted as an Azure Static Web App using basic HTML and JS (this is a demo 'Hello World' app)</li>
  <li>The app has authentication integrated using MSAL. Specifically <em>msal-browser.js</em> version 2.6.1. An identity token is retrieved using:</li>
  </ul>
  <pre><code>msal.PublicClientApplication(msalConfig).loginPopup(loginRequest)
  </code></pre>
  <p>where msalConfig contains:</p>
  <pre><code>```
  auth: {
          clientId: &quot;&lt;CLIENTID&gt;&quot;,
          authority: &quot;https://login.microsoftonline.com/&lt;TENANT_ID&gt;&quot;
      }
  ```
  </code></pre>
  <ul>
  <li><p>The user is authenticated and an identity token returned.</p>
  </li>
  <li><p>The static web app exposes a sample function <em>GetMessage</em> which returns some dummy text</p>
  </li>
  <li><p>If the route to the function is unprotected the SPA can call the function successfully and the text is returned to the browser/SPA</p>
  </li>
  <li><p>If the route to the function is protected via <em>routes.json</em> the request to the function (correctly) returns a 401 unless the user is authenticated and authorised.</p>
  <pre><code>{
      &quot;routes&quot;: [
        {
          &quot;route&quot;: &quot;/api/*&quot;,
          &quot;allowedRoles&quot;: [&quot;Authenticated&quot;]
        }  
      ]
    }
  </code></pre>
  </li>
  </ul>
  <p>To authenticate the user via MSAL I am attempting to retrieve an access token which I put into the Bearer header of the function call:</p>
  <pre><code>```
  async function getAPI() {
      const currentAcc = myMSALObj.getAccountByHomeId(accountId);
      if (currentAcc) {
          const response = await getTokenPopup(silentRequest, currentAcc).catch(error =&gt; {
              console.log(error);
          });
          console.log(&quot;Got token &quot; + response.accessToken)
          const accToke = response.accessToken
          const headers = new Headers();
          const bearer = `Bearer ${accToke}`;
  
           headers.append(&quot;Authorization&quot;, bearer);
  
            const options = {
                  method: &quot;GET&quot;,
                  headers: headers
        };
  
  
      let { text } = await( await fetch('/api/GetMessage',options)).json();
      document.querySelector('#name').textContent = text;
      }    
  }
  
  ```
  </code></pre>
  <p>The token is retrieved and validates in jwt.ms but the function always returns 403 - forbidden. It appears to make no difference if change scopes or user roles although it's possible there's a magic combination I'm missing.</p>
  <p>This process works perfectly if the function I'm calling is the Micrsoft Graph - i.e. <a href="https://graph.microsoft.com/v1.0/me" rel="nofollow noreferrer">https://graph.microsoft.com/v1.0/me</a> - it's only failing on our own static web apps function. I can't see a way of accessing logs on the Azure server side to understand why it might be failing.</p>
  <p>Using the AAD v1 flow i.e. calling http://APP_URL/.auth/login/aad works perfectly - but it doesn't use the access token. It uses a Cookie called StaticWebAppsAuthCookie (a single call to APP_URL/.auth/login/aad is enough to authenticate and authorise the user). An example of that can be found <a href="https://blog.baeke.info/2020/06/01/first-look-at-azure-static-web-apps/" rel="nofollow noreferrer">here</a></p>
  <p>I understood that MSAL was the flow Azure AD was moving toward so is there way to authorise the user via an MSAL flow? Speficially using Azure AD, a static web app and a function exposed within the static web app (not as a standalone Azure Function app).</p>