fix: Display error w/o token on auth failure

extensions/azurePublish/src/components/api.tsx

@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 /* eslint-disable no-underscore-dangle */
 import axios from 'axios';
+import formatMessage from 'format-message';
 import { SubscriptionClient } from '@azure/arm-subscriptions';
 import { Subscription } from '@azure/arm-subscriptions/esm/models';
 import { ResourceManagementClient } from '@azure/arm-resources';
@@ -27,6 +28,11 @@ import * as Images from './images';
 
 const logger = debug('composer:extension:azureProvision');
 
+/**
+ * Retrieves the list of subscriptions from Azure
+ * @param token The authentication token
+ * @returns The list of subscriptions or throws
+ */
 export const getSubscriptions = async (token: string): Promise<Array<Subscription>> => {
   const tokenCredentials = new TokenCredentials(token);
   try {
@@ -37,15 +43,22 @@ export const getSubscriptions = async (token: string): Promise<Array<Subscriptio
         status: AzureAPIStatus.ERROR,
         message: subscriptionsResult._response.bodyAsText,
       });
-      return [];
+      throw new Error(subscriptionsResult._response.bodyAsText);
     }
     return subscriptionsResult._response.parsedBody;
   } catch (err) {
+    let message = JSON.stringify(err, Object.getOwnPropertyNames(err));
+    if (err?.code === 12 && err?.message?.match(/Bearer/gi)) {
+      message = formatMessage(
+        'There was an authentication problem retrieving subscriptions. Verify your login session has not expired and you have permission to list subscriptions in this account.'
+      );
+    }
+
     logger({
       status: AzureAPIStatus.ERROR,
-      message: JSON.stringify(err, Object.getOwnPropertyNames(err)),
+      message,
     });
-    return [];
+    throw new Error(message);
   }
 };
 

extensions/azurePublish/src/components/azureProvisionDialog.tsx

@@ -224,6 +224,7 @@ export const AzureProvisionDialog: React.FC = () => {
   const extensionState = { ...defaultExtensionState, ...getItem(profileName) };
 
   const [subscriptions, setSubscriptions] = useState<Subscription[] | undefined>();
+  const [subscriptionsErrorMessage, setSubscriptionsErrorMessage] = useState<string>();
   const [deployLocations, setDeployLocations] = useState<DeployLocation[]>([]);
   const [luisLocations, setLuisLocations] = useState<DeployLocation[]>([]);
 
@@ -356,11 +357,24 @@ export const AzureProvisionDialog: React.FC = () => {
 
   useEffect(() => {
     if (token) {
-      getSubscriptions(token).then((data) => {
-        if (isMounted.current) {
-          setSubscriptions(data);
-        }
-      });
+      setSubscriptionsErrorMessage(undefined);
+      getSubscriptions(token)
+        .then((data) => {
+          if (isMounted.current) {
+            setSubscriptions(data);
+            if (data.length === 0) {
+              setSubscriptionsErrorMessage(
+                formatMessage(
+                  'Your subscription list is empty, please add your subscription, or login with another account.'
+                )
+              );
+            }
+          }
+        })
+        .catch((err) => {
+          setSubscriptionsErrorMessage(err.message);
+        });
+
       getResources();
     }
   }, [token]);
@@ -657,10 +671,12 @@ export const AzureProvisionDialog: React.FC = () => {
             )}
           </form>
         )}
-        {choice.key === 'create' && loginErrorMsg !== '' && <div style={{ marginTop: '10px' }}> {loginErrorMsg} </div>}
-        {choice.key === 'create' && currentUser && subscriptionOption?.length < 1 && (
-          <div style={{ marginTop: '10px' }}>
-            Your subscription list is empty, please add your subscription, or login with another account.
+        {choice.key === 'create' && loginErrorMsg !== '' && (
+          <div style={{ marginTop: '10px', color: FluentTheme.semanticColors.errorText }}> {loginErrorMsg} </div>
+        )}
+        {choice.key === 'create' && currentUser && subscriptionsErrorMessage && (
+          <div style={{ marginTop: '10px', color: FluentTheme.semanticColors.errorText }}>
+            {subscriptionsErrorMessage}
           </div>
         )}
       </Suspense>