I am using angular-oauth2-oidc with Keycloak for authentication. I have a login button that used to trigger the oauth2 service's initLoginFlow method. This method redirects to the login page, which is placed outside the Angular app and generates different query parameters each time. Unfortunately I was asked to provide a static link that automatically redirects to the Keycloak with new query parameters, so I did the following:
The login button now redirects to an empty login page that calls the oauth2 service's initLoginFlow method in its ngOnInit method. Everything works as expected except the scenario where the user clicks the login button and after rendering the Keycloack page clicks the browser back button. First, the following loop was created (Keycloack's back button led to the login page, which in turn redirected back to Keycloack).
To solve this problem, I used { skipLocationChange:true } when navigating to the login page. I tested this approach with ng serve and the loop was resolved, but after deploying it to the server, when clicking the back button the loop does not appear, instead the page is blank even though the url displayed by the browser is correct (not /login, but what it was before clicking the login button). I put console.log('test') within ngOnInit on the login page and it prints 'test' every time the back button is clicked in the production environment, but in the local environment - it doesn't. Do you have any suggestions on how to solve this problem in the production environment as well?
P.S. If I refresh (F5) the blank page the content gets loaded. I have even created the application and deployed it on the Apache server using xampp and the behavior is the same. The issue is reproducible in Chrome, Edge and Opera, but in Firefox everything works as expected.