⛔Authorization

When building a web application it is crucial to make it secure, besides token based authentication, there might be the need to limit access to certain areas or even whole pages. We can help you do this too.

If you answered with true to the "Implement authorization" question prompted at the beginning, there will be an example of permission checking included in this sample.

In addition, there will be some custom hooks designed to help you apply permission restrictions(useUserData and useRights) and the following query will be generated (it assumes that you have the code implemented in you GraphQL server and database):

const GET_USER_DATA = gql`
query userData($externalId: ID!){ 
    userData(externalId: $externalId){ 
    id 
    userName 
    rights 
    } 
}`

If you use our GraphQL Rocket Generator the implementation for the above query will already be done for you.

There are 3 "areas" in your new application where you might want to limit the access:

• Routes: see src/routes/app file. Use roles and/or rights properties to limit the access to a route.

• Side menu: see src/constants/menuConfig.js file. Here you will also find the roles and rights properties that you could use to limit the access to a certain menu item.

• Small parts of your react components or even an element: here you can use the useRights custom hook explained in the Custom hooks section. To define a new role, assuming it was already added in the database, you should export it from src/constants/permissions file.