Angular app based on keycloak keep loading infinitly when refreshing the page or after login

I try to conserve the current state of my angular app (the url) each time I refresh the page to stay on the same component by proceeding like that: changing the value of the redirectUri in the isAccessAllowed:

public async isAccessAllowed(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
) {
// Force the user to log in if currently unauthenticated.
if (!this.authenticated) {
await this.keycloak.login({
redirectUri: window.location.origin
});
}

// Get the roles required from the route.
const requiredRoles = route.data['roles'];

// Allow the user to proceed if no additional roles are required to access the route.
if (!Array.isArray(requiredRoles) || requiredRoles.length === 0) {
return true;
}

// Allow the user to proceed if all the required roles are present.
return requiredRoles.every((role) => this.roles.includes(role));
}


from what is mentionned above to the following:

redirectUri: window.location.origin + state.url


but that caused an infinite loading each time I refresh the page, and in case I don't add this state.url parameter I lose the last page I was located in each time I reload the page. One thing I noticed is that while this infinite loading is runing, the url in the browser change for example suppose the current url is: localhost:4200/students, when refreshing the page it beacome: http://localhost:4200/students/#state=97adb035-6f54-48f4-80ce-5bdab263d473&session_state=59258d8a-266c-43b5-a5ee-e983cd06a1b9&code=55c1ad08-3981-4b8a-8ad3-558c9fc3cc76.59258d8a-266c-43b5-a5ee-e983cd06a1b9.0745ea0b-b772-48d9-ac65-2cab34cf9b50&state... and then switch back to http://localhost:4200/students, and continue like that infinitely. here's my keycloak configuration in the app.module:

export function kcFactory(kcService: KeycloakService) {
return () => {
kcService.init({
config: {
realm: "students",
clientId: "studentsClient",
url: "http://localhost:8080"
},
loadUserProfileAtStartUp: true,
initOptions: {
// onLoad: "check-sso",
onLoad: "login-required",
checkLoginIframe: true,
},
})
}
}


keycloak version: 21.1.1, keycloak-angular: 14.1.0, keycloak-js: 22.0.1, Can someone help me please.

Continue reading...