split roles guard into separate component

backend/src/auth/auth.controller.ts

@@ -1,9 +1,11 @@
-import { Controller, Get } from '@nestjs/common';
+import { Request, Controller, Get } from '@nestjs/common';
+import { Role } from './interface';
+import { Roles } from './roles.decorator';
 
 @Controller('auth')
 export class AuthController {
-  @Roles('coordinator')
-  @Get(Role.COORDINATOR)
+  @Roles(Role.COORDINATOR)
+  @Get('roles')
   async getRole(@Request() req) {
     try {
       return { roles: req.roles };
@@ -12,7 +14,7 @@ export class AuthController {
     }
   }
 
-  @Get('authenticated')
+  @Get()
   getAuth() {
     return { authenticated: true };
   }

backend/src/auth/auth.guard.ts

@@ -5,7 +5,7 @@ import {
   UnauthorizedException,
 } from '@nestjs/common';
 import { Reflector } from '@nestjs/core';
-import jwt from 'jsonwebtoken';
+import jwt, { JwtPayload } from 'jsonwebtoken';
 
 import { AUTH_CLIENT, AUTH_SERVER, AUTH_REALM } from './const';
 import { Token } from './interface';
@@ -80,7 +80,7 @@ export class AuthGuard implements CanActivate {
   }
 
   setRequestRoles(payload: JwtPayload, request: Request): void {
-    if (payload.resource_access?.[AUTH_CLIENT].roles) {
+    if (payload.resource_access?.[AUTH_CLIENT]) {
       request['roles'] = payload.resource_access?.[AUTH_CLIENT].roles;
     } else {
       request['roles'] = [];

backend/src/swagger.ts

@@ -1,7 +1,7 @@
 import { INestApplication } from '@nestjs/common';
 import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger';
 import { AppModule } from './app.module';
-import { PrivateModule } from './private/private.module';
+import { AuthModule } from './auth/auth.module';
 
 export const Documentation = (app: INestApplication) => {
   const options = new DocumentBuilder()
@@ -12,7 +12,7 @@ export const Documentation = (app: INestApplication) => {
     .build();
 
   const baseDocument = SwaggerModule.createDocument(app, options, {
-    include: [AppModule, PrivateModule],
+    include: [AppModule, AuthModule],
   });
 
   SwaggerModule.setup('api', app, baseDocument, {

frontend/src/hooks/useGetHealth.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { getAppHealth, getAuth } from '../services/health';
+import { getAppHealth, getAuth, getRoles } from '../services/health';
 
 interface Health {
   status?: string;
@@ -12,7 +12,7 @@ export const useGetHealth = () => {
   const [appHealth, setAppHealth] = useState<Health>();
   const [dbHealth, setDBHealth] = useState<Health>();
   const [authRoutes, setAuthRoutes] = useState<boolean>(false);
-
+  const [roles, setRoles] = useState<string[]>([]);
   useEffect(() => {
     (async () => {
       try {
@@ -41,11 +41,19 @@ export const useGetHealth = () => {
       } catch (e) {
         console.log(e);
       }
+      try {
+        const { data } = await getRoles();
+
+        setRoles(data?.roles);
+      } catch (e) {
+        console.log(e);
+      }
     })();
   }, []);
 
   return {
     appHealth,
+    roles,
     dbHealth,
     authRoutes,
   };

frontend/src/pages/AppHealth.tsx

@@ -4,7 +4,7 @@ import { logout } from '../services/keycloak';
 
 //TODO remove - this is just for development
 const AppHealth = () => {
-  const { appHealth, dbHealth, authRoutes } = useGetHealth();
+  const { appHealth, dbHealth, authRoutes, roles } = useGetHealth();
 
   return (
     <div className="flex flex-col justify-around h-auto">
@@ -52,6 +52,28 @@ const AppHealth = () => {
             </p>
           </div>
         )}
+
+        <h3 className="mt-4 text-xl font-bold tracking-tight text-gray-900 sm:text-lg">
+          Roles:
+        </h3>
+
+        <div>
+          {roles.length > 0 ? (
+            roles.map((itm, index) => (
+              <p key={index}>
+                role:{' '}
+                <span className="text-base font-semibold text-indigo-600">
+                  {itm}
+                </span>
+              </p>
+            ))
+          ) : (
+            <p>
+              role:{' '}
+              <span className="text-base font-semibold text-indigo-600">n/a</span>
+            </p>
+          )}
+        </div>
       </div>
       <div>
         <Button

frontend/src/services/health.tsx

@@ -8,3 +8,7 @@ export const getAppHealth = async (): Promise<AxiosResponse> => {
 export const getAuth = async (): Promise<AxiosResponse> => {
   return await AxiosPrivate.get('/auth');
 };
+
+export const getRoles = async (): Promise<AxiosResponse> => {
+  return await AxiosPrivate.get('/auth/roles');
+};