msal-react TypeError: Failed to fetch

Question

I'm using:

• "@azure/msal-browser": "^2.11.2",
• "@azure/msal-react": "^1.0.0-alpha.6"

My Configuration:

const configuration: Configuration = {
  auth: {
    clientId: CLIENT_ID,
    authority: `${AUTHORITY}${TENANT}`,
    redirectUri: window.location.origin,
  },
  cache: {
    cacheLocation: BrowserCacheLocation.LocalStorage,
  },
}

export const pca = new PublicClientApplication(configuration)

The App:

const authRequest = {
  scopes: [
    'openid',
    'profile',
    'User.Read'
  ],
}


const App = () => {
  return (
    <div>Nice</div>
  )
}

const app = (
  <MsalProvider instance={pca}>
    <MsalAuthenticationTemplate
      interactionType={InteractionType.Redirect}
      authenticationRequest={authRequest}
      errorComponent={ErrorComponent}
      loadingComponent={LoadingComponent}>
      <Router>
        <StrictMode>
          <App/>
        </StrictMode>
      </Router>
    </MsalAuthenticationTemplate>
  </MsalProvider>
)

The redirect works, I log in with the company account, then I'll be redirected back to the localhost. But: getting the following error in the console:

TypeError: Failed to fetch

the LocalStorage:

{"failedRequests":[865,"ac1b77cf-4d4f-4917-a0cf-6e9fdda4a8f3"],"errors":["TypeError: Failed to fetch"],"cacheHits":0}

and the App component also doesn't render. The ErrorComponent is rendered.

Having the same issue with the sample: https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-react-samples/typescript-sample

I've found out the CORS error in network: Request URL: https://login.microsoftonline.com/******-aa2f-23**-****-************/oauth2/v2.0/token That is weird, because the same redirect url works with react-adal.

I suppose the issue takes place because of wrong Azure App Configuration:

Manifest:

{
"allowPublicClient": null,
"oauth2AllowIdTokenImplicitFlow": true,
"oauth2AllowImplicitFlow": true,
"oauth2Permissions": [],
"oauth2RequirePostResponse": false
}

oauth2AllowImplicitFlow should be definitely false.

Does anyone have a working example of the manifest for me please?

Answer 1

I ran into this issue a few days ago.

For me the issue was with the incorrect type of registered application. Please try by registering the application as a "Single-page" application instead of a "Web" application then you should not see this issue.