Recently, I have delved into the realm of using KeyCloak with Angular. The KeyCloak Docker is up and running on Port 8080 while my Angular application takes its place on 4200. As I access my app through the browser, I find myself redirected to auth/realms/... with the correct redirect URL, as expected. However, before the KeyCloak login page fully loads, I am swiftly redirected back to the same auth/realms/..., but this time with the old redirect URL that was present just moments ago.
The root of the issue doesn't seem to lie within KeyCloak itself, rather it appears to be a glitch in my Angular implementation. This behavior persists even if my KeyCloak client is disabled or if an incorrect client is accessed.
To provide some insight into the code aspect, here's how I configured my KeyCloakOptions:
export const keycloakOptions: KeycloakOptions = {
config: {
url: '/auth',
realm: 'bookstore',
clientId: 'bookstore-front-end'
},
initOptions: {
onLoad: 'login-required',
checkLoginIframe: false
},
enableBearerInterceptor: true,
bearerExcludedUrls: ['/assets']
};
Furthermore, the initialization of the Service is done in the following manner:
export class AppModule implements DoBootstrap {
public ngDoBootstrap(appRef: ApplicationRef): void {
keycloakService
.init(keycloakOptions)
.then(() => {
console.log('[ngDoBootstrap] bootstrap app');
appRef.bootstrap(AppComponent);
})
.catch(error => console.error('[ngDoBootstrap] init Keycloak failed', error));
}
}
A suspicion creeps in regarding the involvement of my app routing in causing this hiccup. Below is a brief overview of how my routes are structured:
const routes: Routes = [
// home route protected by auth guard
{path: 'books', component: BooksComponent, canActivate: [AuthGuard]},
// otherwise redirect to home
{path: '', redirectTo: 'books', pathMatch: 'full'}
];
If any additional segments of code are required for analysis, feel free to ask for them. Any assistance on this matter would be greatly appreciated.
EDIT:
The initial request I make presents itself like this:
http://localhost:4200/auth/realms/bookstore/protocol/openid-connect/auth?client_id=bookstore-front-end&redirect_uri=http%3A%2F%2Flocalhost%3A4200%2F&state=c530f55a-b21e-43c3-8e1c-a3beb134c9ee&response_mode=fragment&response_type=code&scope=openid&nonce=0c359787-92e7-4d6d-9578-a65da686b046
However, I've just noticed that within the body of my response, I'm being served the index.html file of my application, which strikes me as peculiar.