Friday, 9 February 2018

Keycloak and Angular CLI

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.

Stan


1 comment:

  1. at myApp folder: the following command is generating this error:

    λ ng generate keycloak --collection @ssilvert/keycloak-schematic --clientId=myApp
    Could not find module "@ssilvert/keycloak-schematic" from "C:\\Users\\henri\\git\\study\\angular-cli-keycloak\\myApp".
    Error: Could not find module "@ssilvert/keycloak-schematic"

    but i already done npm install -g @ssilvert/keycloak-schematic

    ReplyDelete

Please only add comments directly associated with the post. For general questions use the Keycloak user mailing list.