Redirect flow within iframe with allowRedirectInIframe flag

Question

My application B is hosted inside an iframe of another application A. The user journey is that the user logs into the parent application A and then clicks on the navigation menu which loads my application B in an iframe. This application B is an Angular SPA and the backend is hosted on a different domain. I am trying use Bearer tokens in this application B after acquiring a session with the redirect flow. I am using the "allowRedirectInIframe" flag as well. however this does not work. B starts the redirect flow comes back and starts it all over again and fails with the following error

I can see some issues/docs where it explicitly says that redirect flow is not possible in iframes. for eg https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/3759 https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/iframe-usage.md

But the existence of the "allowRedirectInIframe" flag leads me to believe that this is outdated. Please correct me if i am wrong. Otherwise can you tell me what i am doing wrong? I have attached my msal config and app.module.ts file below.

MSAL Configuration

auth: {
    clientId: 'xxxxxxxxxxxx',
    authority: b2cPolicies.authorities.signUpSignIn.authority,
    knownAuthorities: [b2cPolicies.authorityDomain],
    redirectUri: https://my.redirect.uri,
    postLogoutRedirectUri: '/logged-out'
  },
  cache: {
    cacheLocation: BrowserCacheLocation.LocalStorage,
    storeAuthStateInCookie: false
  },
  system: {
    loggerOptions: {
      logLevel: LogLevel.Error,
      piiLoggingEnabled: false,
    },
    allowRedirectInIframe: true,
  },

Relevant Code Snippets

// app.module.ts code
  providers: [
    ConfigService,
    {provide: HTTP_INTERCEPTORS, useClass: RequestHeaderInterceptor, multi: true},
    {provide: HTTP_INTERCEPTORS, useClass: ConfigServiceInterceptor, multi: true, deps: [ConfigService]},
    {provide: HTTP_INTERCEPTORS, useClass: RequestErrorInterceptor, multi: true, deps: [ToastrService]},
    {provide: ErrorHandler, useClass: AppErrorHandler},
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true,
    },
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory,
    },
    {
      provide: MSAL_GUARD_CONFIG,
      useFactory: MSALGuardConfigFactory,
    },
    {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: MSALInterceptorConfigFactory,
    },
    MsalService,
    MsalGuard,
    MsalBroadcastService,
    // {
    //   provide: APP_INITIALIZER,
    //   multi: true,
    //   deps: [MsalService],
    //   useFactory: (authService: MsalService) => {
    //     return () => {
    //       return authService.ssoSilent({
    //         scopes: []
    //       }).toPromise();
    //     };
    //   }
    // },
  ],
  bootstrap: [AppComponent]
})

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

Core Library Version 2.22.0

Wrapper Library MSAL Angular (@azure/msal-angular)

Wrapper Library Version 2.1.1

Identity Provider : Azure B2C Custom Policy Source : External (Customer)