Msal-react seems not to be React 18 compliant

[vherilier]

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)

[vherilier]

A potential root cause could come from the behavior of the useEffect hook when using a Strict Mode in React 18:

• https://medium.com/geekculture/the-tricky-behavior-of-useeffect-hook-in-react-18-282ef4fb570a
• https://medium.com/gitconnected/react-18-the-trickiness-of-useeffect-fadfa65fa4b4

Hope it will help...

[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]

@jo-arroyo
Downloads.zip
Here are the HAR traces for both React 17 and 18 executions.

I'm quite following the example provided from Azure about SPA.

for msal configuration:

import { LogLevel } from "@azure/msal-browser";

export const msalConfig = {
    auth: {
        clientId: process.env.REACT_APP_AZURE_CLIENT_ID,
        authority: process.env.REACT_APP_AZURE_AUTHORITY_BASE + "/" + process.env.REACT_APP_AZURE_CTID,
        redirectUri: window.location.href,
    },
    cache: {
        cacheLocation: "sessionStorage", // This configures where your cache will be stored
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    },
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                if (containsPii) {
                    console.log("MSALCONFIG LOG Pii: ", message);
                    return;
                }
                switch (loglevel) {
                    case LogLevel.Error:
                        console.error("MSALCONFIG LOG ERROR:", message);
                        return;
                    case LogLevel.Info:
                        console.info("MSALCONFIG LOG INFO:", message);
                        return;
                    case LogLevel.Verbose:
                        console.debug("MSALCONFIG LOG DEBUG:", message);
                        return;
                    case LogLevel.Warning:
                        console.warn("MSALCONFIG LOG WARNING:", message);
                        return;
                    default:
                        console.info("MSALCONFIG LOG INFO:", message);
                }
            },
            piiLoggingEnabled: false,
            logLevel: 1, // 3: Verbose
        }
    },
    telemetry: {
        application: { appName: process.env.npm_package_name, appVersion: process.env.npm_package_version }
    },
};

export const loginRequest = {
    scopes: ["https://analysis.windows.net/powerbi/api/App.Read.All", "https://analysis.windows.net/powerbi/api/Report.Read.All", "https://analysis.windows.net/powerbi/api/Dataset.Read.All", "https://analysis.windows.net/powerbi/api/Dashboard.Read.All"],
};

with window.location.href replaced by http://localhost:3000 (and registred to the Azure platform too)
NB : tested with other platform urls (registered to Azure too ; the working and failing cases are the same.

[vherilier]

@jo-arroyo : btw I'm using react-redux 8.0.4 (linked to redux 4.2.0) too. Maybe it could explain the difference seen with your React 18 execution tests...

[jo-arroyo]

@vherilier Are you also able to send verbose level logs?

[vherilier]

@jo-arroyo Here's the requested logs file I could extract by preserving logs in the Developer Tool console.
I've added a minimal app that is failing by my side.
You can switch index.js code to be React17 compliant.

msal-react-18_1665134410086.log
msal-react-18.zip

I hope it will help in understanding the difference experienced between your React 18 env and mine.

[tnorling]

@vherilier Thanks for sharing your app. Two things I'm noticing:

1. In your Azure component you should only call loginRedirect if the inProgress state value is equal to None. Not doing this may cause race conditions and/or loginRedirect being invoked multiple times resulting in an interaction_in_progress error. You may have just gotten lucky in React 17 that this problem didn't manifest itself.
2. I'm surprised to see the invalid redirectUri error message you shared in the original post since it includes the auth code hash. MSAL.js should be stripping the hash off redirectUris so I'm not sure why that would be happening and wasn't able to reproduce this on my own. One thing you could try to resolve this is to explicitly provide your redirectUri instead of using window.location.href

[vherilier]

@tnorling Thanks for your feedbacks and suggestions.
It will try the 2 points and will let you know about quickly

[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.