api/package.json

@@ -28,7 +28,7 @@
     "@nestjs/core": "^10.0.0",
     "@nestjs/passport": "^10.0.3",
     "@nestjs/platform-express": "^10.0.0",
-    "@noahspan/noahspan-modules": "^0.3.4",
+    "@noahspan/noahspan-modules": "^0.3.5",
     "@schematics/angular": "^17.3.7",
     "dotenv": "^16.4.5",
     "reflect-metadata": "0.1.13",

api/src/app.controller.ts

@@ -21,6 +21,7 @@ export class AppController {
     @Query() query: any
   ): Promise<{ key: string; enabled: boolean }[]> {
     try {
+      console.log(query);
       const featureFlagKeys: string[] =
         query.keys && query.keys.toString().includes(';')
           ? query.keys.split(';')
@@ -46,7 +47,8 @@ export class AppController {
   async getUserProfile(@Headers() headers: any) {
     try {
       const graphToken: string = await this.msGraphService.getMsGraphAuth(
-        headers.authorization.replace('Bearer ', '')
+        headers.authorization.replace('Bearer ', ''),
+        ['user.read']
       );
       const client: MsGraphClient =
         await this.msGraphService.getMsGraphClientDelegated(graphToken);
@@ -64,17 +66,10 @@ export class AppController {
     @Query('search') search: any
   ): Promise<Person[]> {
     try {
-      const graphToken: string = await this.msGraphService.getMsGraphAuth(
-        headers.authorization.replace('Bearer ', '')
-      );
-      const client: MsGraphClient =
-        await this.msGraphService.getMsGraphClientDelegated(graphToken);
-      const results: any = await client
-        .api(`me/people/?$search=${search}`)
-        .get();
-      const personResults: Person[] = results.values ? results.values : [];
+      const personSearchResults: Person[] =
+        await getPersonSearshResults(search);
 
-      return personResults;
+      return personSearchResults;
     } catch (error) {
       return error;
     }

app/src/App.tsx

@@ -32,6 +32,7 @@ const App: React.FC<unknown> = () => {
         const response: AxiosResponse = await httpClient.get(
           `api/featureFlags?keys=${featureFlagKeys}&label=${import.meta.env.MODE}`
         );
+        console.log(response.data);
         const featureFlags: { key: string; enabled: boolean }[] = response.data;
 
         if (featureFlags.length > 0) {

app/src/components/pilotForm/PilotForm.tsx

@@ -14,18 +14,18 @@ import {
 } from '@noahspan/noahspan-components';
 import PilotFormCertificates from '../pilotFormCertificates/PilotFormCertificates';
 import PilotFormEndorsements from '../pilotFormEndorsements/PilotFormEndorsements';
-import { Person } from '@microsoft/microsoft-graph-types';
+// import { Person } from '@microsoft/microsoft-graph-types';
 import { AxiosInstance, AxiosResponse } from 'axios';
 import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
-import { useAccount } from '@azure/msal-react';
+import { useAccessToken } from '../../hooks/accessToken/UseAcessToken';
 
 const PilotForm: React.FC<unknown> = () => {
   const httpClient: AxiosInstance = useHttpClient();
-  const accountInfo = useAccount();
   const [open, setOpen] = useState<number>(0);
-  const [peoplePickerResults, setPeoplePickerResults] = useState<Person[]>([]);
+  const [peoplePickerResults, setPeoplePickerResults] = useState<any[]>([]);
   const [isPeoplePickerLoading, setIsPeoplePickerLoading] =
     useState<boolean>(false);
+  const { getAccessToken } = useAccessToken();
   const handleOpen = (value: number) => {
     setOpen(open === value ? 0 : value);
   };
@@ -39,21 +39,32 @@ const PilotForm: React.FC<unknown> = () => {
   const handlePeoplePickerOnChange = async (
     event: React.ChangeEvent<HTMLInputElement>
   ) => {
+    setIsPeoplePickerLoading(true);
+
+    try {
       const searchString: string = event.target.value;
+      const accessToken: string = await getAccessToken();
       const response: AxiosResponse = await httpClient.get(
         `api/personSearch?search=${searchString}`,
         {
           headers: {
-          Authorization: `Bearer ${accountInfo?.idToken}`
+            Authorization: accessToken
           }
         }
       );
+      console.log(response);
+      setPeoplePickerResults(response.data);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsPeoplePickerLoading(false);
+    }
   };
 
   return (
     <FormProvider {...methods}>
       <form className="m-10" onSubmit={handleSubmit(onSubmit)}>
-        {/* <Accordion
+        <Accordion
           open={open === 1}
           icon={open === 1 ? <ChevronDownIcon /> : <ChevronUpIcon />}
         >
@@ -64,7 +75,7 @@ const PilotForm: React.FC<unknown> = () => {
                 <Controller
                   name="name"
                   control={control}
-                  render={({ field }) => (
+                  render={() => (
                     <PeoplePicker
                       results={peoplePickerResults}
                       inputProps={{
@@ -129,7 +140,7 @@ const PilotForm: React.FC<unknown> = () => {
               </div>
             </div>
           </AccordionBody>
-        </Accordion> */}
+        </Accordion>
         <Accordion
           open={open === 2}
           icon={open === 2 ? <ChevronDownIcon /> : <ChevronUpIcon />}

app/src/hooks/accessToken/UseAcessToken.tsx

@@ -0,0 +1,32 @@
+import {
+  AuthenticationResult,
+  InteractionRequiredAuthError
+} from '@azure/msal-browser';
+import { useMsal } from '@azure/msal-react';
+
+export const useAccessToken = () => {
+  const { accounts, instance } = useMsal();
+  const getAccessToken = async () => {
+    const tokenRequest = {
+      account: accounts[0],
+      scopes: [`api://${import.meta.env.VITE_CLIENT_ID}/user_impersonation`]
+    };
+
+    try {
+      const response: AuthenticationResult =
+        await instance.acquireTokenSilent(tokenRequest);
+      console.log(response.accessToken);
+      return `Bearer ${response.accessToken}`;
+    } catch (error) {
+      if (error instanceof InteractionRequiredAuthError) {
+        await instance.acquireTokenRedirect(tokenRequest);
+      }
+
+      throw error;
+    }
+  };
+
+  return {
+    getAccessToken
+  };
+};

package-lock.json

@@ -38,7 +38,7 @@
         "@nestjs/core": "^10.0.0",
         "@nestjs/passport": "^10.0.3",
         "@nestjs/platform-express": "^10.0.0",
-        "@noahspan/noahspan-modules": "^0.3.4",
+        "@noahspan/noahspan-modules": "^0.3.5",
         "@schematics/angular": "^17.3.7",
         "dotenv": "^16.4.5",
         "reflect-metadata": "0.1.13",
@@ -3419,9 +3419,9 @@
       }
     },
     "node_modules/@noahspan/noahspan-modules": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@noahspan/noahspan-modules/-/noahspan-modules-0.3.4.tgz",
-      "integrity": "sha512-bmcMshrfODrZCo+zTw8Ojn9FzjhPz6yYepSgPTniF4i0XEeZDdgAZdNRbe2yRtC+RedLt6Hx+HGQfKMMcPkqNA==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@noahspan/noahspan-modules/-/noahspan-modules-0.3.5.tgz",
+      "integrity": "sha512-VUCEtJcFTcrVyROMDpP8a90LFez5VPzo//0pUdHlpV7KqIDPRPpp7z/RXkXoUBYM0g06kS2CD5t3ZtzyIewBNg==",
       "dependencies": {
         "@azure/app-configuration": "^1.6.0",
         "@azure/identity": "^4.2.0",