Invoking keycloak service from a different component than main.ts in angular to support...

My angular app(docker container) is integrated with keycloak. As soon as I enter my app url, it takes me to Azure AD login page as I have configured my keycloak realm for the same. it's working as expected.

I want to support multiple customers having their respective Azure AD. I can deploy different containers for each customer but that may put stress on my VM. Instead, I got to know about kc_idp_hint parameter which you can use to allow different users to see different login pages.

So, I am creating another component which should load first as soon as my app url is entered in a browser, it would take user email as input, do some analysis to identify the required value for kc_idp_hint parameter and then the flow should be forwarded to keycloak for initiating login process.

After doing the above, I am noticing that after user logs in, the flow is getting redirected back to my newly created component and not to the desired home component as it should.

I am sharing relevant files as before and after making the changes

main.ts [Before]

if (environment.production) {
enableProdMode();
}

KeycloakService.init()
.then((user) => {
environment['keycloakAuth'] = user.keycloakAuth;
platformBrowserDynamic().bootstrapModule(AppModule)
.catch((err) => console.log(err));
})
.catch((err) => {
console.log(err);
});


main.ts [After]

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
.catch((err) => console.log(err));


new component login

onSubmit() {
KeycloakService.init()
.then((user) => {
environment['keycloakAuth'] = user.keycloakAuth;
this.router.navigate(['/home']); // Redirect after login
})
.catch((err) => {
console.log(err);
});
}


app.module.ts [Before]

...
const routes: Routes = [
{ 'path': '', 'redirectTo': 'home', 'pathMatch': 'full' },
...


app.module.ts [After]

...
const routes: Routes = [
{ 'path': '', 'redirectTo': 'login', 'pathMatch': 'full' },
{ 'path': 'home', 'component': HomeComponent },
{ 'path': 'login', 'component': LoginComponent },
...


Please let me know what could be going wrong here?

Continue reading...