Example goes into infinite redirect loop in Safari (not in Chrome) when run against AD B2C

[TheWinch]

Library versions

• react-aad-msal: 2.3.5
• msal: 1.4.0

Describe the bug
Running the samples/react-javascript application against Azure AD B2C in Safari goes into infinite redirect loop using the "redirect" mode.

Here are the experiments I tried:

• running the popup example with a fresh private navigation window and a local AD B2C account
  • works fine: IdToken displayed and decoded, left panel offers to logout
  • reloading the page, the IdToken is not displayed anymore (and the left panel shows the login button) while the access token is still displayed
• running the popup example with a fresh private navigation window and a social login (Corporate Active Directory)
  • the popup is displayed a second time after redirect, then IdToken is not displayed and the left panel shows the login button)
• running the redirect example with a fresh private navigation window and a local AD B2C account
  • after login redirection, popup is displayed, then application with access token only (same as above) is briefly displayed, then redirect to the login page happens, and it loops between application (without id token) and login page
• running the redirect example with a fresh private navigation window and a social login
  • same as above but with 2 popups, after some time the social login fails: Azure AD replay protection stops the redirect in the login popup

In each of the failing tests, I was able to verify that an IdToken is actually sent over in the response from Azure AD B2C. Problem seems to come from the browser side (disclaimer: I'm not expert in Javascript nor in React).

Testing the exact same repository with same configuration, but on Chrome, works as expected in all scenarios.

Expected behavior
The application is authenticated after first popup display, or after first redirect.

To Reproduce
See in bug report.

Desktop (please complete the following information):

• OS: macOS Catalina v10.15.6
• Browser
• Safari Version 14.0 (15610.1.28.1.9, 15610)
• Chrome Version Version 85.0.4183.121 (Official Build)

authProvider.js configuration

{
    auth: {
      authority: "https://<tenant>.b2clogin.com/<tenant>.onmicrosoft.com/B2C_1_signup-signin",
      clientId: "<registered app client id>",
      postLogoutRedirectUri: window.location.origin,
      redirectUri: window.location.origin,
      validateAuthority: false,
      navigateToLoginRequestUrl: false
    },
   cache: {
      cacheLocation: "sessionStorage",
      storeAuthStateInCookie: true
    }
},
{
    scopes: ["openid", "profile", "https://<tenant>.onmicrosoft.com/<test api>/read.all"]
  },
  {
    loginType: LoginType.Popup,
    tokenRefreshUri: window.location.origin + "/auth.html"
  }

Azure AD B2C configuration

• app is registered with SPA redirect URLs http://localhost:3000 and http://localhost:3000/auth.html, it accepts Implicit flow with id token and access token
• app is authorized for scope https://<tenant>.onmicrosoft.com/<test api>/read.all with admin consent

[pbatey]

I wonder if this is the same issue that is described here: https://docs.microsoft.com/en-us/answers/questions/365956/sso-in-ios-with-safari-browser.html

The first answer explains:

[...] The issue is that Apple is not properly sending cookies to login.microsoftonline server because of some privacy and security updates.

There is a workaround in this blog post that may help.

Also, assuming my problem is the same as yours, I only experience the redirect loop when serving from localhost; I don't experience the problem when serving with a domain name (https://myapp.myorg.com, for example).