[7.x] Improve login UI error message. (#75655)

Author: azasypkin

x-pack/plugins/security/public/authentication/login/components/login_form/login_form.test.tsx

@@ -421,9 +421,58 @@ describe('LoginForm', () => {
       expect(window.location.href).toBe(currentURL);
       expect(coreStartMock.notifications.toasts.addError).toHaveBeenCalledWith(failureReason, {
         title: 'Could not perform login.',
+        toastMessage: 'Oh no!',
       });
     });
 
+    it('shows error with message in the `body`', async () => {
+      const currentURL = `https://some-host/login?next=${encodeURIComponent(
+        '/some-base-path/app/kibana#/home?_g=()'
+      )}`;
+
+      const coreStartMock = coreMock.createStart({ basePath: '/some-base-path' });
+      coreStartMock.http.post.mockRejectedValue({
+        body: { message: 'Oh no! But with much more details!' },
+        message: 'Oh no!',
+      });
+
+      window.location.href = currentURL;
+      const wrapper = mountWithIntl(
+        <LoginForm
+          http={coreStartMock.http}
+          notifications={coreStartMock.notifications}
+          loginAssistanceMessage=""
+          selector={{
+            enabled: true,
+            providers: [
+              { type: 'basic', name: 'basic', usesLoginForm: true },
+              { type: 'saml', name: 'saml1', usesLoginForm: false },
+            ],
+          }}
+        />
+      );
+
+      expectPageMode(wrapper, PageMode.Selector);
+
+      wrapper.findWhere((node) => node.key() === 'saml1').simulate('click');
+
+      await act(async () => {
+        await nextTick();
+        wrapper.update();
+      });
+
+      expect(coreStartMock.http.post).toHaveBeenCalledTimes(1);
+      expect(coreStartMock.http.post).toHaveBeenCalledWith('/internal/security/login', {
+        body: JSON.stringify({ providerType: 'saml', providerName: 'saml1', currentURL }),
+      });
+
+      expect(window.location.href).toBe(currentURL);
+      expect(coreStartMock.notifications.toasts.addError).toHaveBeenCalledWith(
+        new Error('Oh no! But with much more details!'),
+        { title: 'Could not perform login.', toastMessage: 'Oh no!' }
+      );
+    });
+
     it('properly switches to login form', async () => {
       const currentURL = `https://some-host/login?next=${encodeURIComponent(
         '/some-base-path/app/kibana#/home?_g=()'

x-pack/plugins/security/public/authentication/login/components/login_form/login_form.tsx

@@ -451,11 +451,15 @@ export class LoginForm extends Component<Props, State> {
 
       window.location.href = location;
     } catch (err) {
-      this.props.notifications.toasts.addError(err, {
-        title: i18n.translate('xpack.security.loginPage.loginSelectorErrorMessage', {
-          defaultMessage: 'Could not perform login.',
-        }),
-      });
+      this.props.notifications.toasts.addError(
+        err?.body?.message ? new Error(err?.body?.message) : err,
+        {
+          title: i18n.translate('xpack.security.loginPage.loginSelectorErrorMessage', {
+            defaultMessage: 'Could not perform login.',
+          }),
+          toastMessage: err?.message,
+        }
+      );
 
       this.setState({ loadingState: { type: LoadingStateType.None } });
     }