feat: get token

Author: KotaHusky

libs/lib-msal-react/src/index.ts

@@ -3,3 +3,4 @@ export * from './lib/button-login/button-login';
 export * from './lib/button-logout/button-logout';
 export * from './lib/account-context/account-context';
 export * from './lib/verify-token/verify-token';
+export * from './lib/get-token/get-token';

libs/lib-msal-react/src/lib/account-context/account-context.tsx

@@ -1,43 +1,44 @@
-import { createContext, useContext, useEffect, useState } from 'react';
-import { useMsal } from '@azure/msal-react';
+'use client'
+
+import { createContext, useEffect, useState } from 'react';
+import { useMsal, useIsAuthenticated } from '@azure/msal-react';
 
 type AccountState = {
   username: string | null;
   isLoading: boolean;
 };
 
+const AccountDefaultState: AccountState = {
+  username: null,
+  isLoading: true,
+};
+
 /**
  * Provides a React context for managing authentication using MSAL.
  * This component wraps your application and provides access to the MSAL instance and authentication state.
  * It also handles authentication and token acquisition using MSAL.
  * @see https://react.dev/learn/passing-data-deeply-with-context
  */
-export const AccountContext = createContext<AccountState>({ username: null, isLoading: true });
+const AccountContext = createContext<AccountState>(AccountDefaultState);
 
-// Create a provider component
-export const AccountProvider: React.FC<{ children: React.ReactNode }> = ({
+const AccountProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
   const { inProgress, accounts } = useMsal();
-  const [account, setAccount] = useState<AccountState>({ username: null, isLoading: true });
+  const [account, setAccount] = useState<AccountState>(AccountDefaultState);
+  const isAuthenticated = useIsAuthenticated();
 
   useEffect(() => {
-    console.log(accounts);
     if (inProgress === 'none' && accounts.length > 0) {
       setAccount({ username: accounts[0].name ?? null, isLoading: false });
     }
-  }, [inProgress, accounts]);
+  }, [inProgress, accounts, isAuthenticated]);
 
   return (
-    <AccountContext.Provider
-      value={account}
-    >
+    <AccountContext.Provider value={account}>
       {children}
     </AccountContext.Provider>
   );
 };
 
-// Create a hook to use the context
-export const useAccount = () => {
-  return useContext(AccountContext);
-};
+export { AccountContext, AccountProvider };

libs/lib-msal-react/src/lib/get-token/get-token.ts

@@ -0,0 +1,47 @@
+import { loginRequest } from "../msal-react";
+import { InteractionRequiredAuthError, PublicClientApplication, AccountInfo } from "@azure/msal-browser";
+
+export async function getToken(msalInstance: PublicClientApplication, account: AccountInfo): Promise<string | null> {
+  if (!account) {
+    throw Error("No active account! Verify a user has been signed in and setActiveAccount has been called.");
+  }
+
+  try {
+    const response = await msalInstance.acquireTokenSilent({
+      ...loginRequest,
+      account: account
+    });
+
+    console.log('response:', response)
+
+    if (!response || !response.accessToken) {
+      console.error('Failed to acquire token.');
+      return null;
+    }
+
+    return response.accessToken;
+  } catch (error) {
+    if (error instanceof InteractionRequiredAuthError) {
+      // fallback to interaction when silent call fails
+      try {
+        const response = await msalInstance.acquireTokenPopup({
+          ...loginRequest,
+          account: account
+        });
+
+        if (response === null || response.accessToken === undefined) {
+          console.error('Failed to acquire token.');
+          return null;
+        }
+
+        return response.accessToken;
+      } catch (err) {
+        console.error('Error acquiring token:', err);
+        return null;
+      }
+    } else {
+      console.error('Error acquiring token:', error);
+      return null;
+    }
+  }
+}

libs/lib-msal-react/src/lib/msal-react.tsx

@@ -28,7 +28,11 @@ const b2cPolicies = {
   authorityDomain: `${b2cAuthority}.b2clogin.com`,
 };
 
