Msal-react seems not to be React 18 compliant

Core Library

MSAL.js v2 (@azure/msal-browser)

Core Library Version

2.28.3

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

1.4.7

Public or Confidential Client?

Public

Description

Hi ,

Switching React from 17.0.2 to 18.2.0, the msal authentication process stops now to show an error message on screen when the related app is “called” in the browser. After having the error returned, rewriting the calling URL of the app once again leads finally to the app.

Reverting React to 17’s version is solving the issue.

Thanks in advance for your support

Error Message

on the browser screen, the process stops and shows this error:

Request Id: 53d9342b-7c94-4c98-90a7-447254597200 Correlation Id: c75471e3-954b-4b43-9ac2-a3c9bf75c985 Timestamp: 2022-10-04T15:42:44Z Message: AADSTS50011: The redirect URI ‘http://localhost:3000/#code=0.AS0AYSBbEGm2MUuSrCTTBNGV3LQFRGpvFsRFtDWJEdxBGGYtAMs.AgABAAIAAAD--DLA3VO7QrddgJg7WevrAgDs_wQA9P_wg8k--6oCcOfaxld9i3oEKoJ49KjS0BozT0YBN3a7rFCIZi83kt3v-x5SeOgSS3PQyjHL6sOdDF5mDprdNAjdj_Ur8hWwVkXfRqYS6rMhQQBcLz3qAegGiAdHHV3JZ4cs5hsHCd9DAAlSSWl55toJ0ampg3WbbAM32CnSfz1WNDXSGReMph1OErRafwc4gmNdOgZ01OaJyDmln8G2FCg9-oB_0dBiL7jBF1ADXCcKh1nDkOcRV0-wkYSEKaWiZ5GAIFBJ7sWWC2kWh45U_FIZYeHqag3SLCgnihSot9RMZH2s5EBZcBUlA49YM4x9_J8J-yqMxBNHsUPMeHWFrDqUyq19lU55nJPWqkK2w8J887-fzhgaExR3cvCf_5yM0EXCcaYce9tLFSY9FLjOHfdlkqfplS8fiY3UFluzRtJA8W0k6K4i-FY1WRZFEFy9aDjUIec1mE6pBwQWKm8xucIRth2gbeDISOM21C5DF7KDO-q9njcqtPxzQGHJMmW1mNRQVFxKeewy3iWSyMjgBNk9SeqraYDCqLJ_uuDbWOcWW4-Dnwg84j9WCpP64zjMxRzEDdxumiyvjiHL6xc9J1tcjcAYDl1B9SKTUwO8um4eWpngjV7c6sAlOkQG8odQIfm7F40dqMWoWveLD4QD2l_EV-ljGQ3Jo-7VmgAIISh6YPyqS9C5JQp5WcHkQ2YPsHbou_KmyTX1i6INhXS6E8octBLD_fGBjk3uOjqKH4zgj13dno5FP4xpYZcuMFV-_xMROZY91y6ui_y5Jxthy3QUpKVRBQxv5ih218i7NPUgk5TmA0apQt_xptkw8IT4Qlg7TIhSRE6pyGGF-d8Lhsw0Xzg4-6VnRZfouVy4wy2SYropz8xMZ2dOEOJkMj0Y_89ounjUvputAeH8DuuHtGNK6JaJTO6D2beG65bJJ8kiCtY1Ent0Jz0mvyMDPrCFDH6el3POfwdq59M_ZtaCdHQDQq6IMJypRA&client_info=eyJ1aWQiOiJlYWFjZTBkZC1kMDhjLTQwZmEtYTdiNC05ODhmNTllYjlmMGIiLCJ1dGlkIjoiMTA1YjIwNjEtYjY2OS00YjMxLTkyYWMtMjRkMzA0ZDE5NWRjIn0&state=eyJpZCI6ImFlMmVhYjRjLWNhMGQtNDVlOS05YWM3LTEwODYwY2E3NmE0MCIsIm1ldGEiOnsiaW50ZXJhY3Rpb25UeXBlIjoicmVkaXJlY3QifX0%3D&session_state=76e6846a-6d8c-4841-93bc-8d169f04688a’ specified in the request does not match the redirect URIs configured for the application ‘6a4405b4-166f-45c4-b435-8911dc411866’. Make sure the redirect URI sent in the request matches one added to your application in the Azure portal. Navigate to https://aka.ms/redirectUriMismatchError to learn more about how to fix this.

Msal Logs

no msal logs returned at this step.

MSAL Configuration

N/A

Relevant Code Snippets

N/A

Reproduction Steps

• switch React from 17 to 18 version
• npm install
• npm start
• launch the app

Expected Behavior

The authentication may not stop and lead to the app.

Identity Provider

Azure B2C Basic Policy

Browsers Affected (Select all that apply)

Chrome, Firefox, Edge, Internet Explorer

Regression

react 17.0.2

Source

External (Customer)

[jo-arroyo]

@vherilier We haven’t seen this issue with our React apps running on React 18. Are you able to provide your configuration and usage above? Specifically, where you are providing the redirectUri. Any logs or network traces you are providing could be useful as well.

[vherilier]

@tnorling providing explicitly redirect URIs solves the issue. Adding progression control to loginRedirect execution in Azure file seems to reduce calls when the application starts.

Thanks for double checking the code and for your suggestions. I think the issue is over and you can close it. Thanks and regards.