From a8b2cef91c66be928009e1ab356217fcbba851a2 Mon Sep 17 00:00:00 2001
From: Tyler James Leonhardt <me@tylerleonhardt.com>
Date: Mon, 12 Aug 2024 11:05:04 -0700
Subject: [PATCH] Adopt error template and some minor tweaks to error rendering
 (#225426)

NOTE: For this to get lit up, this PR needs to go in in MSAL-node: https://github.com/AzureAD/microsoft-authentication-library-for-js/pull/7247
---
 .../src/node/authProvider.ts                      | 15 +++++++++++----
 .../src/node/loopbackTemplate.ts                  |  8 +++++---
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/extensions/microsoft-authentication/src/node/authProvider.ts b/extensions/microsoft-authentication/src/node/authProvider.ts
index 0175b2981b8..18a0a4ed72d 100644
--- a/extensions/microsoft-authentication/src/node/authProvider.ts
+++ b/extensions/microsoft-authentication/src/node/authProvider.ts
@@ -2,7 +2,7 @@
  *  Copyright (c) Microsoft Corporation. All rights reserved.
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
-import { AccountInfo, AuthenticationResult } from '@azure/msal-node';
+import { AccountInfo, AuthenticationResult, ServerError } from '@azure/msal-node';
 import { AuthenticationGetSessionOptions, AuthenticationProvider, AuthenticationProviderAuthenticationSessionsChangeEvent, AuthenticationSession, AuthenticationSessionAccountInformation, CancellationError, env, EventEmitter, ExtensionContext, l10n, LogOutputChannel, Memento, SecretStorage, Uri, window } from 'vscode';
 import { Environment } from '@azure/ms-rest-azure-env';
 import { CachedPublicClientApplicationManager } from './publicClientCache';
@@ -132,10 +132,10 @@ export class MsalAuthProvider implements AuthenticationProvider {
 			result = await cachedPca.acquireTokenInteractive({
 				openBrowser: async (url: string) => { await env.openExternal(Uri.parse(url)); },
 				scopes: modifiedScopes,
+				// The logic for rendering one or the other of these templates is in the
+				// template itself, so we pass the same one for both.
 				successTemplate: loopbackTemplate,
-				// TODO: This is currently not working (the loopback client closes before this is rendered).
-				// There is an issue opened on MSAL Node to fix this. We should workaround this by re-implementing the Loopback client.
-				// errorTemplate: loopbackTemplate
+				errorTemplate: loopbackTemplate
 			});
 			this.setupRefresh(cachedPca, result, scopes);
 		} catch (e) {
@@ -154,6 +154,13 @@ export class MsalAuthProvider implements AuthenticationProvider {
 					throw e;
 				}
 			}
+			// This error comes from the backend and is likely not due to the user's machine
+			// failing to open a port or something local that would require us to try the
+			// URL handler loopback client.
+			if (e instanceof ServerError) {
+				this._telemetryReporter.sendLoginFailedEvent();
+				throw e;
+			}
 			const loopbackClient = new UriHandlerLoopbackClient(this._uriHandler, redirectUri);
 			try {
 				result = await cachedPca.acquireTokenInteractive({
diff --git a/extensions/microsoft-authentication/src/node/loopbackTemplate.ts b/extensions/microsoft-authentication/src/node/loopbackTemplate.ts
index df41b86d17c..340e2ebbfdf 100644
--- a/extensions/microsoft-authentication/src/node/loopbackTemplate.ts
+++ b/extensions/microsoft-authentication/src/node/loopbackTemplate.ts
@@ -63,6 +63,7 @@ export const loopbackTemplate = `
 
 		.error-message {
 			display: none;
+			max-width: 800px;
 			font-weight: 300;
 			font-size: 1.3rem;
 		}
@@ -123,11 +124,12 @@ export const loopbackTemplate = `
 		</div>
 	</div>
 	<script>
-		var search = window.location.search;
-		var error = (/[?&^]error=([^&]+)/.exec(search) || [])[1];
+		var search = new URLSearchParams(window.location.search);
+		var error = search.get('error');
 		if (error) {
+			const description = search.get('error_description');
 			document.querySelector('.error-text')
-				.textContent = decodeURIComponent(error);
+				.textContent = error + ' - ' + description;
 			document.querySelector('body')
 				.classList.add('error');
 		}