Keycloak and Angular CLI

February 09 2018 by Stan Silvert

This post is more than one year old. The contents within the blog is likely to be out of date.

So I made a schematic that installs and configures Keycloak in any Angular CLI application.

If you want to try it out, do this from the command line:

npm install -g @ssilvert/keycloak-schematic
ng new myApp
cd myApp
ng generate keycloak --collection @ssilvert/keycloak-schematic --clientId=myApp

Now Keycloak is integrated into your app. Of course, you can do this with any existing Angular CLI application. It doesn't have to be a new one.

Then, go to the Keycloak Admin console (master realm) and go to Clients --> Add Client --> Select File.

Select the client-import.json file that the "ng generate keycloak" command created in /myApp.

Assuming your Keycloak server is running on localhost:8080, you are ready to go. Start your application:

ng serve

Go to your browser to start the app and see this:

Oh joy! myApp is protected with Keycloak!

The keycloak-schematic installs a KeycloakService and a KeycloakGuard. So you can easily:

Add login/logout buttons
Access user self service (account management)
Guard protected routes instead of the whole app
Work with roles
Lots more

Click here for a comprehensive getting started guide, full documentation, and sample code.

Note that this stuff is early alpha right now. And it will move from @ssilvert to @keycloak before long. In the mean time, I'd love to get feedback. There is a lot to do to make Keycloak/Angular integration even better, but I think the keycloak-schematic is a big step forward.

So long, and thanks for all the fish.