Unable to authenticate and do fetch to azure function endpoint from Microsoft SSO authenticated Frontend webcomponent

Saketh Nalla 26 Reputation points
2025-07-04T19:59:49.5666667+00:00

Hello,

I've a simple JavaScript web component which is embedded inside a parent page (WxCC desktop) which I login using Microsoft SSO. In the web component, I'm doing a fetch to an azure function endpoint which returns a JSON. Everything works fine end-to-end when authentication is disabled. But when Authentication is enabled (as shown in below screenshot in my azure function), the web component is unable to successfully complete the fetch.

User's image

The error I get in console on the front-end is attached below. I've already configured my parent page under CORS in my azure function.User's image

At this point when I open the GET login.windows.net/...... url in the same browser in another tab, without any prompt to login to Microsoft, the azure function return the JSON. And the frontend starts working normally again.

What do I've to do overcome this issue? I don't want the user interaction to either click the URL or having the user to enter credentials in Microsoft login page.

Azure App Configuration
Azure App Configuration
An Azure service that provides hosted, universal storage for Azure app configurations.
{count} votes

1 answer

Sort by: Most helpful
  1. Harish Badijana 40 Reputation points Microsoft External Staff Moderator
    2025-08-12T13:26:09.48+00:00

    @Saketh Nalla When authentication is enabled on your Azure Function App, the fetch request from your web component fails

    However, manually opening the login URL in another tab authenticates the session, and the fetch starts working—indicating that the issue is tied to silent authentication and token propagation.

    This behavior stems from how Azure App Service Authentication handles cross-origin requests:

    EasyAuth expects the authentication token to be present in the request headers.

    When the token is missing or invalid, it redirects to the login endpoint, which is blocked by CORS.

    The browser cannot follow this redirect due to missing Access-Control-Allow-Origin headers from login.windows.net.

    Use Token-Based Authentication via MSAL.js

    Instead of relying on automatic redirects, use MSAL.js in your parent page to:

    Acquire an access token silently using acquireTokenSilent.

    Pass this token explicitly in the Authorization header of your fetch request:

    const token = await msalInstance.acquireTokenSilent({

      scopes: ["https://.azurewebsites.net/.default"]

    });

    fetch("https://.azurewebsites.net/api/your-function", {

      method: "GET",

      headers: {

        "Authorization": Bearer ${token}

      }

    });

    This avoids redirecting to login.windows.net and bypasses the CORS issue

    Configure CORS Properly

    Ensure the following in your Azure Function App:

    Add the exact origin of your parent page (WxCC desktop) to the CORS list.

    Avoid using "*" when authentication is enabled.

    Confirm that OPTIONS preflight requests are handled correctly.

    Enable Persistent Browser Sessions

    This allows the user to remain signed in across tabs and sessions:

    Configure this in Azure AD Conditional Access policies.

    Use Federated Identity Credentials (FIC)

    If your app is multi-tenant or needs cross-resource access, consider using Managed Identity with Federated Identity Credentials:

    This avoids storing secrets and supports backend authentication.

    I hope this helps in resolving the issue, do let me know if you have any further questions on this

    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.