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


4 comments:

  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
    Replies
    1. Christopher GLAUNEC4 May 2018 at 04:36

      It's normal. I, have resolve it.
      Go to your angular cli application.
      run this command : npm install @ssilvert/keycloak-schematic
      that all :)

      Delete
  2. I get the following error. Please advise:

    Schematic "keycloak" not found in collection "@schematics/angular".
    Error: Schematic "keycloak" not found in collection "@schematics/angular".
    at SchematicEngine.createSchematic (C:\Projects\myApp\node_modules\@angular-devkit\schematics\src\engine\engine.js:155:23)
    at CollectionImpl.createSchematic (C:\Projects\myApp\node_modules\@angular-devkit\schematics\src\engine\collection.js:12:29)
    at Object.getSchematic (C:\Projects\myApp\node_modules\@angular\cli\utilities\schematics.js:36:23)
    at GenerateCommand.getOptions (C:\Projects\myApp\node_modules\@angular\cli\models\schematic-command.js:194:40)
    at GenerateCommand. (C:\Projects\myApp\node_modules\@angular\cli\commands\generate.js:38:53)
    at Generator.next ()
    at C:\Projects\myApp\node_modules\@angular\cli\commands\generate.js:7:71
    at new Promise ()
    at __awaiter (C:\Projects\myApp\node_modules\@angular\cli\commands\generate.js:3:12)
    at GenerateCommand.initialize (C:\Projects\myApp\node_modules\@angular\cli\commands\generate.js:30:16)

    ReplyDelete
  3. i got same error event i have installed @ssilvert/keycloak-schematic --save locally too.

    ReplyDelete

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