Minor updates before removing auth env variables (#415)

### Motivation and Context

<!-- Thank you for your contribution to the chat-copilot repo!
Please help reviewers and future users, providing the following
information:
  1. Why is this change required?
  2. What problem does it solve?
  3. What scenario does it contribute to?
  4. If it fixes an open issue, please link to the issue here.
-->
this PR makes small changes which will be required in a follow-up PR
that removes the AAD env variables from the frontend.

### Contribution Checklist

<!-- Before submitting this PR, please make sure: -->
- [X] The code builds clean without any errors or warnings
- [X] The PR follows the [Contribution
Guidelines](https://github.com/microsoft/chat-copilot/blob/main/CONTRIBUTING.md)
and the [pre-submission formatting
script](https://github.com/microsoft/chat-copilot/blob/main/CONTRIBUTING.md#development-scripts)
raises no violations
- [X] All unit tests pass, and I have added new tests where possible
- [X] I didn't break anyone 😄

webapi/Controllers/ServiceInfoController.cs

@@ -86,8 +86,8 @@ public IActionResult GetAuthConfig()
         {
             AuthType = this._chatAuthenticationOptions.Type.ToString(),
             AadAuthority = authorityUriString,
-            AadClient = this._frontendOptions.AadClientId,
-            AadApiScope = $"api://{this._chatAuthenticationOptions.AzureAd!.ClientId}/{this._chatAuthenticationOptions.AzureAd!.Scopes}"
+            AadClientId = this._frontendOptions.AadClientId,
+            AadApiScope = $"api://{this._chatAuthenticationOptions.AzureAd!.ClientId}/{this._chatAuthenticationOptions.AzureAd!.Scopes}",
         };
 
         return this.Ok(config);

webapi/Extensions/ServiceExtensions.cs

@@ -86,7 +86,7 @@ internal static IServiceCollection AddUtilities(this IServiceCollection services
         return services.AddScoped<AskConverter>();
     }
 
-    internal static IServiceCollection AddMainetnanceServices(this IServiceCollection services)
+    internal static IServiceCollection AddMaintenanceServices(this IServiceCollection services)
     {
         // Inject migration services
         services.AddSingleton<IChatMigrationMonitor, ChatMigrationMonitor>();

webapi/Models/Response/FrontendAuthConfig.cs

@@ -25,8 +25,8 @@ public class FrontendAuthConfig
     /// <summary>
     /// Azure Active Directory client ID the frontend is to use.
     /// </summary>
-    [JsonPropertyName("aadClient")]
-    public string AadClient { get; set; } = string.Empty;
+    [JsonPropertyName("aadClientId")]
+    public string AadClientId { get; set; } = string.Empty;
 
     /// <summary>
     /// Azure Active Directory scope the frontend should request.

webapi/Program.cs

@@ -69,7 +69,7 @@ public static async Task Main(string[] args)
 
         // Add in the rest of the services.
         builder.Services
-            .AddMainetnanceServices()
+            .AddMaintenanceServices()
             .AddEndpointsApiExplorer()
             .AddSwaggerGen()
             .AddCorsPolicy(builder.Configuration)

webapp/src/App.tsx

@@ -109,7 +109,7 @@ const App: FC = () => {
             }
         }
 
-        if ((isAuthenticated || !AuthHelper.IsAuthAAD) && appState === AppState.LoadingChats) {
+        if ((isAuthenticated || !AuthHelper.isAuthAAD()) && appState === AppState.LoadingChats) {
             void Promise.all([
                 // Load all chats from memory
                 chat.loadChats().then((succeeded) => {
@@ -139,7 +139,7 @@ const App: FC = () => {
             className="app-container"
             theme={features[FeatureKeys.DarkMode].enabled ? semanticKernelDarkTheme : semanticKernelLightTheme}
         >
-            {AuthHelper.IsAuthAAD ? (
+            {AuthHelper.isAuthAAD() ? (
                 <>
                     <UnauthenticatedTemplate>
                         <div className={classes.container}>
@@ -191,7 +191,7 @@ const Chat = ({
                 <BackendProbe
                     uri={process.env.REACT_APP_BACKEND_URI as string}
                     onBackendFound={() => {
-                        if (AuthHelper.IsAuthAAD) {
+                        if (AuthHelper.isAuthAAD()) {
                             setAppState(AppState.SettingUserInfo);
                         } else {
                             setAppState(AppState.LoadingChats);

webapp/src/components/chat/ChatInput.tsx

@@ -18,6 +18,7 @@ import { RootState } from '../../redux/app/store';
 import { addAlert } from '../../redux/features/app/appSlice';
 import { editConversationInput, updateBotResponseStatus } from '../../redux/features/conversations/conversationsSlice';
 import { Alerts } from '../shared/Alerts';
+import { getErrorDetails } from '../utils/TextUtils';
 import { SpeechService } from './../../libs/services/SpeechService';
 import { updateUserIsTyping } from './../../redux/features/conversations/conversationsSlice';
 import { ChatStatus } from './ChatStatus';
@@ -97,7 +98,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ isDraggingOver, onDragLeav
 
     React.useEffect(() => {
         async function initSpeechRecognizer() {
-            const speechService = new SpeechService(process.env.REACT_APP_BACKEND_URI as string);
+            const speechService = new SpeechService();
             const response = await speechService.getSpeechTokenAsync(
                 await AuthHelper.getSKaaSAccessToken(instance, inProgress),
             );
@@ -108,7 +109,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ isDraggingOver, onDragLeav
         }
 
         initSpeechRecognizer().catch((e) => {
-            const errorDetails = e instanceof Error ? e.message : String(e);
+            const errorDetails = getErrorDetails(e);
             const errorMessage = `Unable to initialize speech recognizer. Details: ${errorDetails}`;
             dispatch(addAlert({ message: errorMessage, type: AlertType.Error }));
         });

webapp/src/components/chat/shared/EditChatName.tsx

@@ -10,6 +10,7 @@ import { addAlert } from '../../../redux/features/app/appSlice';
 import { editConversationTitle } from '../../../redux/features/conversations/conversationsSlice';
 import { Breakpoints } from '../../../styles';
 import { Checkmark20, Dismiss20 } from '../../shared/BundledIcons';
+import { getErrorDetails } from '../../utils/TextUtils';
 
 const useClasses = makeStyles({
     root: {
@@ -67,9 +68,7 @@ export const EditChatName: React.FC<IEditChatNameProps> = ({ name, chatId, exitE
 
     const handleSave = () => {
         onSaveTitleChange().catch((e: any) => {
-            const errorMessage = `Unable to retrieve chat to change title. Details: ${
-                e instanceof Error ? e.message : String(e)
-            }`;
+            const errorMessage = `Unable to retrieve chat to change title. Details: ${getErrorDetails(e)}`;
             dispatch(addAlert({ message: errorMessage, type: AlertType.Error }));
         });
     };

webapp/src/components/header/UserSettingsMenu.tsx

@@ -54,7 +54,7 @@ export const UserSettingsMenu: FC<IUserSettingsProps> = ({ setLoadingState }) =>
 
     return (
         <>
-            {AuthHelper.IsAuthAAD ? (
+            {AuthHelper.isAuthAAD() ? (
                 <Menu>
                     <MenuTrigger disableButtonEnhancement>
                         {

webapp/src/components/header/settings-dialog/SettingSection.tsx

@@ -1,5 +1,6 @@
 import { Divider, Switch, Text, makeStyles, shorthands, tokens } from '@fluentui/react-components';
 import { useCallback } from 'react';
+import { AuthHelper } from '../../../libs/auth/AuthHelper';
 import { useAppDispatch, useAppSelector } from '../../../redux/app/hooks';
 import { RootState } from '../../../redux/app/store';
 import { FeatureKeys, Setting } from '../../../redux/features/app/AppState';
@@ -56,7 +57,9 @@ export const SettingSection: React.FC<ISettingsSectionProps> = ({ setting, conte
                             <Switch
                                 label={feature.label}
                                 checked={feature.enabled}
-                                disabled={feature.inactive}
+                                disabled={
+                                    !!feature.inactive || (key === FeatureKeys.MultiUserChat && !AuthHelper.isAuthAAD())
+                                }
                                 onChange={() => {
                                     onFeatureChange(key);
                                 }}

webapp/src/components/open-api-plugins/PluginConnector.tsx

@@ -17,9 +17,10 @@ import {
 } from '@fluentui/react-components';
 import { Dismiss20Regular } from '@fluentui/react-icons';
 import { FormEvent, useState } from 'react';
+import { AuthHelper } from '../../libs/auth/AuthHelper';
 import { TokenHelper } from '../../libs/auth/TokenHelper';
 import { useAppDispatch } from '../../redux/app/hooks';
-import { AdditionalApiProperties, Plugin, PluginAuthRequirements } from '../../redux/features/plugins/PluginsState';
+import { AdditionalApiProperties, PluginAuthRequirements } from '../../redux/features/plugins/PluginsState';
 import { connectPlugin } from '../../redux/features/plugins/pluginsSlice';
 
 const useClasses = makeStyles({
@@ -54,7 +55,6 @@ interface PluginConnectorProps {
     publisher: string;
     authRequirements: PluginAuthRequirements;
     apiProperties?: AdditionalApiProperties;
-    inactive?: Plugin['inactive'];
 }
 
 export const PluginConnector: React.FC<PluginConnectorProps> = ({
@@ -63,7 +63,6 @@ export const PluginConnector: React.FC<PluginConnectorProps> = ({
     publisher,
     authRequirements,
     apiProperties,
-    inactive,
 }) => {
     const classes = useClasses();
 
@@ -121,6 +120,9 @@ export const PluginConnector: React.FC<PluginConnectorProps> = ({
         setOpen(false);
     };
 
+    const inactive = msalRequired && !AuthHelper.isAuthAAD();
+    const inactiveReason = 'Only available when using Azure AD authorization.';
+
     return (
         <Dialog
             open={open}
@@ -135,8 +137,8 @@ export const PluginConnector: React.FC<PluginConnectorProps> = ({
                     data-testid="openPluginDialogButton"
                     aria-label="Enable plugin"
                     appearance="primary"
-                    disabled={!!inactive}
-                    title={inactive}
+                    disabled={inactive}
+                    title={inactive ? inactiveReason : ''}
                 >
                     Enable
                 </Button>

webapp/src/components/open-api-plugins/cards/PluginCard.tsx

@@ -11,7 +11,7 @@ interface PluginCardProps {
 }
 
 export const PluginCard: React.FC<PluginCardProps> = ({ plugin }) => {
-    const { name, publisher, enabled, authRequirements, apiProperties, icon, description, inactive } = plugin;
+    const { name, publisher, enabled, authRequirements, apiProperties, icon, description } = plugin;
     const dispatch = useAppDispatch();
 
     const onDisconnectClick = (event: FormEvent) => {
@@ -42,7 +42,6 @@ export const PluginCard: React.FC<PluginCardProps> = ({ plugin }) => {
                         publisher={publisher}
                         authRequirements={authRequirements}
                         apiProperties={apiProperties}
-                        inactive={inactive}
                     />
                 )
             }

webapp/src/components/utils/TextUtils.tsx

@@ -92,3 +92,10 @@ export function replaceCitationLinksWithIndices(formattedMessageContent: string,
 
     return formattedMessageContent;
 }
+
+/**
+ * Gets message of error
+ */
+export function getErrorDetails(error: unknown) {
+    return error instanceof Error ? error.message : String(error);
+}

webapp/src/components/views/Login.tsx

@@ -5,6 +5,7 @@ import { Body1, Button, Image, Title3 } from '@fluentui/react-components';
 import React from 'react';
 import signInLogo from '../../ms-symbollockup_signin_light.svg';
 import { useSharedClasses } from '../../styles';
+import { getErrorDetails } from '../utils/TextUtils';
 
 export const Login: React.FC = () => {
     const { instance } = useMsal();
@@ -24,7 +25,9 @@ export const Login: React.FC = () => {
                 style={{ padding: 0 }}
                 appearance="transparent"
                 onClick={() => {
-                    instance.loginRedirect().catch(() => {});
+                    instance.loginRedirect().catch((e: unknown) => {
+                        alert(`Error signing in: ${getErrorDetails(e)}`);
+                    });
                 }}
                 data-testid="signinButton"
             >

webapp/src/index.tsx

@@ -30,7 +30,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
         const missingEnvVariables = getMissingEnvVariables();
         const validEnvFile = missingEnvVariables.length === 0;
-        const shouldUseMsal = validEnvFile && AuthHelper.IsAuthAAD;
+        const shouldUseMsal = validEnvFile && AuthHelper.isAuthAAD();
 
         let msalInstance: IPublicClientApplication | null = null;
         if (shouldUseMsal) {
@@ -58,7 +58,9 @@ document.addEventListener('DOMContentLoaded', () => {
                         {/* eslint-enable @typescript-eslint/no-non-null-assertion */}
                     </ReduxProvider>
                 ) : (
-                    <MissingEnvVariablesError missingVariables={missingEnvVariables} />
+                    <FluentProvider className="app-container" theme={semanticKernelLightTheme}>
+                        <MissingEnvVariablesError missingVariables={missingEnvVariables} />
+                    </FluentProvider>
                 )}
             </React.StrictMode>,
         );

webapp/src/libs/auth/AuthHelper.ts

@@ -109,12 +109,12 @@ const logoutAsync = (instance: IPublicClientApplication) => {
 /**
  * Determines if the app is configured to use Azure AD for authorization
  */
-const IsAuthAAD = process.env.REACT_APP_AUTH_TYPE === AuthType.AAD;
+const isAuthAAD = () => process.env.REACT_APP_AUTH_TYPE === AuthType.AAD;
 
 // SKaaS = Semantic Kernel as a Service
 // Gets token with scopes to authorize SKaaS specifically
 const getSKaaSAccessToken = async (instance: IPublicClientApplication, inProgress: InteractionStatus) => {
-    return IsAuthAAD
+    return isAuthAAD()
         ? await TokenHelper.getAccessTokenUsingMsal(inProgress, instance, Constants.msal.semanticKernelScopes)
         : '';
 };
@@ -126,5 +126,5 @@ export const AuthHelper = {
     ssoSilentRequest,
     loginAsync,
     logoutAsync,
-    IsAuthAAD,
+    isAuthAAD,
 };

webapp/src/libs/hooks/useChat.ts

@@ -51,9 +51,9 @@ export const useChat = () => {
     const { conversations } = useAppSelector((state: RootState) => state.conversations);
     const { activeUserInfo, features } = useAppSelector((state: RootState) => state.app);
 
-    const botService = new BotService(process.env.REACT_APP_BACKEND_URI as string);
-    const chatService = new ChatService(process.env.REACT_APP_BACKEND_URI as string);
-    const documentImportService = new DocumentImportService(process.env.REACT_APP_BACKEND_URI as string);
+    const botService = new BotService();
+    const chatService = new ChatService();
+    const documentImportService = new DocumentImportService();
 
     const botProfilePictures: string[] = [botIcon1, botIcon2, botIcon3, botIcon4, botIcon5];
 

webapp/src/libs/hooks/useFile.ts

@@ -14,7 +14,7 @@ export const useFile = () => {
     const { instance, inProgress } = useMsal();
 
     const chat = useChat();
-    const documentImportService = new DocumentImportService(process.env.REACT_APP_BACKEND_URI as string);
+    const documentImportService = new DocumentImportService();
 
     async function loadFile<T>(file: File, loadCallBack: (data: T) => Promise<void>): Promise<T> {
         return await new Promise((resolve, reject) => {

webapp/src/libs/hooks/useGraph.ts

@@ -18,7 +18,7 @@ export const useGraph = () => {
     const graphService = new GraphService();
 
     const loadUsers = async (userIds: string[]) => {
-        if (!AuthHelper.IsAuthAAD) {
+        if (!AuthHelper.isAuthAAD()) {
             return;
         }
 

webapp/src/libs/hooks/usePlugins.ts

@@ -13,7 +13,7 @@ import { getErrorDetails } from './useChat';
 export const usePlugins = () => {
     const dispatch = useAppDispatch();
     const { instance, inProgress } = useMsal();
-    const chatService = React.useMemo(() => new ChatService(process.env.REACT_APP_BACKEND_URI as string), []);
+    const chatService = React.useMemo(() => new ChatService(), []);
 
     const addCustomPlugin = (manifest: PluginManifest, manifestDomain: string) => {
         const newPlugin: Plugin = {

webapp/src/libs/services/BaseService.ts

@@ -12,21 +12,26 @@ interface ServiceRequest {
 
 const noResponseBodyStatusCodes = [202, 204];
 
+export const BackendServiceUrl = process.env.REACT_APP_BACKEND_URI ?? window.origin;
+
 export class BaseService {
-    // eslint-disable-next-line @typescript-eslint/space-before-function-paren
-    constructor(protected readonly serviceUrl: string) {}
+    constructor(protected readonly serviceUrl: string = BackendServiceUrl) {}
 
     protected readonly getResponseAsync = async <T>(
         request: ServiceRequest,
-        accessToken: string,
+        accessToken?: string,
         enabledPlugins?: Plugin[],
     ): Promise<T> => {
         const { commandPath, method, body, query } = request;
         const isFormData = body instanceof FormData;
 
-        const headers = new Headers({
-            Authorization: `Bearer ${accessToken}`,
-        });
+        const headers = new Headers(
+            accessToken
+                ? {
+                      Authorization: `Bearer ${accessToken}`,
+                  }
+                : undefined,
+        );
 
         if (!isFormData) {
             headers.append('Content-Type', 'application/json');

webapp/src/redux/features/app/AppState.ts

@@ -1,10 +1,27 @@
 // Copyright (c) Microsoft. All rights reserved.
 
-import { AuthHelper, DefaultActiveUserInfo } from '../../../libs/auth/AuthHelper';
+import { AuthHelper } from '../../../libs/auth/AuthHelper';
 import { AlertType } from '../../../libs/models/AlertType';
+import { IChatUser } from '../../../libs/models/ChatUser';
 import { ServiceOptions } from '../../../libs/models/ServiceOptions';
 import { TokenUsage } from '../../../libs/models/TokenUsage';
 
+// This is the default user information when authentication is set to 'None'.
+// It must match what is defined in PassthroughAuthenticationHandler.cs on the backend.
+export const DefaultChatUser: IChatUser = {
+    id: 'c05c61eb-65e4-4223-915a-fe72b0c9ece1',
+    emailAddress: 'user@contoso.com',
+    fullName: 'Default User',
+    online: true,
+    isTyping: false,
+};
+
+export const DefaultActiveUserInfo: ActiveUserInfo = {
+    id: DefaultChatUser.id,
+    email: DefaultChatUser.emailAddress,
+    username: DefaultChatUser.fullName,
+};
+
 export interface ActiveUserInfo {
     id: string;
     email: string;
@@ -86,7 +103,6 @@ export const Features = {
         enabled: false,
         label: 'Live Chat Session Sharing',
         description: 'Enable multi-user chat sessions. Not available when authorization is disabled.',
-        inactive: !AuthHelper.IsAuthAAD,
     },
     [FeatureKeys.RLHF]: {
         enabled: false,
@@ -122,7 +138,7 @@ export const Settings = [
 
 export const initialState: AppState = {
     alerts: [],
-    activeUserInfo: AuthHelper.IsAuthAAD ? undefined : DefaultActiveUserInfo,
+    activeUserInfo: AuthHelper.isAuthAAD() ? undefined : DefaultActiveUserInfo,
     tokenUsage: {},
     features: Features,
     settings: Settings,