feat: role based auth using graphback/keycloak-authz (#412)

Author: darahayes

client/src/components/TaskList.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Task } from './Task';
-import { IonList } from '@ionic/react';
+import { IonList, IonToast } from '@ionic/react';
 import { useOfflineMutation } from 'react-offix-hooks';
 import { ITask } from '../declarations';
 import { Empty } from './Empty';
@@ -13,12 +13,17 @@ export const TaskList: React.FC<any> = ({ tasks }) => {
   const [updateTaskMutation] = useOfflineMutation(updateTask, mutationOptions.updateTask);
   const [deleteTaskMutation] = useOfflineMutation(deleteTask, mutationOptions.deleteTask);
 
+  const [ showToast, setShowToast ] = useState<boolean>(false);
+  const [ errorMessage, setErrorMessage ] = useState<string>('');
+
   const handleError = (error: any) => {
     if(error.offline) {
       error.watchOfflineChange();
     }
     if (error.graphQLErrors) {
       console.log(error.graphQLErrors);
+      setErrorMessage(error.message);
+      setShowToast(true);
     }
   }
 
@@ -54,6 +59,14 @@ export const TaskList: React.FC<any> = ({ tasks }) => {
           })
         }
       </IonList>
+      <IonToast
+        isOpen={showToast}
+        onDidDismiss={() => setShowToast(false)}
+        message={errorMessage}
+        position="top"
+        color="danger"
+        duration={2000}
+      />
     </>
   );
 

server/integrations/keycloak/initKeycloak.js

@@ -97,6 +97,7 @@ async function prepareKeycloak() {
     console.log('creating client roles')
     for (let roleName of clientRoleNames) {
       await createClientRole(BEARER_CLIENT, roleName)
+      await createClientRole(PUBLIC_CLIENT, roleName)
     }
 
     console.log('creating realm roles')
@@ -107,7 +108,8 @@ async function prepareKeycloak() {
     // get the actual role objects from keycloak after creating them
     // need to get the ids that were created on them
     realmRoles = await getRealmRoles()
-    clientRoles = await getClientRoles(BEARER_CLIENT)
+    bearerClientRoles = await getClientRoles(BEARER_CLIENT)
+    publicClientRoles = await getClientRoles(PUBLIC_CLIENT)
 
     for (let user of users) {
       // Create a new user
@@ -116,7 +118,8 @@ async function prepareKeycloak() {
 
       // Assign roles to the user
       await assignRealmRolesToUser(user, userIdUrl)
-      await assignClientRolesToUser(user, BEARER_CLIENT, userIdUrl)
+      await assignClientRolesToUser(user, BEARER_CLIENT, bearerClientRoles, userIdUrl)
+      await assignClientRolesToUser(user, PUBLIC_CLIENT, publicClientRoles, userIdUrl)
     }
 
     const publicInstallation = await getClientInstallation(PUBLIC_CLIENT)
@@ -162,14 +165,14 @@ async function assignRealmRolesToUser(user, userIdUrl) {
   }
 }
 
-async function assignClientRolesToUser(user, client, userIdUrl) {
+async function assignClientRolesToUser(user, client, clientRoles, userIdUrl) {
   for (let roleToAssign of user.clientRoles) {
-    console.log(`assigning client role ${roleToAssign} from client ${PUBLIC_CLIENT_NAME} on user ${user.name}`)
+    console.log(`assigning client role ${roleToAssign} from client ${client.clientId} on user ${user.name}`)
     const selectedClientRole = clientRoles.find(clientRole => clientRole.name === roleToAssign)
     if (selectedClientRole) {
       await assignClientRoleToUser(userIdUrl, client, selectedClientRole)
     } else {
-      console.error(`client role ${roleToAssign} does not exist on client ${PUBLIC_CLIENT_NAME}`)
+      console.error(`client role ${roleToAssign} does not exist on client ${client.clientId}`)
     }
   }
 }

server/package.json

@@ -35,6 +35,7 @@
     "express-session": "1.17.0",
     "graphql-tag": "2.10.3",
     "keycloak-connect": "9.0.2",
-    "keycloak-connect-graphql": "0.4.0"
+    "keycloak-connect-graphql": "0.4.0",
+    "@graphback/keycloak-authz": "0.12.0"
   }
 }

server/src/AMQCrudService.ts

@@ -0,0 +1,10 @@
+import { GraphbackOperationType } from '@graphback/core'
+import { KeycloakCrudService } from '@graphback/keycloak-authz'
+
+
+export class AMQCRUDService extends KeycloakCrudService {
+    protected subscriptionTopicMapping(triggerType: GraphbackOperationType, objectName: string) {
+        // Support AMQ topic creation format
+        return `graphql/${objectName}_${triggerType}`
+    }
+}

server/src/config/auth.ts

@@ -0,0 +1,10 @@
+import { CrudServicesAuthConfig } from "@graphback/keycloak-authz"
+
+export const authConfig: CrudServicesAuthConfig = {
+  Task: {
+    create: { roles: [] },
+    read: { roles: [] },
+    update: { roles: ['admin'] },
+    delete: { roles: ['admin'] },
+  }
+}

server/src/createContext.ts

@@ -9,7 +9,10 @@ import { Config } from './config/config';
 import { ApolloServer } from "apollo-server-express";
 import { Express } from "express";
 import { buildKeycloakApolloConfig } from './auth';
-import { createOffixMongoCRUDRuntimeContext } from './createContext';
+import { createKeycloakRuntimeContext } from '@graphback/keycloak-authz';
+import { authConfig } from './config/auth';
+import { OffixMongoDBDataProvider } from '@graphback/runtime-mongo';
+import { AMQCRUDService } from './AMQCrudService'
 
 /**
  * Creates Apollo server
@@ -20,7 +23,16 @@ export const createApolloServer = async function (app: Express, config: Config)
 
     const typeDefs = loadSchemaFiles(join(__dirname, '/schema/')).join('\n');
     const schema = buildSchema(typeDefs, { assumeValid: true });
-    const context = createOffixMongoCRUDRuntimeContext(models, schema, db, pubSub);
+
+    const context = createKeycloakRuntimeContext({ 
+        models,
+        schema,
+        db,
+        pubSub,
+        authConfig,
+        dataProvider: OffixMongoDBDataProvider,
+        crudService: AMQCRUDService
+    })
 
     let apolloConfig = {
         typeDefs: typeDefs,