Project composition

I am working on a project composed of 2 front-end apps that request a back-end REST-API.
The organisation of our apps is pretty straightforward for now, but it is going to evolve soon.

Front-end:

• Web app (React)
• Mobile app (React Native)

Back-end:

• API REST (in Ruby RoR).

Access Policies issue

Context:

• The front-end apps needs to know for a given user which parts of the UI should be displayed based on the Access Policies.
• It seems we have an hybrid model between RBAC + ABAC

For now we don’t have a clear architecture to manage Access Policies, the business logic is spread across both apps and it leads to several issues :

• Duplication of the Access Policies code on back-end + front-end (so we may end-up with the same code duplicated in 3 different parts of the codebase for the same policy).
• Complex conditional on front-end: In some case we need to fetch multiple entities to decide wether or not the user can access data.

Solutions / Ideas

My initial idea would be to have the Access Policies logic centralized on the API. This way we prevent duplication, all the rules are in one part of the codebase, also it will scale better if we decide later to add front-end apps or even API microservices.

The missing point would be : How to share Access Policies across back-end and front-end ?

• It is a good convention to expose such configuration from an API endpoint ?

Example :

route: GET /user/access_policies
response :

{
  author: {
    read: true,
    create: true,
    update: false,
    delete: false
  },
  books: {
    read: true,
    create: true,
    update: true,
    delete: false,
  }
}

Also can I expose specific business policies outside of simple CRUD verbs :

{
  books: {
    read: true,
    create: false,
    update: false,
    delete: false,
    deleteOwnBooks: true, // custom business policy (only delete the books owned by the current user)
  }
}

Do you have other suggestions or best practices concerning sharing such Access Policies ?