diff --git a/public/app/plugins/datasource/azuremonitor/components/ConfigEditor/MonitorConfig.tsx b/public/app/plugins/datasource/azuremonitor/components/ConfigEditor/MonitorConfig.tsx
index ff869479f9c..8a2dd691284 100644
--- a/public/app/plugins/datasource/azuremonitor/components/ConfigEditor/MonitorConfig.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/ConfigEditor/MonitorConfig.tsx
@@ -1,4 +1,5 @@
 import React, { useMemo, useState } from 'react';
+import { useEffectOnce } from 'react-use';
 
 import { SelectableValue } from '@grafana/data';
 import { config } from '@grafana/runtime';
@@ -48,6 +49,13 @@ export const MonitorConfig = (props: Props) => {
   const onSubscriptionChange = (subscriptionId?: string) =>
     updateOptions((options) => ({ ...options, jsonData: { ...options.jsonData, subscriptionId } }));
 
+  // The auth type needs to be set on the first load of the data source
+  useEffectOnce(() => {
+    if (!options.jsonData.authType) {
+      onCredentialsChange(credentials);
+    }
+  });
+
   return (
     <>
       <AzureCredentialsForm
diff --git a/public/app/plugins/datasource/mssql/azureauth/AzureAuthSettings.tsx b/public/app/plugins/datasource/mssql/azureauth/AzureAuthSettings.tsx
index 28b4421a389..a47198c7548 100644
--- a/public/app/plugins/datasource/mssql/azureauth/AzureAuthSettings.tsx
+++ b/public/app/plugins/datasource/mssql/azureauth/AzureAuthSettings.tsx
@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { useEffectOnce } from 'react-use';
 
 import { config } from '@grafana/runtime';
 import { HttpSettingsBaseProps } from '@grafana/ui/src/components/DataSourceSettings/types';
@@ -19,6 +20,13 @@ export const AzureAuthSettings = (props: HttpSettingsBaseProps) => {
     onChange(updateCredentials(dsSettings, config, credentials));
   };
 
+  // The auth type needs to be set on the first load of the data source
+  useEffectOnce(() => {
+    if (!dsSettings.jsonData.authType) {
+      onCredentialsChange(credentials);
+    }
+  });
+
   return (
     <AzureCredentialsForm
       managedIdentityEnabled={managedIdentityEnabled}
diff --git a/public/app/plugins/datasource/prometheus/configuration/AzureAuthSettings.tsx b/public/app/plugins/datasource/prometheus/configuration/AzureAuthSettings.tsx
index 3a5f45db77a..7327aa6996a 100644
--- a/public/app/plugins/datasource/prometheus/configuration/AzureAuthSettings.tsx
+++ b/public/app/plugins/datasource/prometheus/configuration/AzureAuthSettings.tsx
@@ -1,5 +1,6 @@
 import { cx } from '@emotion/css';
 import React, { FormEvent, useMemo, useState } from 'react';
+import { useEffectOnce } from 'react-use';
 
 import { config } from '@grafana/runtime';
 import { InlineField, InlineFieldRow, InlineSwitch, Input } from '@grafana/ui';
@@ -45,6 +46,13 @@ export const AzureAuthSettings = (props: HttpSettingsBaseProps) => {
 
   const labelWidth = prometheusConfigOverhaulAuth ? 24 : 26;
 
+  // The auth type needs to be set on the first load of the data source
+  useEffectOnce(() => {
+    if (!dataSourceConfig.jsonData.authType) {
+      onCredentialsChange(credentials);
+    }
+  });
+
   return (
     <>
       <h6>Azure authentication</h6>