Create new custom user roles in your project of JHipster 4 with Angular 2 in less than five minutes

What is this about?

JHipster provides us with a good amount of options but sometimes we have to make changes to the defaults, like adding a new role that let us filter the users in different ways. When we create our application, we have only three roles: “ROLE_ADMIN”, “ROLE_USER” and  “ROLE_ANONYMOUS”. In our case we’re going to add the “ROLE_EMPLOYEE”, that is a classic used in many projects.

Default users on JHipster 4

Adding a role in JHipster

By default in JHipster we have these users created, inside our database. That help us a lot for the most of the projects, but in case you need something more, you should follow the next steps:

First of all we have to go to our Java folder inside the Spring project, and enter in the security sub-folder that contains all the roles setted. We will add the “employee” one like this:

public static final String EMPLOYEE= "ROLE_EMPLOYEE";

Then, we have to go to the Resources folder and enter in config/liquibase where we will find the files users.csv, users-authorities.csv and authorities.csv. Let’s start for the last one, edit it with a text editor and add at the end:

ROLE_EMPLOYEE

That will add the role to the database. At the end of users.csv add:

5;employee;$2a$10$VEjxo0jq2YG9Rbk2HmX9S.k1uZBGYUHdUcid3g/vfiEl7lwWgOH/K;Employee;Employee;employee@localhost;;true;es;system;system

That last line will add the user “employee” with the password “user” (with its hash, copy it from the previous entry of the CSV) to the database. And to say that this user has the “ROLE_EMPLOYEE” we created before, we have to edit users-authorities.csv and add:

5;ROLE_EMPLOYEE

This line says that we’re linking the user with ID 5 to the role called “ROLE_EMPLOYEE”.

diagram of how jhipster organizes the users and its roles

So now, after we restart the project, our databse will have a new user with a new role, but the front-end created with Angular 2 won’t be able to create users with that role for now. To change that, we have to go to the “webapp” folder and enter into app/admin/user-management and edit the file user-management-dialog.component.ts where we set the authorities. On the array of authorities in the ngOnInit() function we can add our role and it will look like this:

this.authorities = ['ROLE_USER', 'ROLE_ADMIN', 'ROLE_EMPLOYEE'];

Let webpack recompile your TypeScript and there you have your new user and role!

This post was based on this SO answer.

Comments

  1. Author: Gregor

    Ok, after some investigations, here is a solution in 20 seconds: 1. login as admin 2. goto administration > database > login 3. open JHI_AUTHORITY table 4. add new rolename "ROLE_WHATEVER" Now you have this new role in your project.

  2. Author: Gregor

    After trying this out, jhipster recompile with an error: liquibase.exception.ValidationFailedException: Validation Failed: The checksume from initial_shema.xml and the value in the database are different. How to handle this error?

  3. Author: Auguste DAH

    Good tuto !! thanks

Leave a Reply

Your email address will not be published. Required fields are marked *