MSAL.acquireToken () caused Fetch error in Edge and IE11.

[master-maintenance1-peer-connect]

In Chrome, the SPA that was successfully signed in,
MSAL.acquireToken () caused Fetch error in Edge and IE11.

AND , I could not be specified userID.

Library

• [v ] msal@1.3.2

Documentation location

• [v ] Documentation does not exist
  　The description that the usage is different between Chrome and IE11 or Edge is insufficient in the MSAL document.
  Or, there may be a lack of description that if you try to use MSAL with an instance of a browser that signed in () Office 365 or Azure Portal, you may encounter trouble.
  　(trouble:: I couldn't even choose a userId for OFFice365.)

Description

First, I opened Office 365 and Azure Portal page and did SignIn().
Next, I did SignIn() on the page using my MSAL.
(At this time, the user id could not be specified.)
And,,,,,,
When my SPA process passed MSAL.acquireToken() and reached Fetch, "Failed to load resource: net::ERR_FAILED" occurred.

Error Message

• console.log is shown below.

Access to fetch at 'https://login.microsoftonline.com/64e2a4d8-2b52-4166-909d-XXXXXXXXXXXX/oauth2/v2.0/authorize
?response_type=code+id_token
&redirect_uri=https%3A%2F%2Fsupportersystem-demo1-makedataactivity2.azurewebsites.net%2F.auth%2Flogin%2Faad%2Fcallback
&client_id=d1789387-f340-464a-ace5-xxxxxxxxxxxx
&scope=openid+profile+email&response_mode=form_post
&nonce=328f294f06a4440cb7b64ac54db2ff9a_20200818095008
&state=redir%3D%252Fapi%252FWebApps_getResourceKeys1%253FtenantName%253D%2525E3%252583%252594%2525E3%252582%2525A2%2525E3%252582%2525B3%2525E3%252583%25258D%2525E3%252582%2525AF%2525E3%252583%252588%2525E3%252581%2525AE%2525E5%2525BE%25258C%2525E6%25258F%2525B4%2525E4%2525BC%25259A%2526code%253D5KTWXP4BvexMSq2bpAcGahWGXWs3GGIjLbadL1euTuGDCCbeXTLBCw%253D%253D'
 (redirected from 'https://supportersystem-demo1-makedataactivity2.azurewebsites.net/api/WebApps_getResourceKeys1
?tenantName=%E3%83%94%E3%82%A2%E3%82%B3%E3%83%8D%E3%82%AF%E3%83%88%E3%81%AE%E5%BE%8C%E6%8F%B4%E4%BC%9A&code=XXXXXXXXXXXXXXXXXXXX==')
 from origin 'http://localhost:3000' has been blocked by CORS policy:
 Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
 If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
 

• NET WORK log is shown below.

MSAL Configuration

export const msalApp = new UserAgentApplication({
    // export const msalApp = new msal.PublicClientApplication({
    auth: {
        clientId:
            "d1789387-f340-464a-ace5-1df84244b661",
        authority:
            "https://login.microsoftonline.com/common",
        redirectUri:
            isIE() ?
                "https://supportersystem-demo1-makedataactivity2.azurewebsites.net/.auth/login/aad/callback" :
                window.location.protocol + "//" + window.location.hostname + ":" + window.location.port + "/" + "auth.html" // :
        ,
        validateAuthority: true,
        postLogoutRedirectUri: this_first_URL1, // document.URL,
        navigateToLoginRequestUrl: true
    },
    cache: {
        cacheLocation: "sessionStorage",
        storeAuthStateInCookie: isIE()
    },
    system: {
        navigateFrameWait: 500,
        logger: new Logger((logLevel: any, message: string) => {
            console.log(message);
        }),
        telemetry: {
            applicationName: "supportrt Association demo app",
            applicationVersion: "1.0.0",
            telemetryEmitter: (events: object) => {
                console.log('Telemetry Events:', events);
            }
        }
    }
});

• Azure Function CORS setting
  

[hectormmg]

Hi @master-maintenance1-peer-connect . Is the sample app that you are using available publicly or did you make it yourself? Could you provide a link to the sample?

[master-maintenance1-peer-connect]

@Technical-Boy
The app that encountered the ISSUE was based on a publicly available sample, which changed the MS-Graph-API call to an API call in the HTTP trigger function of Azure Functions.

https://www.npmjs.com/package/react-aad-msal

The changes to the samples that are effective here are shown in the Figure in the first remark.

I learned by watching this based sample that IE11 and Edge are involved in what msalApp.acquireTokenRedirect and msalApp.acquireTokenPopup should be called.　
I hope to improve the lack of documentation in MSAL on how to signin() Azure HTTP triger Functions.　

async acquireToken(request: { scopes: string[] }, redirect: boolean) {
                // @ts-ignore → error TS2345:
                // Argument of type '(error2: any) => void | Promise<AuthResponse>' is not assignable to
                // parameter of type '(reason: any) => AuthResponse | PromiseLike<AuthResponse>'.
                // Type 'void | Promise<AuthResponse>' is not assignable to type 'AuthResponse | PromiseLike<AuthResponse>'.
                // Type 'void' is not assignable to type 'AuthResponse | PromiseLike<AuthResponse>'.ts(2345)
                return msalApp.acquireTokenSilent(request).catch((error2) => {
                    // Call acquireTokenPopup (popup window) in case of acquireTokenSilent failure
                    // due to consent or interaction required ONLY
                    if (requiresInteraction(error2.errorCode)) {
                        return redirect
                            ? msalApp.acquireTokenRedirect({
                                ...request,
                                redirectUri: this_first_URL // "http://localhost:3000"
                            })
                            : msalApp.acquireTokenPopup(request);
                    } else {
                        console.error('Non-interactive error:', error2.errorCode)
                        throw error2;
                    }
                });
            }

[github-actions]

This issue has not seen activity in 14 days. It will be closed in 7 days if it remains stale.

[daniel-seitz]

@master-maintenance1-peer-connect we had the same issue, make sure you configure the AppRegistration correctly, especially inside the Authentication blade. Use "Single-page application" as a platform and set the redirect uri correctly.

[master-maintenance1-peer-connect]

@daniel-seitz Tanks to responce.
I tried your suggestion.
But the results have fallen back.

• Previous AppRegistration setting:
  

• Configuration as suggested:
  

• Execution result:

AADSTS9002325: Proof Key for Code Exchange is required for cross-origin authorization code redemption.

• When .auth/login/aad/callback is also removed:
  

Neither has reached the inside of the Azure function.
I used to reach my function in Azure function.

[github-actions]

This issue has not seen activity in 14 days. It will be closed in 7 days if it remains stale.

[github-actions]

This issue has been closed due to inactivity. If this has not been resolved please open a new issue. Thanks!