Minor updates before removing auth env variables

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,