Sharing Top Content from the Angular-sphere.

On-demand login with Keycloak, Angular 4/5, NgRx, Backend API, Bookmark-able links

On-demand login with Keycloak, Angular 4/5, NgRx, Backend API, Bookmark-able links

  • Step 2: Setup Keycloak JSIt is recommended to load the keycloak JS file from the keycloak server and this is the approach I would be using for this article as well.
  • The keycloak.model.ts is the typescript model for the keycloak state object and response from keycloak server.
  • // app.providers.ts – export const APP_PROVIDERS = [{ provide: RouterStateSerializer, useClass: CustomSerializer 3: The login component/buttonGo to dashboard.component.html file and add a login button – // html – button typescriptngOnInit() {this.store.dispatch(new IsLoggedInCheck()); – = this.alive)).
  • subscribe(_ = {this.store.dispatch(new Login());}That’s it, now after login you should be able to redirect to lazy route after authenticated with keycloak.
  • Now navigating to lazy/home would redirect you to keycloak, ask you to login and then take you to lazy/home instead of lazy .

TL;DR. I was very busy and did not find time to update the old Keycloak angular article. Few had suggested to indicate at the beginning of that article to take a different approach as it was an old…

Step 1: An Angular Starter ProjectI prefer Angular Webpack Starter since it comes out of the box integrated with NgRx, Hmr and Webpack. You are free to choose which ever starter you want but this article won’t talk about setting up NgRx for those.

Step 2: Setup Keycloak JSIt is recommended to load the keycloak JS file from the keycloak server and this is the approach I would be using for this article as well.

Open Index.html and add the keycloak(.js|.min.js) file from your keycloak server location.

You can use webpack to inject the keycloak url. Since we have a dev and production, the keycloak url is dynamically injected depending on the environment.

Create a folder named keycloak inside src/app which will include the following discuss each file and what they do.

The keycloak-api.service.ts is an Observable wrapper for the keycloak.js providing three key functionality 

1. Is the user already logged in

2. Perform on-demand login when required

3. Update the token before making the api call

The keycloak.actions.ts as you all have guessed it, is the redux actions.

The keycloak.effect.ts intercepts the actions fired by the login button and calls the keycloak-api.service.ts where the side effect takes place and then returns an action if the login/checklogin was successful.

The keycloak.reducer.ts is the simplest implementation like any other reducer just store and update the state based on the action fired.

On-demand login with Keycloak, Angular 4/5, NgRx, Backend API, Bookmark-able links