syncweek-react-aad / react-aad

A React wrapper for Azure AD using the Microsoft Authentication Library (MSAL). The easiest way to integrate AzureAD with your React for authentication.
MIT License
345 stars 94 forks source link

Typescript redirect sample doesn't work in Chrome with common govt policies #282

Open aadhoc opened 3 years ago

aadhoc commented 3 years ago

Library versions

Describe the bug The typescript sample DOES work with current v1.4.0 MSAL and "redirect"... But the "redirect" technique breaks when adding browser policies: BlockThirdPartyCookies, DefaultPopupsSetting.

These settings are common to US government computers:

Clicking on the redirect checkbox counts down, allows login via login.microsoftonline.com, then goes back to sample page with the unchaned "Automatic Redirect" and "Authentication Values" boxes, but the "Errors" box says

If authentication fails, this box will have the errors that occurred
errorCode: popup_window_error
errorMessage: Error opening popup window. This can happen if you are using IE or if popups are blocked in the browser.

Strange to see "opening popup window" when using the "redirect" mode sample.

(Note the same policies now exist in MS Edge since it now has the same Chromium engine.)

Expected behavior Expected the typescript sample to work in "redirect" mode. Expected the popup blocker policy not to break it. (I did expect that the popup blocker would break the "popup" mode, so I didn't even try that).

To Reproduce

Steps to reproduce the behavior:

  1. Download github repo
  2. Put the typescript sample into a Visual Studio 2019 project so it can be easily run with https on localhost https://github.com/syncweek-react-aad/react-aad/tree/master/samples/react-typescript
  3. Set sample specifically with msal v1.4.0 in the package (it doesn't work at all with higher versions of msal)
    "msal": "1.4.0",
  4. npm install
  5. Set clientId and subscription in authProvider.
  6. Ensure https://localhost:44300 is a valid Redirect URI in Azure.
  7. Run the sample. Verify that "redirect" mode works for login.
  8. Set policies in windows for Chrome: Add to file BlockAndNoPop.reg and run it
    
    Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome] "BlockThirdPartyCookies"=dword:00000001 "DefaultPopupsSetting"=dword:00000002

Remove these two entries selectively afterward via regedit, or if you are sure you have no other policies, you can use this to delete the Chrome key values:

Windows Registry Editor Version 5.00

[-HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome]


9. Start Chrome & verify policies
Check, and reload the policies (if necessary) with this to ensure they are enabled:
chrome://policy/
Should show both the policies are active.

10. Run the sample
- View https://localhost:44300
- Click the redirect checkbox
- Goes to login.microsoftonline.com
- Allows login
- After return to sample webapp, errors occur
(See generated console errors below)

**Desktop (please complete the following information):**
 - Browser: Chrome for Windows
 - Version 85.0.4183.121

**Portion of console log**

index.js:1 [ERROR] ClientAuthError: Error opening popup window. This can happen if you are using IE or if popups are blocked in the browser. console. @ index.js:1 ERROR @ Logger.ts:19 _callee4$ @ MsalAuthProvider.ts:293 tryCatch @ runtime.js:63 invoke @ runtime.js:293 (anonymous) @ runtime.js:118 asyncGeneratorStep @ MsalAuthProvider.ts:18 _throw @ MsalAuthProvider.ts:18 Promise.then (async) asyncGeneratorStep @ MsalAuthProvider.ts:18 _next @ MsalAuthProvider.ts:18 (anonymous) @ MsalAuthProvider.ts:18 (anonymous) @ MsalAuthProvider.ts:18 (anonymous) @ MsalAuthProvider.ts:51 _callee3$ @ MsalAuthProvider.ts:149 tryCatch @ runtime.js:63 invoke @ runtime.js:293 (anonymous) @ runtime.js:118 asyncGeneratorStep @ MsalAuthProvider.ts:18 _throw @ MsalAuthProvider.ts:18 Promise.then (async) asyncGeneratorStep @ MsalAuthProvider.ts:18 _next @ MsalAuthProvider.ts:18 (anonymous) @ MsalAuthProvider.ts:18 (anonymous) @ MsalAuthProvider.ts:18 (anonymous) @ MsalAuthProvider.ts:51 _callee6$ @ MsalAuthProvider.ts:325 tryCatch @ runtime.js:63 invoke @ runtime.js:293 (anonymous) @ runtime.js:118 asyncGeneratorStep @ MsalAuthProvider.ts:18 _next @ MsalAuthProvider.ts:18 (anonymous) @ MsalAuthProvider.ts:18 (anonymous) @ MsalAuthProvider.ts:18 _callee5$ @ MsalAuthProvider.ts:317 tryCatch @ runtime.js:63 invoke @ runtime.js:293 (anonymous) @ runtime.js:118 asyncGeneratorStep @ MsalAuthProvider.ts:18 _next @ MsalAuthProvider.ts:18 (anonymous) @ MsalAuthProvider.ts:18 (anonymous) @ MsalAuthProvider.ts:18 MsalAuthProvider @ MsalAuthProvider.ts:60 ./src/authProvider.ts @ authProvider.ts:17 webpack_require @ bootstrap:784 fn @ bootstrap:150 ./src/App.tsx @ App.css?4433:45 webpack_require @ bootstrap:784 fn @ bootstrap:150 ./src/index.tsx @ index.css?f3f6:45 webpack_require @ bootstrap:784 fn @ bootstrap:150 1 @ serviceWorker.ts:142 webpack_require @ bootstrap:784 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (anonymous) @ main.chunk.js:1 Show 25 more frames authProvider.ts:6 [MSAL] Thu, 22 Oct 2020 00:30:18 GMT:1.4.0-Verbose AuthResponseHandler has been called authProvider.ts:6 [MSAL] Thu, 22 Oct 2020 00:30:18 GMT:1.4.0-Verbose Interaction type is redirect authProvider.ts:6 [MSAL] Thu, 22 Oct 2020 00:30:18 GMT:1.4.0-Verbose One callback was provided to handleRedirectCallback, calling authResponseCallback with response index.js:1 Warning: Cannot update a component (SampleAppRedirectOnLaunch) while rendering a different component (AzureAD). To locate the bad setState() call inside AzureAD, follow the stack trace as described in https://fb.me/setstate-in-render in AzureAD (at SampleAppRedirectOnLaunch.tsx:71) in SampleAppRedirectOnLaunch (at SampleBox.tsx:25) in div (at SampleBox.tsx:18) in SampleBox (at App.tsx:55) in div (at App.tsx:54) in AzureAD (at App.tsx:29) in div (at App.tsx:24) in App (at src/index.tsx:15) in Provider (at src/index.tsx:14) console. @ index.js:1 printWarning @ react-dom.development.js:88 error @ react-dom.development.js:60 warnAboutRenderPhaseUpdatesInDEV @ react-dom.development.js:23241 scheduleUpdateOnFiber @ react-dom.development.js:21165 dispatchAction @ react-dom.development.js:15660 setLoginObject @ SampleAppRedirectOnLaunch.tsx:67 (anonymous) @ SampleAppRedirectOnLaunch.tsx:92 getChildrenOrFunction @ AzureAD.tsx:128 AzureAD @ AzureAD.tsx:176 renderWithHooks @ react-dom.development.js:14803 mountIndeterminateComponent @ react-dom.development.js:17482 beginWork @ react-dom.development.js:18596 beginWork$1 @ react-dom.development.js:23179 performUnitOfWork @ react-dom.development.js:22157 workLoopSync @ react-dom.development.js:22130 performSyncWorkOnRoot @ react-dom.development.js:21756 (anonymous) @ react-dom.development.js:11089 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 flushSyncCallbackQueueImpl @ react-dom.development.js:11084 flushSyncCallbackQueue @ react-dom.development.js:11072 scheduleUpdateOnFiber @ react-dom.development.js:21199 dispatchAction @ react-dom.development.js:15660 (anonymous) @ AzureAD.tsx:74 (anonymous) @ MsalAuthProvider.ts:357 (anonymous) @ MsalAuthProvider.ts:357 _callee4$ @ MsalAuthProvider.ts:296 tryCatch @ runtime.js:63 invoke @ runtime.js:293 (anonymous) @ runtime.js:118 asyncGeneratorStep @ MsalAuthProvider.ts:18 _throw @ MsalAuthProvider.ts:18 Promise.then (async) asyncGeneratorStep @ MsalAuthProvider.ts:18 _next @ MsalAuthProvider.ts:18 (anonymous) @ MsalAuthProvider.ts:18 (anonymous) @ MsalAuthProvider.ts:18 (anonymous) @ MsalAuthProvider.ts:51 _callee3$ @ MsalAuthProvider.ts:149 tryCatch @ runtime.js:63 invoke @ runtime.js:293 (anonymous) @ runtime.js:118 asyncGeneratorStep @ MsalAuthProvider.ts:18 _throw @ MsalAuthProvider.ts:18 Promise.then (async) asyncGeneratorStep @ MsalAuthProvider.ts:18 _next @ MsalAuthProvider.ts:18 (anonymous) @ MsalAuthProvider.ts:18 (anonymous) @ MsalAuthProvider.ts:18 (anonymous) @ MsalAuthProvider.ts:51 _callee6$ @ MsalAuthProvider.ts:325 tryCatch @ runtime.js:63 invoke @ runtime.js:293 (anonymous) @ runtime.js:118 asyncGeneratorStep @ MsalAuthProvider.ts:18 _next @ MsalAuthProvider.ts:18 (anonymous) @ MsalAuthProvider.ts:18 (anonymous) @ MsalAuthProvider.ts:18 _callee5$ @ MsalAuthProvider.ts:317 tryCatch @ runtime.js:63 invoke @ runtime.js:293 (anonymous) @ runtime.js:118 asyncGeneratorStep @ MsalAuthProvider.ts:18 _next @ MsalAuthProvider.ts:18 (anonymous) @ MsalAuthProvider.ts:18 (anonymous) @ MsalAuthProvider.ts:18 MsalAuthProvider @ MsalAuthProvider.ts:60 ./src/authProvider.ts @ authProvider.ts:17 webpack_require @ bootstrap:784 fn @ bootstrap:150 ./src/App.tsx @ App.css?4433:45 webpack_require @ bootstrap:784 fn @ bootstrap:150 ./src/index.tsx @ index.css?f3f6:45 webpack_require @ bootstrap:784 fn @ bootstrap:150 1 @ serviceWorker.ts:142 webpack_require @ bootstrap:784 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (anonymous) @ main.chunk.js:1 Show 39 more frames authProvider.ts:6 [MSAL] Thu, 22 Oct 2020 00:30:18 GMT:1.4.0-Verbose AuthResponseHandler has been called authProvider.ts:6 [MSAL] Thu, 22 Oct 2020 00:30:18 GMT:1.4.0-Verbose Interaction type is redirect authProvider.ts:6 [MSAL] Thu, 22 Oct 2020 00:30:18 GMT:1.4.0-Verbose One callback was provided to handleRedirectCallback, calling authResponseCallback with response authProvider.ts:6 [MSAL] Thu, 22 Oct 2020 00:30:18 GMT:1.4.0-Verbose AuthResponseHandler has been called authProvider.ts:6 [MSAL] Thu, 22 Oct 2020 00:30:18 GMT:1.4.0-Verbose Interaction type is redirect authProvider.ts:6 [MSAL] Thu, 22 Oct 2020 00:30:18 GMT:1.4.0-Verbose One callback was provided to handleRedirectCallback, calling authResponseCallback with response index.js:1 [ERROR] ClientAuthError: Error opening popup window. This can happen if you are using IE or if popups are blocked in the browser. console. @ index.js:1 ERROR @ Logger.ts:19 _callee6$ @ MsalAuthProvider.ts:339 tryCatch @ runtime.js:63 invoke @ runtime.js:293 (anonymous) @ runtime.js:118 asyncGeneratorStep @ MsalAuthProvider.ts:18 _throw @ MsalAuthProvider.ts:18 Promise.then (async) asyncGeneratorStep @ MsalAuthProvider.ts:18 _next @ MsalAuthProvider.ts:18 (anonymous) @ MsalAuthProvider.ts:18 (anonymous) @ MsalAuthProvider.ts:18 _callee5$ @ MsalAuthProvider.ts:317 tryCatch @ runtime.js:63 invoke @ runtime.js:293 (anonymous) @ runtime.js:118 asyncGeneratorStep @ MsalAuthProvider.ts:18 _next @ MsalAuthProvider.ts:18 (anonymous) @ MsalAuthProvider.ts:18 (anonymous) @ MsalAuthProvider.ts:18 MsalAuthProvider @ MsalAuthProvider.ts:60 ./src/authProvider.ts @ authProvider.ts:17 webpack_require @ bootstrap:784 fn @ bootstrap:150 ./src/App.tsx @ App.css?4433:45 webpack_require @ bootstrap:784 fn @ bootstrap:150 ./src/index.tsx @ index.css?f3f6:45 webpack_require @ bootstrap:784 fn @ bootstrap:150 1 @ serviceWorker.ts:142 webpack_require @ bootstrap:784 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (anonymous) @ main.chunk.js:1 authProvider.ts:6 [MSAL] Thu, 22 Oct 2020 00:30:18 GMT:1.4.0-Verbose AuthResponseHandler has been called authProvider.ts:6 [MSAL] Thu, 22 Oct 2020 00:30:18 GMT:1.4.0-Verbose Interaction type is redirect authProvider.ts:6 [MSAL] Thu, 22 Oct 2020 00:30:18 GMT:1.4.0-Verbose One callback was provided to handleRedirectCallback, calling authResponseCallback with response