Angular-oauth2-oidc: silent refresh not working

[Brototype]

Problem:
In the sample application the silent refresh is not working. The same happens if I try it with a config for my own KeyCloak Server:

Found following log messages in the conosle:

angular-oauth2-oidc.umd.js:612 sessionCheckEventListener wrong origin http://localhost:4200 expected https://steyer-identity-server.azurewebsites.net/identity
angular-oauth2-oidc.umd.js:612 got info from session check inframe MessageEvent {isTrusted: true, data: "#error=login_required&state=WyjkaQ4byB6pGzoi7cEHAd8YxxOBrL2lVktl9Cyp", origin: "http://localhost:4200", lastEventId: "", source: Window, …}
angular-oauth2-oidc.umd.js:612 parsed url {error: "login_required", state: "WyjkaQ4byB6pGzoi7cEHAd8YxxOBrL2lVktl9Cyp"}
angular-oauth2-oidc.umd.js:612 error trying to login
app.component.ts:46 oauth/oidc event OAuthErrorEvent {type: "silent_refresh_error", reason: {…}, params: null}params: nullreason: {error: "login_required", state: "WyjkaQ4byB6pGzoi7cEHAd8YxxOBrL2lVktl9Cyp"}type: "silent_refresh_error"__proto__: OAuthEvent
app.component.ts:46 oauth/oidc event OAuthErrorEvent {type: "token_error", reason: {…}, params: {…}}
angular-oauth2-oidc.umd.js:612 tryLogin during silent refresh failed OAuthErrorEvent {type: "token_error", reason: {…}, params: {…}}params: {error: "login_required", state: "WyjkaQ4byB6pGzoi7cEHAd8YxxOBrL2lVktl9Cyp"}reason: {}type: "token_error"__proto__: OAuthEvent
home.component.ts:75 refresh error OAuthErrorEvent {type: "silent_refresh_error", reason: {…}, params: null}

the last message in detail:

OAuthErrorEvent {type: "silent_refresh_error", reason: {…}, params: null}
params: null
reason: {error: "login_required", state: "WyjkaQ4byB6pGzoi7cEHAd8YxxOBrL2lVktl9Cyp"}
type: "silent_refresh_error"

caused / catched by following code

 testSilentRefresh() {
        /*
         * Tweak config for implicit flow.
         * This is needed b/c this sample uses both flows
        */
        //this.oauthService.clientId = "spa-demo";
        this.oauthService.oidc = true;

        this
            .oauthService
            .silentRefresh()
            .then(info => console.debug('refresh ok', info))
            .catch(err => console.error('refresh error', err));
    }

Steps to reproduce:

1. Run sample app with npm run start
2. Click Login, login with max/geheim
3. Click Test silent refresh

Expected behavior: No error is thrown

[Brototype]

Out of nowhere this error is not coming up anymore and the silent refresh works just fine.
Very weird...
It was not working with your sample keycloak server, not with our own keycloack and also the demo server from xmlking (in #270) was not refreshing - everytime returning the error "login required". But now it is working again. I suspect some bug within keycloak.

[Brototype]

Hey Folks
I feel incredibly stupid 🙈 ... it was my ghostery chrome plugin that caused the issue...
It was hidden and somehow blocked something in the flow.
💯 apologies for this.

[lamnv5490]

Hi guys, I have run in same issue. Here is my setup

private _authConfig: AuthConfig = { issuer: env.oauth.issuer, redirectUri: env.oauth.redirectUri, clientId: env.oauth.clientId, scope: env.oauth.scope, loginUrl: env.oauth.loginUrl, requireHttps: false, oidc: false, silentRefreshRedirectUri: env.oauth.silentRefreshRedirectUri, silentRefreshShowIFrame: true, silentRefreshIFrameName: "sr-iframe", silentRefreshTimeout: 5000, clearHashAfterLogin: true, };

"@angular/core": "^8.2.14",
"angular-oauth2-oidc": "^8.0.4",

[a2glukhov]

In your silent-refresh.html file repleace this code:

parent.postMessage(location.hash, location.origin);

with the folowing:

(window.opener || window.parent).postMessage(location.hash || ('#' + location.search), location.origin);

[lamnv5490]

Thank you @a2glukhov . I have found the bug. Because of cookie policies (HTTP) of Chrome, refreshing token will not working at local or dev.

[AndrewNikolin]

@lamnv5490 You can work around this issue by setting chrome://flags/#same-site-by-default-cookies to Disabled and relaunching Chrome