“Who can access this field?” is the most frequent — and least answered — question in GraphQL security.

This article introduces the concept and architecture of a Live RBAC Explorer GUI,

a visual tool that allows teams to interactively explore access permissions per role in a GraphQL schema.

1. Objective: Role-Based GraphQL Access Visualization

Users should be able to:

✅ Select a role (admin, user, guest, etc.)

✅ View query/mutation types and their fields

✅ See which fields are accessible, denied, or conditionally filtered

✅ Live-query the API with the role context

2. Use Case Scenarios

  • 🔍 Security auditing for permission overreach
  • 🤝 Developer understanding of RBAC in collaborative teams
  • ✅ Pre-release validation of new roles or schema changes
  • 🧪 QA testing to confirm access boundaries

3. Architecture Overview 

+--------------------------+
|   RBAC Explorer GUI      | ← Vue / React SPA
+--------------------------+
           ↓
     Role Selector (UI)
           ↓
   JWT Generator (per role)
           ↓
    GraphQL Introspection
           ↓
    Live Field Access Check
           ↓
    Color-coded Explorer View

4. Tech Stack

  • Frontend: React + Apollo Client or Vue + urql
  • Auth: Static JWT per role or dynamic generator
  • Backend: Hasura or Apollo with RBAC enabled
  • Optional: Express or Netlify Functions for token handling

5. Field Access Status Legend

Symbol Meaning
🟢 Full access (allow)
🟡 Conditional (filter)
🔴 No access (deny)

Use color or icon overlays directly in the schema explorer.

6. Implementation Strategy

✅ Step 1: JWT Generation per Role

Use hardcoded secret or JWT signer (e.g. Firebase):

function getJWT(role: string): string {
  return jwt.sign({
    'https://hasura.io/jwt/claims': {
      'x-hasura-default-role': role,
      'x-hasura-allowed-roles': [role],
      'x-hasura-user-id': '123'
    }
  }, process.env.JWT_SECRET);
}

✅ Step 2: Introspect with JWT

Use Apollo Client:

const client = new ApolloClient({
  uri: 'https://your-api/graphql',
  headers: { authorization: `Bearer ${token}` }
});

Query:

{
  __type(name: "User") {
    fields { name type { name } }
  }
}

Compare introspection results per role.

✅ Step 3: GUI Visualization

Build a tree viewer:

- Query
  - me 🟢
  - users 🔴
- Mutation
  - updateProfile 🟡
  - deleteUser 🔴

Highlight field accessibility status per role using badges/icons.

✅ Step 4: Live Try-it Panel (Optional)

Let users issue queries as a selected role:

query {
  me { id email }
}

→ Response shown with headers applied, or errors clearly marked.

7. Enhancements

  • ✅ Diff mode: compare 2 roles side by side
  • 📊 Export as PDF or HTML snapshot for audits
  • 📈 Track % of schema exposed per role
  • 🔄 Integrate with Hasura metadata to infer row-level filters

Final Thoughts

RBAC is code. It deserves a UI.

Live Explorer brings visibility to what was previously hidden — the true access graph behind your GraphQL API.

In the next evolution:

  • GitHub integration to preview PR RBAC impact
  • Role simulator with live input filters
  • Visual RBAC policy editor

Build the explorer. Expose the graph. Secure with insight.