[Question]: Error: could not find matching config for state when app is embedded in iframe
What Version of the library are you using? 15.0.3
Question What causes the "Error: could not find matching config for state" error?
My angular application runs in an iframe inside the browser page. In FireFox, when the setting Enhanced Tracking Protection is set ON, authentication fails with:
ERROR Error: could not find matching config for state 9db70b6eb2f43928cb830184fb6249d925lBKJuOj
After turning Enhanced Tracking Protection OFF, everything works fine.
Also, if I run the app outside of the iframe, everything works fine as well. Seems to be specific to the iframe.
I've seen this issue in Chrome as well but I haven't figured out what setting is causing it.
Here's my config:
@NgModule({ imports: [AuthModule.forRoot({ config: [ { triggerAuthorizationResultEvent:true, historyCleanupOff: true, configId: 'CXone-Standard', authority: 'https://cxone.niceincontact.com', unauthorizedRoute: window.location.origin + '/sign-in', redirectUrl: window.location.origin + '/login', postLogoutRedirectUri: window.location.origin + '/logout', clientId: 'xxxxxx', scope: 'openid', // 'openid profile offline_access ' + your scopes responseType: 'code', customParamsAuthRequest: {display:'popup'}, silentRenew: true, useRefreshToken: true, autoUserInfo: false, renewTimeBeforeTokenExpiresInSeconds: 900, logLevel: LogLevel.Debug, disableIdTokenValidation: true, tokenRefreshInSeconds: 15, } ] })], exports: [AuthModule], }) export class AuthConfigModule {}
Are you using Javascript postMessage to communicate to the iframe?
Yes but I'm not sure I understand how that fits in. The log in screen is in an iframe inside a web page. It really doesn't communicate with the parent web page, it only gives it a place to live. The log in screen the pops out the oidc authentication screen to authenticate with IDP, the should disappear and give focus back to the iframe app. It just doesn't disappear.
Our implementation for the OIDC is in an iframe because we put it in a bootstrap modal, and we have a login button outside the iframe that will send a postMessage to do the authorize call, and when the user has been logged-in, the iframe will send a postMessage back to let the UI know that the user is logged-in.