feat: account context

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

@@ -1,3 +1,4 @@
 export * from './lib/msal-react';
 export * from './lib/button-login/button-login';
 export * from './lib/button-logout/button-logout';
+export * from './lib/account-context/account-context';

libs/lib-msal-react/src/lib/account-context/account-context.module.css

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

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

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import AccountContext from './account-context';
+
+describe('AccountContext', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<AccountContext />);
+    expect(baseElement).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,42 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import { useMsal } from '@azure/msal-react';
+
+type AccountState = {
+  username: string | null;
+  loading: boolean;
+};
+
+/**
+ * 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, loading: true });
+
+// Create a provider component
+export const AccountProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const { inProgress, accounts } = useMsal();
+  const [account, setAccount] = useState<AccountState>({ username: null, loading: true });
+
+  useEffect(() => {
+    if (inProgress === 'none' && accounts.length > 0) {
+      setAccount({ username: accounts[0].username, loading: false });
+    }
+  }, [inProgress, accounts]);
+
+  return (
+    <AccountContext.Provider
+      value={account}
+    >
+      {children}
+    </AccountContext.Provider>
+  );
+};
+
+// Create a hook to use the context
+export const useAccount = () => {
+  return useContext(AccountContext);
+};

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

@@ -1,10 +1,10 @@
 'use client';
 
-import React from 'react';
 import { Configuration, PublicClientApplication } from '@azure/msal-browser';
 import { MsalProvider } from '@azure/msal-react';
+import { AccountProvider } from './account-context/account-context';
 
-// Define your MSAL configuration
+// MSAL Configuration
 const msalConfig: Configuration = {
   auth: {
     clientId: process.env.NEXT_PUBLIC_AZURE_AD_CLIENT_ID || '',
@@ -25,7 +25,7 @@ try {
   // Initialize MSAL instance with your configuration
   msalInstance = new PublicClientApplication(msalConfig);
 } catch (error) {
-  console.error("Failed to initialize MSAL", error);
+  console.error('Failed to initialize MSAL', error);
   // Handle error here, e.g. by showing an error message to the user
 }
 
@@ -39,7 +39,9 @@ export const MsalProviderComponent: React.FC<{ children: React.ReactNode }> = ({
 
   return (
     <div id="msal-provider">
-      <MsalProvider instance={msalInstance}>{children}</MsalProvider>
+      <MsalProvider instance={msalInstance}>
+        <AccountProvider>{children}</AccountProvider>
+      </MsalProvider>
     </div>
   );
-};
+};

libs/ui/src/lib/header/header.tsx

@@ -1,19 +1,13 @@
-import { AuthenticatedTemplate, useMsal } from "@azure/msal-react";
-import { useEffect, useState } from "react";
+import { AuthenticatedTemplate } from "@azure/msal-react";
+import { useContext } from "react";
 import styles from './header.module.css';
+import { AccountContext } from '@my-workspace/lib-msal-react'
 
 /* eslint-disable-next-line */
 export interface HeaderProps {}
 
 export function Header(props: HeaderProps) {
-  const { accounts } = useMsal();
-  const [username, setUsername] = useState("");
-
-  useEffect(() => {
-    if (accounts.length > 0) {
-      setUsername(accounts[0].username);
-    }
-  }, [accounts]);
+  const { username } = useContext(AccountContext); // Use AccountContext
 
   return (
     <div className={styles['container']}>