microsoft/semantic-kernel
1
0
Fork 0
mirror of https://github.com/microsoft/semantic-kernel.git synced 2026-10-12 02:19:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Copilot Chat: Use MSAL active account instead of accounts[0] (#1318)

Browse Source 
### Motivation and Context
We are currently using `accounts[0]` to access the user's MSAL account
information and retrieve tokens in the Copilot Chat frontend. This works
fine if only one account is logged in. However, if the user is signed in
with multiple accounts, this list is not guaranteed to be in the same
order each time (per MSAL documentation
[here](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/accounts.md#notes:~:text=getAllAccounts()%20is%20not%20ordered%20and%20is%20not%20guaranteed%20to%20be%20in%20the%20same%20order%20across%20multiple%20calls)).
We need to ensure we are using the currently active account for
consistent behavior.

### Description
- Set the active account once the user has logged in using
`handleRedirectPromise`
- Use `instance.getActiveAccount` everywhere we need to access the
account
This commit is contained in:
Gina Triolo
2023-06-06 00:00:29 +00:00
committed by GitHub
parent 371f54b3f8
commit 35e094868e
7 changed files with 23 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
samples/apps/copilot-chat-app/webapp/src/App.tsx
+2 -4
View File
@@ -3,7 +3,6 @@
import {
AuthenticatedTemplate,
UnauthenticatedTemplate,
useAccount,
useIsAuthenticated,
useMsal,
} from '@azure/msal-react';
@@ -68,15 +67,14 @@ const App: FC = () => {
const { alerts } = useAppSelector((state: RootState) => state.app);
const dispatch = useAppDispatch();
const { instance, accounts, inProgress } = useMsal();
const account = useAccount(accounts[0] || {});
const { instance, inProgress } = useMsal();
const account = instance.getActiveAccount();
const isAuthenticated = useIsAuthenticated();
const chat = useChat();
useEffect(() => {
if (isAuthenticated && account && appState === AppState.LoadingChats) {
instance.setActiveAccount(account);
// Load all chats from memory
async function loadChats() {
samples/apps/copilot-chat-app/webapp/src/components/chat/ChatInput.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
// Copyright (c) Microsoft. All rights reserved.
import { useAccount, useMsal } from '@azure/msal-react';
import { useMsal } from '@azure/msal-react';
import { Button, Spinner, Textarea, makeStyles, shorthands, tokens } from '@fluentui/react-components';
import { AttachRegular, MicRegular, SendRegular } from '@fluentui/react-icons';
import debug from 'debug';
@@ -64,8 +64,8 @@ interface ChatInputProps {
export const ChatInput: React.FC<ChatInputProps> = (props) => {
const { isTyping, onSubmit } = props;
const classes = useClasses();
const { instance, accounts, inProgress } = useMsal();
const account = useAccount(accounts[0] || {});
const { instance, inProgress } = useMsal();
const account = instance.getActiveAccount();
const dispatch = useAppDispatch();
const [value, setValue] = React.useState('');
const [recognizer, setRecognizer] = React.useState<speechSdk.SpeechRecognizer>();
samples/apps/copilot-chat-app/webapp/src/components/chat/ChatRoom.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
// Copyright (c) Microsoft. All rights reserved.
import { useAccount, useMsal } from '@azure/msal-react';
import { useMsal } from '@azure/msal-react';
import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
import debug from 'debug';
import React from 'react';
@@ -56,8 +56,8 @@ export const ChatRoom: React.FC = () => {
const messages = conversations[selectedId].messages;
const classes = useClasses();
const { accounts } = useMsal();
const account = useAccount(accounts[0] || {});
const { instance } = useMsal();
const account = instance.getActiveAccount();
const dispatch = useAppDispatch();
const scrollViewTargetRef = React.useRef<HTMLDivElement>(null);
samples/apps/copilot-chat-app/webapp/src/components/chat/ChatStatus.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
// Copyright (c) Microsoft. All rights reserved.
import { useAccount, useMsal } from '@azure/msal-react';
import { useMsal } from '@azure/msal-react';
import { Label, makeStyles } from '@fluentui/react-components';
import React from 'react';
import { Constants } from '../../Constants';
@@ -19,8 +19,8 @@ const useClasses = makeStyles({
export const ChatStatus: React.FC = () => {
const classes = useClasses();
const { accounts } = useMsal();
const account = useAccount(accounts[0] || {});
const { instance } = useMsal();
const account = instance.getActiveAccount();
const { conversations, selectedId } = useAppSelector((state: RootState) => state.conversations);
const { users } = conversations[selectedId];
const [typingUserList, setTypingUserList] = React.useState<IChatUser[]>([]);
samples/apps/copilot-chat-app/webapp/src/index.tsx
+6
View File
@@ -33,6 +33,12 @@ document.addEventListener('DOMContentLoaded', async () => {
var msalInstance: IPublicClientApplication | null = null;
if (validEnvFile) {
msalInstance = new PublicClientApplication(AuthHelper.msalConfig);
msalInstance.handleRedirectPromise().then((response) => {
if (response) {
msalInstance?.setActiveAccount(response?.account);
}
});
}
root.render(
samples/apps/copilot-chat-app/webapp/src/libs/auth/AuthHelper.ts
+3 -3
View File
@@ -54,14 +54,14 @@ const logoutRequest: EndSessionRequest = {
};
const ssoSilentRequest = async (msalInstance: IPublicClientApplication) => {
await msalInstance.ssoSilent({ account: msalInstance.getAllAccounts()[0], scopes: Constants.msal.semanticKernelScopes });
await msalInstance.ssoSilent({ account: msalInstance.getActiveAccount() || undefined, scopes: Constants.msal.semanticKernelScopes });
};
const loginAsync = async (instance: IPublicClientApplication) => {
if (Constants.msal.method === 'redirect') {
await instance.loginRedirect({ account: instance.getAllAccounts()[0], scopes: Constants.msal.semanticKernelScopes });
await instance.loginRedirect({ scopes: Constants.msal.semanticKernelScopes });
} else {
await instance.loginPopup({ account: instance.getAllAccounts()[0], scopes: Constants.msal.semanticKernelScopes });
await instance.loginPopup({ scopes: Constants.msal.semanticKernelScopes });
}
};
samples/apps/copilot-chat-app/webapp/src/libs/useChat.ts
+3 -3
View File
@@ -1,6 +1,6 @@
// Copyright (c) Microsoft. All rights reserved.
import { useAccount, useMsal } from '@azure/msal-react';
import { useMsal } from '@azure/msal-react';
import { Constants } from '../Constants';
import { useAppDispatch, useAppSelector } from '../redux/app/hooks';
import { RootState } from '../redux/app/store';
@@ -33,8 +33,8 @@ import { AuthHeaderTags } from '../redux/features/plugins/PluginsState';
export const useChat = () => {
const dispatch = useAppDispatch();
const { instance, accounts, inProgress } = useMsal();
const account = useAccount(accounts[0] || {});
const { instance, inProgress } = useMsal();
const account = instance.getActiveAccount();
const { conversations } = useAppSelector((state: RootState) => state.conversations);
const botService = new BotService(process.env.REACT_APP_BACKEND_URI as string);