1

I have a simple Vue2.js app that is using IdentityServer4 as identity provider. Everything works fine with the old oidc-client library:

https://github.com/IdentityModel/oidc-client-js

with the following settings:

settings: {
  authority: process.env.VUE_APP_IDENTITY_SERVER_URL, 
  client_id: process.env.VUE_APP_CLIENT_ID, 
  redirect_uri: process.env.VUE_APP_WEB_ROOT_URL + "/callback",
  post_logout_redirect_uri: process.env.VUE_APP_WEB_ROOT_URL,
  response_type: "code", 
  scope: "openid profile roles",
  popup_redirect_uri: process.env.VUE_APP_WEB_ROOT_URL,
  popup_post_logout_redirect_uri: process.env.VUE_APP_WEB_ROOT_URL + "/callback",
  silent_redirect_uri: process.env.VUE_APP_WEB_ROOT_URL + "/silent-refresh",
  automaticSilentRenew: true,
  filterProtocolClaims: true,
  loadUserInfo: true,
  includeIdTokenInSilentRenew: false, // https://github.com/IdentityModel/oidc-client-js/issues/172
},

However the IdentityServer is not maintained anymore so I decided to us Azure AD instead of IdentityServer4, and also upgrade the library oidc-client (no longer maintained as well) with the new one oidc-client-ts

https://github.com/authts/oidc-client-ts

I implemented the solution with the following configuration:

settings: {
  authority: `https://login.microsoftonline.com/${process.env.VUE_APP_AZURE_TENANT_ID}/v2.0/`,
  clientId: process.env.VUE_APP_AZURE_CLIENT_ID,
  redirectUri: process.env.VUE_APP_MI_APP_ROOT + "/callback",
  postLogoutRedirectUri: process.env.VUE_APP_MI_APP_ROOT,
  responseType: "code",
  scope: `openid profile ${process.env.VUE_APP_AZURE_API_SCOPE}`,
  silentRedirectUri: process.env.VUE_APP_MI_APP_ROOT + "/silent-refresh",
  automaticSilentRenew: true,
  filterProtocolClaims: true,
  loadUserInfo: false,
  includeIdTokenInSilentRenew: false,

};

And everything works fine except I got an "IFrame timed out without a response" error while logging in:

IFrame time out error

As far as I know the oidc-client library use an invisible iframe to manage the login process/silent refresh. The login process works however the user have to wait for few seconds due to this timeout issue (it's annoying). Does anyone has already faced this issue? How can I debug this stuff since the error is inside an external library?

Thanks in advance

matteogll
  • 803
  • 8
  • 16

1 Answers1

1

The hidden iframe runs a code flow that should include the OpenID Connect prompt=none parameter. This should result in a response with an authorization code, or a silent error response. Eg if the SSO cookie is expired a login_required response is returned.

When a frame window timeout occurs, it usually means the authorization server is not honouring the prompt parameter, and is rendering a screen on the hidden iframe. This could be a login / consent screen, or, if your app has sent an incorrect client ID or redirect URI, an error screen. The iframe request then never returns. Another possibility for a hang is if your code did not call the library's signinSilentCallback method correctly.

So I would recommend tracing the HTTP traffic as a next step. See whether the iframe is sending the prompt parameter and look at its response payload to see if it contains an HTML payload.

My token renewal blog post has further info on common issues with this flow. For example the Safari browser will always drop the SSO cookie.

Gary Archer
  • 22,534
  • 2
  • 12
  • 24