Keycloak Refresh Issue for angular application

[srinivas uideveloper]

I am using keycloak JavaScript adapter in my Angular 11 app and whilst my login and redirection work, the problem is that whenever I refresh my ng-app it will again ask for keycloak login although I see that my session is still active on /auth/realms/{image a realm name}/account.

As I have understood it from the keycloak JS Adapter documentation https://www.keycloak.org/docs/3.0/securing_apps/topics/oidc/javascript-adapter.html, when onLoad is set to login-required for init options it authenticates the client if the user is logged-in to Keycloak or display the login page if not. But it seems like 

in my case, after entering the username and password through the keycloak login page it was going to the angular web page after that when I refresh the web page it was going into the keycloak login page. Hereafter refreshing the page token was not storing.

Note: When I used the local URL it's working fine but the problem is when I used the nextcloud -eil environment URL it's not working fine.

This is my configuration setup: 

@

app.init.ts

import { KeycloakService } from 'keycloak-angular';

export function initializeKeycloak(keycloak: KeycloakService): () => Promise<boolean> {

return () =>

keycloak.init({

config: {

url: 'here i used nextcloud url',

realm: 'my-realm',

clientId: 'portal-ui',

},

initOptions: {

onLoad: 'login-required',

checkLoginIframe: false,

checkLoginIframeInterval: 25

},

loadUserProfileAtStartUp: true

});

}

package.jon

{

"name": "keycloak-integration",

"version": "0.0.0",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

},

"private": true,

"dependencies": {

"@angular/animations": "~11.1.0",

"@angular/common": "~11.1.0",

"@angular/compiler": "~11.1.0",

"@angular/core": "~11.1.0",

"@angular/forms": "~11.1.0",

"@angular/platform-browser": "~11.1.0",

"@angular/platform-browser-dynamic": "~11.1.0",

"@angular/router": "~11.1.0",

"angular-oauth2-oidc": "^10.0.3",

"keycloak-angular": "^8.0.1",

"keycloak-js": "^10.0.2",

"rxjs": "~6.5.5",

"tslib": "^2.0.0",

"zone.js": "~0.10.3"

},

"devDependencies": {

"@angular-devkit/build-angular": "~0.1101.0",

"@angular/cli": "~11.1.0",

"@angular/compiler-cli": "~11.1.0",

"@types/node": "^12.11.1",

"@types/jasmine": "~3.6.0",

"@types/jasminewd2": "~2.0.3",

"codelyzer": "^6.0.0",

"jasmine-core": "~3.6.0",

"jasmine-spec-reporter": "~5.0.0",

"karma": "~5.2.3",

"karma-chrome-launcher": "~3.1.0",

"karma-coverage-istanbul-reporter": "~3.0.2",

"karma-jasmine": "~4.0.0",

"karma-jasmine-html-reporter": "^1.5.0",

"protractor": "~7.0.0",

"ts-node": "~8.3.0",

"tslint": "~6.1.0",

"typescript": "~4.1.3"

}

}

@