Added changes

Author: Chase Crawford

.DS_Store

@@ -19,6 +19,7 @@
     "@types/react-router": "^5.1.11",
     "@types/react-router-dom": "^5.1.7",
     "ionicons": "^5.4.0",
+    "jsonwebtoken": "^8.5.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router": "^5.2.0",

src/.DS_Store

@@ -22,7 +22,7 @@ const App: React.FC = () => {
 
   const authProvider = useAuthentication();
   const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
-
+  const [accessToken, setAccessToken] = useState<string>("");
 
   useEffect(()=>{
     handleLogin();

src/.vs/slnx.sqlite

@@ -24,8 +24,8 @@ export const useAuthentication = (): IAuthContext => {
     let uri = isPlatform('capacitor') ? 'msauth.{iOS MAC redirect Url}://auth' : 'http://localhost:3000';
     console.log(uri);
     (await MsalCap.setOptions({
-      clientId: 'Client ID',
-      authority: `https://login.microsoftonline.com/{Tenant ID}`,
+      clientId: '6b51f8a2-d03d-4d86-b753-87b45b89d794',
+      authority: `https://login.microsoftonline.com/29967363-a86a-4ea6-8f76-29aa44ec6f27`,
       redirectUri: uri,
       scopes: [
         'user.read'

src/.vs/slnx.sqlite-journal

@@ -1,8 +1,69 @@
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import { useContext, useState, useEffect } from 'react';
 import ExploreContainer from '../components/ExploreContainer';
+import { AuthContext } from '../context/auth';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton, IonItemDivider, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonList, IonItem, IonLabel } from '@ionic/react';
 import './Home.css';
+import { AuthenticationResult } from '@azure/msal-common';
+
+
+
+interface IRoles {
+  key: string;
+  values: string[];
+
+}
 
 const Home: React.FC = () => {
+
+  const { acquireAccessTokenForUser, acquireAuthenticationResult } = useContext(AuthContext);
+  const [ authenticationResults, setAuthenticationResults] = useState<AuthenticationResult>();
+  const [ accessToken, setAccessToken] = useState<string>("");
+
+  useEffect(()=>{
+    handleAuthResults();
+  },[])
+
+  const handleAuthResults = async() =>{
+    try {
+      let results = await acquireAuthenticationResult();
+
+      if(results) {
+        setAuthenticationResults(results as AuthenticationResult);
+        console.log(results);
+      }
+    }
+    catch(error) {
+      console.log(error);
+    }
+  }
+  const handleAccessToken = async() => {
+    try {
+      let token = await acquireAccessTokenForUser([
+        'https://func-auth-a.azurewebsites.net/user_impersonation'
+      ]);
+
+      
+
+      if(token){
+        setAccessToken(token as string);
+        console.log(token);
+      }
+    }
+    catch(error) {
+      console.log(error);
+    }
+  }
+
+  const getProperty = <T, K extends keyof T>(o?: T, propertyName?: K): T[K] => {
+
+    if(o && propertyName) {
+      return o[propertyName];
+    } else {
+      throw Error
+    }
+     // o[propertyName] is of type T[K]
+  }
+
   return (
     <IonPage>
       <IonHeader>
@@ -16,7 +77,51 @@ const Home: React.FC = () => {
             <IonTitle size="large">Blank</IonTitle>
           </IonToolbar>
         </IonHeader>
-        <ExploreContainer />
+        <IonCard>
+          <IonCardHeader>
+            <IonCardTitle>Auth Results</IonCardTitle>
+            <IonCardSubtitle class="ion-text-nowrap">Tenant: {authenticationResults?.tenantId}</IonCardSubtitle>
+            <IonCardSubtitle class="ion-text-nowrap">Unique Id: {authenticationResults?.uniqueId}</IonCardSubtitle>
+            <IonCardSubtitle class="ion-text-nowrap">Username: {authenticationResults?.account?.username}</IonCardSubtitle>
+            {/* <IonCardSubtitle>{authenticationResults.}</IonCardSubtitle> */}
+          </IonCardHeader>
+          <IonCardContent>
+            <IonList>
+
+              <IonItem>
+                <IonLabel>{ (Object.entries(authenticationResults?.idTokenClaims ?? {}).filter(([x,y]) => x === "roles").values()) }</IonLabel>
+              </IonItem>
+              
+              {
+                Object.entries(authenticationResults?.account?.idTokenClaims ?? {}).map(([key,value])=> {
+                  if(typeof(value)=== typeof(Object)) {
+                    Object.entries(value).map(([key,value])=>{
+                      return (
+                        <IonItem>
+                          <IonLabel>{typeof(value)}: {key} - {value}</IonLabel>
+                        </IonItem>
+                      )
+                    })
+                  } else {
+                    return (
+                      <IonItem>
+                        <IonLabel>{typeof(value)}: {key} - {value}</IonLabel>
+                      </IonItem>
+                    )
+                  }
+                })
+              }
+            </IonList>
+
+          </IonCardContent>
+        </IonCard>
+        <div>
+          <p>{authenticationResults?.account?.username}</p>
+          <IonItemDivider/>
+          <IonButton onClick={handleAccessToken} expand="block">Get Token</IonButton>
+          <IonItemDivider/>
+          <p><small>{accessToken}</small></p>
+        </div>
       </IonContent>
     </IonPage>
   );

src/msal-capacitor-plugin-demo/package-lock.json

@@ -22,7 +22,6 @@ public class MsalPlugin: CAPPlugin {
 
     // This will act as a constructor for initializing
     public override func load() {
-        
         self.dateFormatter.dateFormat = "YY-MM-dd'T'HH:mm:ss"
     }