[Bug]: Can't authenticate an App in an Iframe -> Error: could not find matching config for state ...

[simon-knu]

Hello

I have the same issue than this related here #1318 but I am on a particular use case

Version of the lib
14.1.5

Auth Config

AuthModule.forRoot({
  config: {
    configId: AppConfiguration.config.AppName,
    authority: AppConfiguration.config.Url.Identity,
    redirectUrl: AppConfiguration.config.Url.Frontend,
    secureRoutes: [
      AppConfiguration.config.Url.Core
    ],
    postLogoutRedirectUri: AppConfiguration.config.Url.Frontend,
    clientId: 'launcher',
    scope: 'openid offline_access launcher',
    responseType: 'code',
    silentRenew: true,
    useRefreshToken: true,
    renewTimeBeforeTokenExpiresInSeconds: 30,
    autoUserInfo: false,
    unauthorizedRoute: '/errors/unauthorized',
    ignoreNonceAfterRefresh: true,
    historyCleanupOff: false
  }
})

Routing

{
  path: '',
  component: DefaultLayout,
  children: [
    {
      path: '',
      redirectTo: 'home',
      pathMatch: 'full'
    },
    {
      path: 'home',
      loadChildren: () => import('../app/views/main/main.module').then(m => m.MainModule),
    },
    {
      path: 'app',
      loadChildren: () => import('../app/views/iframe/iframe.module').then(m => m.IframeModule),
    }
  ],
  canActivate: [AutoLoginAllRoutesGuard]
},
{
  path: 'errors',
  loadChildren: () => import('../app/views/errors/errors.module').then(m => m.ErrorsModule)
},
{
  path: '**',
  redirectTo: '/'
}

Explanation

I have a "Launcher" app that contains an Iframe (yep I know...)

When the user access the "Launcher" app, he needs to be authenticated (because of the some requests)

When the user is logged in, he can access some tabs. Each tab opens one specific application in the above-mentioned iframe.
Theses Angular Apps use the same flow to connect (with AutoLoginAllRoutesGuard) because an user can access them through the Launcher or directly via their own URL

Exemple :
https://mywebsite.com -> the url of the "Launcher" app
https://mywebsite.com/application1 -> the url of the Application1 app
https://mywebsite.com/application2 -> the url of the Application2 app

When you are on the Launcher, you can access Application1 and Application2 like that :
https://mywebsite.com/#/app/application1
https://mywebsite.com/#/app/application1

What I need

The user access the Launcher, then he is redirected to the login page. After putting his credentials, he is redirected back to the Launcher. (This part works)
After that, since we have a Cookie set, if the user wants to access the "Application1", he just need to click on the dedicated tab and, then, thanks to the Cookie, there is a quick (invisible) redirect that is doing to authenticate my user to to the Application1.
Same stuff for Application2.

The issue

As I said, the authentication with the "Launcher" works as expected. So I use the "AutoLoginAllRoutesGuard" flow, it's perfect but then...
When I try to access another application from the Launcher, I'm getting the error "ERROR Error: Uncaught (in promise): Error: could not find matching config for state xxxxxxxx".
Instead of doing the classic authentication, it stops there...

FYI : All theses Angular Apps are on the same domain and they share the same Session Storage but with different keys

More information

FYI : I stay on the same tab to do the next step because of the sessionStorage

If I access the Apps first and then the Launcher, it will work as expected

I go on the Application1 -> I need to log in, I'm redirect, I put username and password, everything is fine, I'm logged in.
I go on the Application2 -> thanks to the Cookie, there is a quick (invisible) redirect, and I'm logged in.
I go on the Launcher -> thanks to the Cookie, there is a quick (invisible) redirect, and I'm logged in and then, in this particular case, I can access the Apps (Application1 and Application2)

Any Ideas ?

I think it's related to the Session Storage because if you compare the first screen and the second screen, there is a difference in the generation of the state.

I just don't know why it's not working when it's initiate from the Launcher
So... do you have any ideas ?

I tried everything related to the UseHash and the ERROR Error: Uncaught (in promise): Error: could not find matching config for state xxxx but nothing works

PS : I'm pretty sure that's nothing related to the Redirect thing with the Cookie because there is not an actual redirect to another domain

[FabianGosebrink]

Have you tried updating to the latest version?