-// MSAL Configuration
+export const loginRequest = {
+  scopes: [`https://${b2cAuthority}.onmicrosoft.com/${process.env.NEXT_PUBLIC_AZURE_AD_CLIENT_ID}/ReadUser`]
+};
+
+// MSAL Configurationcc
 const msalConfig: Configuration = {
   auth: {
     clientId: process.env.NEXT_PUBLIC_AZURE_AD_CLIENT_ID || '',
@@ -53,10 +57,10 @@ const msalConfig: Configuration = {
             console.error(message);
             return;
           case LogLevel.Info:
-            console.info(message);
+            // console.info(message);
             return;
           case LogLevel.Verbose:
-            console.debug(message);
+            // console.debug(message);
             return;
           case LogLevel.Warning:
             console.warn(message);

libs/ui/src/lib/account-summary/account-summary.tsx

@@ -1,58 +1,53 @@
-import React, { useEffect, useState } from 'react';
-import { useAccount } from '@my-workspace/lib-msal-react';
-import styles from './account-summary.module.css';
+// Import necessary libraries
+import React, { useContext, useEffect, useState } from 'react';
+import axios from 'axios';
+import { useMsal } from "@azure/msal-react";
+import { AccountContext, getToken } from '@my-workspace/lib-msal-react';
+import { PublicClientApplication } from '@azure/msal-browser';
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface AccountSummaryProps {}
+/**
+ * This component displays a summary of the user's account.
+ * It uses the AccountContext to access the user's username.
+ */
+export const AccountSummary: React.FC = () => {
+  // Use the useContext hook to access the AccountContext
+  const { username, isLoading } = useContext(AccountContext);
+  const { inProgress, instance, accounts } = useMsal();
 
-export function AccountSummary(props: AccountSummaryProps) {
-  const { accessToken } = useAccount();
-  const [data, setData] = useState(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
+  // State to hold the API response
+  const [apiResponse, setApiResponse] = useState(null);
 
+  // Use the useEffect hook to call the API when the component mounts
   useEffect(() => {
-    if (!accessToken) {
-      setError('You must be logged in to view this information.');
-      return;
-    }
+    if (inProgress === 'none' && accounts.length > 0) {
+      const fetchTokenAndData = async () => {
+        const token = await getToken(instance as PublicClientApplication, accounts[0]); // Replace scopes as needed
+        if (token) {
+          axios.get('/api/hello-msal', {
+            headers: {
+              Authorization: `Bearer ${token}`
+            }
+          })
+          .then(response => setApiResponse(response.data))
+          .catch(error => console.error(error));
+        }
+      };
 
-    setLoading(true);
-    fetch('/api/hello-msal', { // Adjust the API endpoint as necessary
-      method: 'GET',
-      headers: {
-        'Authorization': `Bearer ${accessToken}`,
-        'Content-Type': 'application/json'
-      },
-    })
-    .then(response => {
-      if (!response.ok) {
-        throw new Error('Failed to fetch protected data.');
-      }
-      return response.json();
-    })
-    .then(data => {
-      setData(data);
-      setError('');
-    })
-    .catch(error => {
-      console.error("Error fetching protected data:", error);
-      setError(error.message);
-    })
-    .finally(() => setLoading(false));
-  }, [accessToken]);
+      fetchTokenAndData();
+    }
+  }, [inProgress, instance, accounts]);
 
+  // Render the component
   return (
-    <div className={styles.container}>
-      <h1>Welcome to AccountSummary!</h1>
-      {error && <p className={styles.error}>{error}</p>}
-      {loading ? (
-        <p>Loading account information...</p>
+    <div className="text-white">
+      {isLoading ? (
+        <p>Loading...</p>
+      ) : username ? (
+        <p>Welcome, {username}!</p>
       ) : (
-        data && <pre>{JSON.stringify(data, null, 2)}</pre>
+        <p>Please sign in.</p>
       )}
+      {apiResponse && <p>{apiResponse}</p>}
     </div>
   );
-}
-
-export default AccountSummary;
+};