switching to auth0 (#103)

api/src/app.module.ts

@@ -32,17 +32,17 @@ import { join } from 'path';
     }),
     HealthModule,
     LogModule,
-    MsGraphModule.registerAsync({
+    // MsGraphModule.registerAsync({
-      inject: [ConfigService],
+    //   inject: [ConfigService],
-      imports: [ConfigModule],
+    //   imports: [ConfigModule],
-      useFactory: async (configService: ConfigService) => {
+    //   useFactory: async (configService: ConfigService) => {
-        return {
+    //     return {
-          clientId: configService.get<string>('clientId'),
+    //       clientId: configService.get<string>('clientId'),
-          clientSecret: configService.get<string>('clientSecret'),
+    //       clientSecret: configService.get<string>('clientSecret'),
-          tenantId: configService.get<string>('tenantId')
+    //       tenantId: configService.get<string>('tenantId')
-        }
+    //     }
-      }
+    //   }
-    }),
+    // }),
     PilotModule,
     ServeStaticModule.forRoot({
       rootPath: join(__dirname, '../..', 'client', 'dist')

api/src/interfaces/customJwtPayload.interface.ts

@@ -1,5 +1,5 @@
 import { JwtPayload } from "jwt-decode";
 
 export interface CustomJwtPayload extends JwtPayload {
-  roles: string[];
+  permissions: string[];
 }

api/src/log/log.interceptor.ts

@@ -2,7 +2,6 @@ import { CallHandler, ExecutionContext, NestInterceptor, UnauthorizedException }
 import { Observable, map } from 'rxjs';
 import { LogEntity } from './log.entity';
 import { jwtDecode } from 'jwt-decode';
-import { CustomJwtPayload } from 'src/interfaces/customJwtPayload.interface';
 import { IS_PUBLIC_KEY } from '@noahspan/noahspan-modules';
 import { Reflector } from '@nestjs/core';
 
@@ -38,9 +37,10 @@ export class LogInterceptor implements NestInterceptor {
         if (req.headers.authorization) {
           const authHeader = req.headers.authorization;
           const token = authHeader && authHeader.split(' ')[1];
-          const jwtPayload: CustomJwtPayload = jwtDecode(token);
+          const jwtPayload = jwtDecode(token);
+          const rolesKeyName = Object.keys(jwtPayload).find((key) => key.includes('roles'));
 
-          if (jwtPayload.roles.includes('Flying.Read')) {
+          if (jwtPayload[rolesKeyName].includes('Flying.Read')) {
             const logs = limitData(data);
 
             return logs;

api/src/pilot/pilot.interceptor.ts

@@ -1,7 +1,6 @@
 import { CallHandler, ExecutionContext, NestInterceptor } from '@nestjs/common';
 import { jwtDecode } from 'jwt-decode';
 import { Observable, map } from 'rxjs';
-import { CustomJwtPayload } from 'src/interfaces/customJwtPayload.interface';
 import { PilotEntity } from './pilot.entity';
 import { IS_PUBLIC_KEY } from '@noahspan/noahspan-modules';
 import { Reflector } from '@nestjs/core';
@@ -30,9 +29,10 @@ export class PilotInterceptor implements NestInterceptor {
         if (req.headers.authorization) {
           const authHeader = req.headers.authorization;
           const token = authHeader && authHeader.split(' ')[1];
-          const jwtPayload: CustomJwtPayload = jwtDecode(token);
+          const jwtPayload = jwtDecode(token);
+          const rolesKeyName = Object.keys(jwtPayload).find((key) => key.includes('roles'));
 
-          if (jwtPayload.roles.includes('Flying.Read')) {
+          if (jwtPayload[rolesKeyName].includes('Flying.Read')) {
             const pilots = limitData(data)
 
             return pilots;

client/package.json

@@ -14,20 +14,18 @@
     "@fortawesome/fontawesome-svg-core": "^7.1.0",
     "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@fortawesome/react-fontawesome": "^3.1.0",
-    "@heroui/react": "^3.0.0-beta.2",
+    "@heroui/react": "^2.8.5",
-    "@heroui/styles": "^3.0.0-beta.2",
     "@noahspan/noahspan-components": "^2.0.0-alpha-14",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.13",
     "@tanstack/react-table": "^8.21.3",
     "axios": "^1.7.2",
-    "daisyui": "^5.1.10",
     "dotenv": "^16.4.7",
     "framer-motion": "^12.23.24",
     "leaflet": "^1.9.4",
     "oidc-spa": "^7.2.4",
-    "react": "^19.2.0",
+    "react": "^19.1.1",
-    "react-dom": "^19.2.0",
+    "react-dom": "^19.1.1",
     "react-hook-form": "^7.51.4",
     "react-leaflet": "^4",
     "react-leaflet-kml": "^2.1.2",

client/src/App.tsx

@@ -3,20 +3,21 @@ import Flights from './components/flights/Flights';
 import Logbook from './components/logbook/Logbook';
 import Pilots from './components/pilots/Pilots';
 import SiteNav from './components/siteNav/SiteNav';
+import { HeroUIProvider } from '@heroui/react';
 import { useHref, useNavigate } from 'react-router-dom';
 
 const App = () => {
   const navigate = useNavigate();
 
   return (
-    <>
+    <HeroUIProvider navigate={navigate} useHref={useHref}>
       <SiteNav />
       <Routes>
         <Route path='/' element={<Flights />} />
         <Route path="/logbook" element={<Logbook />} />
         <Route path="/pilots" element={<Pilots />} />
       </Routes>
-    </>
+    </HeroUIProvider>
   );
 };
 

client/src/auth/oidcConfig.ts

@@ -1,11 +1,13 @@
 import { createReactOidc } from "oidc-spa/react";
 
 export const { OidcProvider, useOidc, getOidc } = createReactOidc(async () => ({
-  issuerUri: `https://login.microsoftonline.com/${import.meta.env.VITE_TENANT_ID}/v2.0`,
+  issuerUri: import.meta.env.VITE_ISSUER_URI,
   clientId: import.meta.env.VITE_CLIENT_ID,
   homeUrl: import.meta.env.VITE_BASE_URL,
-  scopes: ['email', 'openid', 'profile', `api://${import.meta.env.VITE_CLIENT_ID}/user_impersonation`],
   autoLogin: false,
   postLoginRedirectUrl: '/',
-  noIframe: true
+  noIframe: true,
+  extraQueryParams: {
+    audience: "api://flying-test-api"
+  }
 }));

client/src/components/logbookCard/LogbookCard.tsx

@@ -1,4 +1,4 @@
-import { Accordion, AccordionItem, Card, CardContent, CardHeader } from '@heroui/react'
+import { Accordion, AccordionItem, Card, CardBody, CardHeader } from '@heroui/react'
 import { LogbookCardProps } from "./LogbookCardProps.interface";
 import TrackMap from "../trackMap/TrackMap";
 
@@ -15,7 +15,7 @@ const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps
               <CardHeader>
                 <h2 className='font-bold text-2xl'>{formattedDate}</h2>
               </CardHeader>
-              <CardContent>    
+              <CardBody>    
                 {mode === 'flights' && log.tracks && log.tracks.length > 0 &&
                   <div className='mb-5'>
                     <TrackMap
@@ -25,8 +25,8 @@ const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps
                     />
                   </div>
                 }
-                <Accordion variant='surface'>
+                <Accordion variant='bordered'>
-                  <AccordionItem key='1'>
+                  <AccordionItem key='1' title='Details'>
                     <div className='grid grid-cols-12 gap-3 mr-[30%] ml-[30%] mt-4 mb-4'>
                       <div className='col-span-6 font-bold'>
                         <span>Aircraft Make and Model</span>
@@ -66,7 +66,7 @@ const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps
                   </AccordionItem>
                 </Accordion>
 
-              </CardContent>
+              </CardBody>
             </Card>
           </div>
         )

client/src/components/logbookDrawer/LogbookDrawer.tsx

@@ -102,35 +102,36 @@ const LogbookDrawer = ({ onOpenClose }: LogbookDrawerProps) => {
                 </div>
               )}
               <Tabs 
+                color='default'
+                fullWidth={true}
                 onSelectionChange={onSelectedKeyChanged}
                 selectedKey={activeTab as string}
+                variant='solid'
               >
-                <Tabs.ListContainer>
+                <Tab
-                  <Tabs.List>
+                  key='time'
-                    <Tabs.Tab
+                  title={
-                      id='time'
+                    <div className="flex items-center space-x-2">
-                    >
                       <FontAwesomeIcon icon={faClock} />
-                      Time
+                      <span>Time</span>
-                      <Tabs.Indicator />
+                    </div>
-                    </Tabs.Tab>
+                  }
-                    {logbookContext.state.formMode !== FormMode.ADD &&
+                >
-                      <Tabs.Tab
-                        id='tracks'
-                      >
-                        <FontAwesomeIcon icon={faMapLocationDot} />
-                        Tracks
-                        <Tabs.Indicator />
-                      </Tabs.Tab>
-                    }
-                  </Tabs.List>
-                </Tabs.ListContainer>
-                <Tabs.Panel id='time'>
                   <LogForm />
-                </Tabs.Panel>
+                </Tab>
-                <Tabs.Panel id='tracks'>
+                {logbookContext.state.formMode !== FormMode.ADD &&
-                  <TracksForm />
+                  <Tab
-                </Tabs.Panel>
+                    key='tracks'
+                    title={
+                      <div className="flex items-center space-x-2">
+                        <FontAwesomeIcon icon={faMapLocationDot} />
+                        <span>Tracks</span>
+                      </div>
+                    }
+                  >
+                    <TracksForm />
+                  </Tab>
+                }
               </Tabs>
             </DrawerBody>
             {activeTab !== 'tracks' &&
@@ -138,24 +139,24 @@ const LogbookDrawer = ({ onOpenClose }: LogbookDrawerProps) => {
                 <div className='grid grid-cols-12 gap-3'>
                   <div className='col-span-12 justify-self-end self-center'>
                     <Button
-                      isDisabled={
+                      disabled={
                         logbookContext.state.isFormDisabled && logbookContext.state.formMode.toString() !== FormMode.VIEW
                           ? logbookContext.state.isFormDisabled
                           : false
                       }
+                      startContent={<FontAwesomeIcon icon={faXmark} />}
                       onPress={onCancel}
                     >
-                      <FontAwesomeIcon icon={faXmark} />
                       {logbookContext.state.formMode.toString() !== FormMode.VIEW ? 'Cancel' : 'Close'}
                     </Button>
                     {logbookContext.state.formMode.toString() !== FormMode.VIEW && (
                       <Button
                         className='ml-[10px]'
-                        isDisabled={logbookContext.state.isFormDisabled}
+                        color='primary'
+                        disabled={logbookContext.state.isFormDisabled}
+                        startContent={<FontAwesomeIcon icon={faSave} />}
                         type="submit"
-                        variant='primary'
                       >
-                        <FontAwesomeIcon icon={faSave} />
                         Save
                       </Button>
                     )}

client/src/components/pilots/Pilots.tsx

@@ -10,7 +10,7 @@ import { UserRole } from '../../enums/userRole';
 import httpClient from '../../httpClient/httpClient'
 import { ScreenSize } from '../../enums/screenSize';
 import { useBreakpoints } from '../../hooks/useBreakpoints/UseBreakpoints';
-import { Alert, Button, Dropdown, Table, TableHeader, TableBody, TableColumn, TableRow, TableCell } from '@heroui/react'
+import { Alert, Button, Dropdown, DropdownItem, DropdownSection, Table, TableHeader, TableBody, TableColumn, TableRow, TableCell, DropdownTrigger, DropdownMenu } from '@heroui/react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEllipsisVertical, faPen, faEye, faTrash, faPlus } from '@fortawesome/free-solid-svg-icons'
 
@@ -133,40 +133,38 @@ const Pilots: React.FC<unknown> = () => {
       case 'actions': {
         return (
           <Dropdown>
-            <Dropdown.Trigger>
+            <DropdownTrigger>
-              <Button isIconOnly size='lg'>
+              <Button isIconOnly variant='light' size='lg'>
                 <FontAwesomeIcon icon={faEllipsisVertical} />
               </Button>
-            </Dropdown.Trigger>
+            </DropdownTrigger>
-            <Dropdown.Popover>
+            <DropdownMenu>
-              <Dropdown.Menu>
+              <DropdownSection showDivider>
-                <Dropdown.Section>
+                <DropdownItem 
-                  <Dropdown.Item 
+                  key='edit'
-                    key='edit'
+                  onPress={() => onOpenClosePilotForm(FormMode.EDIT, pilot.id)}
-                    onPress={() => onOpenClosePilotForm(FormMode.EDIT, pilot.id)}
+                  startContent={<FontAwesomeIcon icon={faPen} />}
+                >
+                  Edit
+                </DropdownItem>
+                <DropdownItem 
+                  key='view'
+                  onPress={() => onOpenClosePilotForm(FormMode.VIEW, pilot.id)}
+                  startContent={<FontAwesomeIcon icon={faEye} />}  
+                >
+                  View
+                </DropdownItem>
+              </DropdownSection>
+                <DropdownSection>
+                  <DropdownItem 
+                    key='Delete'
+                    onPress={() => onDeletePilot(pilot.id)}
+                    startContent={<FontAwesomeIcon icon={faTrash} />}
                   >
-                    <FontAwesomeIcon icon={faPen} />
+                    Delete
-                    Edit
+                  </DropdownItem>
-                  </Dropdown.Item>
+                </DropdownSection>
-                  <Dropdown.Item 
+            </DropdownMenu>
-                    key='view'
-                    onPress={() => onOpenClosePilotForm(FormMode.VIEW, pilot.id)}
-                  >
-                    <FontAwesomeIcon icon={faEye} />
-                    View
-                  </Dropdown.Item>
-                </Dropdown.Section>
-                  <Dropdown.Section>
-                    <Dropdown.Item 
-                      key='Delete'
-                      onPress={() => onDeletePilot(pilot.id)}
-                    >
-                      <FontAwesomeIcon icon={faTrash} />
-                      Delete
-                    </Dropdown.Item>
-                  </Dropdown.Section>
-              </Dropdown.Menu>
-            </Dropdown.Popover>
           </Dropdown>
         )
       }

client/src/components/tracksForm/TracksForm.tsx

@@ -120,7 +120,7 @@ const TracksForm = () => {
           return (
             <>
               <div className='col-span-10'>
-                <Input disabled={state.isDisabled} key={index} type='text' value={filename}/>
+                <Input isDisabled={state.isDisabled} key={index} type='text' value={filename}/>
               </div>
               <div className='col-span-2'>
                 <Button isDisabled={state.isDisabled} key={index} isIconOnly onPress={() => onDeleteTrack(track.id, filename, index)}><FontAwesomeIcon icon={faTrash} /></Button>

client/src/globals.css

@@ -1,9 +0,0 @@
-@import "tailwindcss";
-@import "@heroui/styles";
-@plugin "@tailwindcss/typography";
-
-
-
-
-
-

client/src/hooks/userRole/UseUserRole.tsx

@@ -8,7 +8,8 @@ export const useUserRole = () => {
 
   useEffect(() => {
     if (isUserLoggedIn && decodedIdToken) {
-      const idTokenRoles: string[] = decodedIdToken!.roles as string[];
+      const rolesKeyName: string | undefined = Object.keys(decodedIdToken).find((key) => key.includes('roles'));
+      const idTokenRoles: string[] = decodedIdToken[rolesKeyName!] as string[];
 
       let newUserRole: string | undefined;
 

client/src/main.tsx

@@ -5,7 +5,7 @@ import AppContextProvider from './context/appContext/AppContextProvider.tsx';
 import LogbookContextProvider from './context/logbookContext/LogbookContextProvider.tsx'
 import { BrowserRouter } from 'react-router-dom';
 import { OidcProvider } from './auth/oidcConfig.ts';
-import './globals.css';
+import './styles.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <OidcProvider>

client/src/styles.css

@@ -0,0 +1,15 @@
+@import "tailwindcss";
+@plugin './hero.ts';
+/* Note: You may need to change the path to fit your project structure */
+@source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
+@custom-variant dark (&:is(.dark *));
+@plugin "@tailwindcss/typography";
+
+@theme inline {
+  --color-primary: #000000;
+}
+
+
+
+
+

client/src/vite-env.d.ts

@@ -3,6 +3,7 @@
 interface ImportMetaEnv {
   readonly VITE_BASE_URL: string;
   readonly VITE_CLIENT_ID: string;
+  readonly VITE_ISSUER_URI: string;
   readonly VITE_TENANT_ID: string;
 }