MSAL 2.0 checkpoint

2025-12-20 09:20:16 +00:00 · 2020-12-28 18:48:19 -06:00
parent 13dbcb6453
commit 12a44fdd42
10 changed files with 2103 additions and 2141 deletions
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -16,7 +16,7 @@ body {
  height: 100%;

  :focus {
-        .focus()
+    .focus();
  }
 }

@@ -59,7 +59,7 @@ body {
    right: 14px;
    border-width: 0 9px 9px;
    border-style: solid;
-        border-color: #FFF rgba(0, 0, 0, 0);
+    border-color: #fff rgba(0, 0, 0, 0);
    display: block;
    width: 0;
  }
@@ -88,7 +88,6 @@ body {
      height: 100%;
      width: 100%;

-
      .urlContainer {
        margin-left: @DefaultSpace;

@@ -179,7 +178,8 @@ body {
            .active();
          }

-                    &:focus .urlTokenCopyTooltiptext, &:focus .urlTokenCopyTooltiptext {
+          &:focus .urlTokenCopyTooltiptext,
+          &:focus .urlTokenCopyTooltiptext {
            .tooltipVisible();
          }

@@ -217,7 +217,7 @@ body {

        .shareLink {
          width: 300px;
-                    background-color: #FFFFFF;
+          background-color: #ffffff;
          border: 1px solid @BaseMedium;
          overflow: hidden;
          text-overflow: ellipsis;
@@ -722,7 +722,8 @@ stored-procedure-tab {
  @ToggleHeight: 30px;
  @ToggleWidth: 180px;

-    .results-container, .errors-container {
+  .results-container,
+  .errors-container {
    padding: @MediumSpace 0px 0px @MediumSpace;
    height: 100%;
    .flex-display();
@@ -934,19 +935,19 @@ menuQuickStart {
 .content {
  display: inline-block;
  width: 100%;
-    transition: all .4s ease-in-out;
-    -ms-transition: all .4s ease-in-out;
-    -webkit-transition: all .4s ease-in-out;
-    -moz-transition: all .4s ease-in-out;
+  transition: all 0.4s ease-in-out;
+  -ms-transition: all 0.4s ease-in-out;
+  -webkit-transition: all 0.4s ease-in-out;
+  -moz-transition: all 0.4s ease-in-out;
  height: 100vh;
 }

 .mini {
  width: 0%;
  float: left;
-    transition: all .4s ease-in-out;
-    -webkit-transition: all .4s ease-in-out;
-    -moz-transition: all .4s ease-in-out;
+  transition: all 0.4s ease-in-out;
+  -webkit-transition: all 0.4s ease-in-out;
+  -moz-transition: all 0.4s ease-in-out;
  height: 100vh;
  background-color: white;
 }
@@ -1097,7 +1098,7 @@ menuQuickStart {
 }

 #tbodycontent > tr > td {
-    border-bottom: 1px solid #CCCCCC;
+  border-bottom: 1px solid #cccccc;
  border-top: none;
  padding: 6px;
 }
@@ -1205,7 +1206,7 @@ menuQuickStart {

 .gridRowSelected:hover {
  cursor: default;
-    .hover()
+  .hover();
 }

 .gridRowHighlighted {
@@ -1240,7 +1241,7 @@ menuQuickStart {
  border-top: 1px solid #eee;
  margin-left: -17px;
  width: 100%;
-    color: 1px solid #53575B;
+  color: 1px solid #53575b;
 }

 .partitioning-btn {
@@ -1308,7 +1309,7 @@ menuQuickStart {

 .collid-white {
  width: 100%;
-    border: solid 1px #DDD;
+  border: solid 1px #ddd;
 }

 .plusimg-but {
@@ -1631,7 +1632,6 @@ p {
  margin-left: -32px;
 }

-
 /* Variant of paddingspan3 without the margins */

 .contextual-pane .paddingspan3b {
@@ -1644,7 +1644,7 @@ p {
 }

 .contextual-pane hr {
-    border: 1px solid #53575B;
+  border: 1px solid #53575b;
  margin-right: 20px;
 }

@@ -1818,11 +1818,11 @@ label {

 .datalist-arrow:focus:after,
 .datalist-arrow:active:after {
-    background: #1EBBEE;
+  background: #1ebbee;
 }

 input::-webkit-calendar-picker-indicator::after {
-    content: '\276F';
+  content: "\276F";
  right: 0;
  top: -8%;
  display: block;
@@ -1836,7 +1836,7 @@ input::-webkit-calendar-picker-indicator::after {
 }

 .datalist-arrow:after:hover {
-    content: '\276F';
+  content: "\276F";
  position: absolute;
  right: 1px;
  top: 6%;
@@ -1848,7 +1848,7 @@ input::-webkit-calendar-picker-indicator::after {
  color: #fff;
  text-align: center;
  pointer-events: none;
-    background-color: #1EBBEE;
+  background-color: #1ebbee;
 }

 .Introline3 {
@@ -1912,7 +1912,7 @@ input::-webkit-calendar-picker-indicator::after {

 .nav-tabs-margin {
  padding-top: 8px;
-    background-color: #F2F2F2;
+  background-color: #f2f2f2;
 }

 .navTabHeight {
@@ -1978,7 +1978,7 @@ input::-webkit-calendar-picker-indicator::after {
 .atags {
  color: @AccentMediumHigh;
  font-weight: 400;
-    cursor: pointer
+  cursor: pointer;
 }

 .qsmenuicons {
@@ -2218,7 +2218,7 @@ a:link {
 .documentsGridHeaderContainer {
  padding-left: 5px;
  width: 100%;
-    border-bottom: 1px solid #CCCCCC;
+  border-bottom: 1px solid #cccccc;
 }

 .documentsGridHeaderContainer > table {
@@ -2234,7 +2234,7 @@ a:link {
    position: sticky;
    top: 0;
    background-color: #fff !important;
-        border-bottom: 1px solid #CCCCCC !important;
+    border-bottom: 1px solid #cccccc !important;
  }
 }

@@ -2383,7 +2383,7 @@ a:link {
  color: #393939;
 }

-.tab [type=radio] {
+.tab [type="radio"] {
  display: none;
 }

@@ -2395,40 +2395,40 @@ a:link {
  padding: @MediumSpace 0px;
 }

-.tab [type=radio]:checked~label {
+.tab [type="radio"]:checked ~ label {
  border: 1px solid #0072c6;
  background-color: @AccentMediumHigh;
  color: white;
  z-index: 2;
 }

-.tab [type=radio]:checked~label:hover {
+.tab [type="radio"]:checked ~ label:hover {
  border: 1px solid @AccentMediumHigh;
  background-color: @AccentMediumHigh;
  color: white;
  z-index: 2;
 }

-.tab [type=radio]:checked~label:active {
+.tab [type="radio"]:checked ~ label:active {
  border: 1px solid #0072c6;
  background-color: #0072c6;
  color: white;
  z-index: 2;
 }

-.tab [type=radio]:checked~label~.tabcontent {
+.tab [type="radio"]:checked ~ label ~ .tabcontent {
  z-index: 1;
  display: initial;
 }

-.tab [type=radio]:not(:checked)~label:hover {
+.tab [type="radio"]:not(:checked) ~ label:hover {
  border: 1px solid #969696;
  background-color: #969696;
  color: white;
  cursor: pointer;
 }

-.tab [type=radio]:not(:checked)~label~.tabcontent {
+.tab [type="radio"]:not(:checked) ~ label ~ .tabcontent {
  display: none;
 }

@@ -2732,7 +2732,7 @@ a:link {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
-            flex-grow: 1
+      flex-grow: 1;
    }

    .tabIconSection {
@@ -2822,17 +2822,17 @@ a:link {
 }

 .tabCommandDisabled {
-    color: #CCCCCC;
+  color: #cccccc;
  cursor: default;
-    background-color: #FFFFFF;
+  background-color: #ffffff;
 }

 .tabCommandDisabled:active {
-    border: 1px solid #FFFFFF;
+  border: 1px solid #ffffff;
 }

 .tabCommandDisabled:hover {
-    background-color: #FFFFFF;
+  background-color: #ffffff;
 }

 #explorerNotificationConsole {
@@ -2940,13 +2940,13 @@ settings-pane {
 }

 .linkDarkBackground {
-    color: @AccentExtraHigh
+  color: @AccentExtraHigh;
 }

 .linkDarkBackground:hover,
 .linkDarkBackground:active,
 .linkDarkBackground:focus {
-    color: @AccentHigh
+  color: @AccentHigh;
 }

 .library-add-button {
@@ -2983,7 +2983,7 @@ settings-pane {
  }

  .enableAnalyticalStorageRadioLabel {
-        padding: 0px
+    padding: 0px;
  }
 }

@@ -2993,18 +2993,18 @@ settings-pane {
 }

 .button.enabled {
-    background: #FFF;
+  background: #fff;
  border-radius: 2px;
  color: #323130;
  padding: 3px 20px;
-    border: 1px solid #8A8886;
+  border: 1px solid #8a8886;
 }

 .button.disabled {
-    background: #F3F2F1;
-    border: 0px solid #8A8886;
+  background: #f3f2f1;
+  border: 0px solid #8a8886;
  border-radius: 2px;
-    color: #A19F9D;
+  color: #a19f9d;
  padding: 3px 20px;
 }

@@ -3017,11 +3017,11 @@ settings-pane {
 }

 .warningErrorContent a {
-    color: @AccentMediumHigh
+  color: @AccentMediumHigh;
 }

 .infoBoxContent a {
-    color: @AccentMediumHigh
+  color: @AccentMediumHigh;
 }

 .collapsibleSection :hover {
--- a/package-lock.json
+++ b/package-lock.json
@@ -15328,6 +15328,15 @@
        "tinyqueue": "^1.1.0"
      }
    },
+    "match-sorter": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.0.2.tgz",
+      "integrity": "sha512-SDRLNlWof9GnAUEyhKP0O5525MMGXUGt+ep4MrrqQ2StAh3zjvICVZseiwg7Zijn3GazpJDiwuRr/mFDHd92NQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "remove-accents": "0.4.2"
+      }
+    },
    "matchdep": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/matchdep/-/matchdep-2.0.0.tgz",
@@ -17775,6 +17784,15 @@
        "warning": "^4.0.2"
      }
    },
+    "react-query": {
+      "version": "3.5.5",
+      "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.5.5.tgz",
+      "integrity": "sha512-WYZcHcAs5K5lPGT6CI8fz3lU62S8IfZhvB1K4aZH27wg9T6CWei+y7IRyZwti9X18LX134O4olgEuNth9LEX+w==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "match-sorter": "^6.0.2"
+      }
+    },
    "react-redux": {
      "version": "7.1.3",
      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.1.3.tgz",
@@ -18167,6 +18185,11 @@
        "superagent-proxy": "^2.0.0"
      }
    },
+    "remove-accents": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
+      "integrity": "sha1-CkPTqq4egNuRngeuJUsoXZ4ce7U="
+    },
    "remove-trailing-separator": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
--- a/package.json
+++ b/package.json
@@ -85,6 +85,7 @@
    "react-dom": "16.9.0",
    "react-hotkeys": "2.0.0",
    "react-notification-system": "0.2.17",
+    "react-query": "3.5.5",
    "react-redux": "7.1.3",
    "redux": "4.0.4",
    "rx-jupyter": "5.5.12",
--- a/src/Explorer/Controls/AccountSwitch/AccountSwitchComponent.tsx
+++ b/src/Explorer/Controls/AccountSwitch/AccountSwitchComponent.tsx
@@ -1,4 +1,3 @@
-import { AuthType } from "../../../AuthType";
 import { StyleConstants } from "../../../Common/Constants";
 import { DatabaseAccount, Subscription } from "../../../Contracts/DataModels";

@@ -6,39 +5,21 @@ import * as React from "react";
 import { DefaultButton, IButtonStyles, IButtonProps } from "office-ui-fabric-react/lib/Button";
 import { IContextualMenuProps } from "office-ui-fabric-react/lib/ContextualMenu";
 import { Dropdown, IDropdownOption, IDropdownProps } from "office-ui-fabric-react/lib/Dropdown";
+import { useSubscriptions } from "../../../hooks/useSubscriptions";

-export interface AccountSwitchComponentProps {
-  authType: AuthType;
-  selectedAccountName: string;
-  accounts: DatabaseAccount[];
-  isLoadingAccounts: boolean;
-  onAccountChange: (newAccount: DatabaseAccount) => void;
-  selectedSubscriptionId: string;
-  subscriptions: Subscription[];
-  isLoadingSubscriptions: boolean;
-  onSubscriptionChange: (newSubscription: Subscription) => void;
-  displayText?: string;
-}
-
-export class AccountSwitchComponent extends React.Component<AccountSwitchComponentProps> {
-  public render(): JSX.Element {
-    return this.props.authType === AuthType.AAD ? this._renderSwitchDropDown() : this._renderAccountName();
-  }
-
-  private _renderSwitchDropDown(): JSX.Element {
-    const { displayText, selectedAccountName } = this.props;
-
+export const AccountSwitchComponent: React.FunctionComponent = () => {
+  const subscriptions = useSubscriptions();
  const menuProps: IContextualMenuProps = {
    directionalHintFixed: true,
    className: "accountSwitchContextualMenu",
    items: [
      {
        key: "switchSubscription",
-          onRender: this._renderSubscriptionDropdown.bind(this)
+        onRender: () => renderSubscriptionDropdown(subscriptions)
      },
      {
        key: "switchAccount",
-          onRender: this._renderAccountDropDown.bind(this)
+        onRender: renderAccountDropDown
      }
    ]
  };
@@ -75,7 +56,7 @@ export class AccountSwitchComponent extends React.Component<AccountSwitchCompone
  };

  const buttonProps: IButtonProps = {
-      text: displayText || selectedAccountName,
+    text: "foo",
    menuProps: menuProps,
    styles: buttonStyles,
    className: "accountSwitchButton",
@@ -83,10 +64,12 @@ export class AccountSwitchComponent extends React.Component<AccountSwitchCompone
  };

  return <DefaultButton {...buttonProps} />;
-  }
+};
+
+function renderSubscriptionDropdown(subscriptions: Subscription[]): JSX.Element {
+  const selectedSubscriptionId = "";
+  const isLoadingSubscriptions = false;

-  private _renderSubscriptionDropdown(): JSX.Element {
-    const { subscriptions, selectedSubscriptionId, isLoadingSubscriptions } = this.props;
  const options: IDropdownOption[] = subscriptions.map(sub => {
    return {
      key: sub.subscriptionId,
@@ -105,7 +88,7 @@ export class AccountSwitchComponent extends React.Component<AccountSwitchCompone
    label: "Subscription",
    className: "accountSwitchSubscriptionDropdown",
    options: options,
-      onChange: this._onSubscriptionDropdownChange,
+    onChange: () => {},
    defaultSelectedKey: selectedSubscriptionId,
    placeholder: placeHolderText,
    styles: {
@@ -116,16 +99,10 @@ export class AccountSwitchComponent extends React.Component<AccountSwitchCompone
  return <Dropdown {...dropdownProps} />;
 }

-  private _onSubscriptionDropdownChange = (e: React.FormEvent<HTMLDivElement>, option: IDropdownOption): void => {
-    if (!option) {
-      return;
-    }
-
-    this.props.onSubscriptionChange(option.data);
-  };
-
-  private _renderAccountDropDown(): JSX.Element {
-    const { accounts, selectedAccountName, isLoadingAccounts } = this.props;
+function renderAccountDropDown(): JSX.Element {
+  const accounts = [];
+  const selectedAccountName = "foo";
+  const isLoadingAccounts = false;
  const options: IDropdownOption[] = accounts.map(account => {
    return {
      key: account.name,
@@ -151,7 +128,7 @@ export class AccountSwitchComponent extends React.Component<AccountSwitchCompone
    label: "Cosmos DB Account Name",
    className: "accountSwitchAccountDropdown",
    options: options,
-      onChange: this._onAccountDropdownChange,
+    onChange: () => {},
    defaultSelectedKey: selectedAccountName,
    placeholder: placeHolderText,
    styles: {
@@ -161,17 +138,3 @@ export class AccountSwitchComponent extends React.Component<AccountSwitchCompone

  return <Dropdown {...dropdownProps} />;
 }
-
-  private _onAccountDropdownChange = (e: React.FormEvent<HTMLDivElement>, option: IDropdownOption): void => {
-    if (!option) {
-      return;
-    }
-
-    this.props.onAccountChange(option.data);
-  };
-
-  private _renderAccountName(): JSX.Element {
-    const { displayText, selectedAccountName } = this.props;
-    return <span className="accountNameHeader">{displayText || selectedAccountName}</span>;
-  }
-}
--- a/src/HostedExplorer.tsx
+++ b/src/HostedExplorer.tsx
@@ -1,5 +1,5 @@
 import { Configuration, PublicClientApplication } from "@azure/msal-browser";
-import { AuthenticatedTemplate, MsalProvider, UnauthenticatedTemplate } from "@azure/msal-react";
+import { AuthenticatedTemplate, MsalProvider, UnauthenticatedTemplate, useMsal } from "@azure/msal-react";
 import { useBoolean } from "@uifabric/react-hooks";
 import {
  DefaultButton,
@@ -15,30 +15,51 @@ import * as React from "react";
 import { render } from "react-dom";
 import FeedbackIcon from "../images/Feedback.svg";
 import ConnectIcon from "../images/HostedConnectwhite.svg";
+import ChevronRight from "../images/chevron-right.svg";
 import "../less/hostedexplorer.less";
+import { AccountSwitchComponent } from "./Explorer/Controls/AccountSwitch/AccountSwitchComponent";
 import { CommandButtonComponent } from "./Explorer/Controls/CommandButton/CommandButtonComponent";
 import { DefaultDirectoryDropdownComponent } from "./Explorer/Controls/Directory/DefaultDirectoryDropdownComponent";
 import { DirectoryListComponent } from "./Explorer/Controls/Directory/DirectoryListComponent";
 import "./Explorer/Menus/NavBar/MeControlComponent.less";
-import { useGraphProfile } from "./hooks/useGraphProfile";
+import { useGraphPhoto } from "./hooks/useGraphPhoto";
+import { ConnectScreen } from "./Platform/Hosted/ConnectScreen";
 import "./Shared/appInsights";
+import { useAADAccount } from "./hooks/useAADAccount";

 initializeIcons();

 // MSAL configuration
 const configuration: Configuration = {
  auth: {
-    clientId: "e8ae3d28-de2a-4dc8-8fa3-2d2998b1c38f",
+    clientId: "203f1145-856a-4232-83d4-a43568fba23d",
    redirectUri: "https://localhost:1234/hostedExplorer.html",
-    authority: "https://login.microsoftonline.com/72f988bf-86f1-41af-91ab-2d7cd011db47"
+    authority: "https://login.windows-ppe.net/common"
+  },
+  cache: {
+    cacheLocation: "sessionStorage",
+    storeAuthStateInCookie: false
  }
 };

+// const configuration: Configuration = {
+//   auth: {
+//     clientId: "b4d07291-7936-4c8e-b413-f58b6d1c67e8",
+//     redirectUri: "https://localhost:1234/hostedExplorer.html",
+//     authority: "https://login.microsoftonline.com/907765e9-1846-4d84-ad7f-a2f5030ef5ba"
+//   },
+//   cache: {
+//     cacheLocation: "sessionStorage"
+//   }
+// };
+
 const application = new PublicClientApplication(configuration);

 const App: React.FunctionComponent = () => {
  const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
-  const { graphData, photo } = useGraphProfile();
+  const { instance } = useMsal();
+  const account = useAADAccount();
+  const photo = useGraphPhoto();

  const menuProps = {
    className: "mecontrolContextualMenu",
@@ -123,23 +144,18 @@ const App: React.FunctionComponent = () => {
          <div className="cosmosDBTitle">
            <span
              className="title"
-              data-bind="click: openAzurePortal, event: { keypress: onOpenAzurePortalKeyPress }"
+              onClick={() => window.open("https://portal.azure.com", "_blank")}
              tabIndex={0}
              title="Go to Azure Portal"
            >
              Microsoft Azure
            </span>
            <span className="accontSplitter" /> <span className="serviceTitle">Cosmos DB</span>
-            <img
-              className="chevronRight"
-              src="/chevron-right.svg"
-              alt="account separator"
-              data-bind="visible: isAccountActive"
-            />
-            <span
-              className="accountSwitchComponentContainer"
-              data-bind="react: accountSwitchComponentAdapter, visible: isAccountActive"
-            />
+            <img className="chevronRight" src={ChevronRight} alt="account separator" />
+            <span className="accountSwitchComponentContainer">
+              {/* <AccountSwitchComponent /> */}
+              <span className="accountNameHeader">REPLACE ME - Connection string mode</span>;
+            </span>
          </div>
          <div className="feedbackConnectSettingIcons">
            <AuthenticatedTemplate>
@@ -177,8 +193,8 @@ const App: React.FunctionComponent = () => {
                <DefaultButton {...buttonProps}>
                  <Persona
                    imageUrl={photo}
-                    text={graphData?.displayName}
-                    secondaryText={graphData?.displayName}
+                    text={account?.name}
+                    secondaryText={account?.username}
                    showSecondaryText={true}
                    showInitialsUntilImageLoads={true}
                    initialsColor={PersonaInitialsColor.teal}
@@ -193,7 +209,10 @@ const App: React.FunctionComponent = () => {
                className="mecontrolSigninButton"
                text="Sign In"
                onClick={() => {
-                  instance.loginPopup();
+                  instance.loginPopup({
+                    scopes: ["https://graph.microsoft-ppe.com/" + "/.default"],
+                    redirectUri: "https://localhost:1234/hostedExplorer.html"
+                  });
                }}
                styles={{
                  rootHovered: { backgroundColor: "#393939", color: "#fff" },
@@ -205,30 +224,30 @@ const App: React.FunctionComponent = () => {
          </div>
        </div>
      </header>
+      <AuthenticatedTemplate>
+        <p>LOGGED IN!</p>
        {/* <iframe
          id="explorerMenu"
          name="explorer"
          className="iframe"
          title="explorer"
-        src="explorer.html?v=1.0.1&platform=Hosted"
-        data-bind="visible: navigationSelection() === 'explorer'"
+          src="explorer.html?v=1.0.1&platform=Portal"
        ></iframe> */}
+      </AuthenticatedTemplate>
+      <UnauthenticatedTemplate>
+        <ConnectScreen />
+      </UnauthenticatedTemplate>
+      <ConnectScreen />
      <div data-bind="react: firewallWarningComponentAdapter" />
      <div data-bind="react: dialogComponentAdapter" />
-      <Panel
-        headerText="Select Directory"
-        isOpen={!isOpen}
-        onDismiss={dismissPanel}
-        // You MUST provide this prop! Otherwise screen readers will just say "button" with no label.
-        closeButtonAriaLabel="Close"
-      >
-        <div className="directoryDropdownContainer">
+      <Panel headerText="Select Directory" isOpen={isOpen} onDismiss={dismissPanel} closeButtonAriaLabel="Close">
+        {/* <div className="directoryDropdownContainer">
          <DefaultDirectoryDropdownComponent />
        </div>
        <div className="directoryDivider" />
        <div className="directoryListContainer">
          <DirectoryListComponent />
-        </div>
+        </div> */}
      </Panel>
    </div>
  );
--- a/src/Platform/Hosted/ArmResourceUtils.ts
+++ b/src/Platform/Hosted/ArmResourceUtils.ts
@@ -6,7 +6,7 @@ import { configContext } from "../../ConfigContext";
 import { getErrorMessage } from "../../Common/ErrorHandlingUtils";

 // TODO: 421864 - add a fetch wrapper
-export abstract class ArmResourceUtils {
+export class ArmResourceUtils {
  private static readonly _armEndpoint: string = configContext.ARM_ENDPOINT;
  private static readonly _armApiVersion: string = configContext.ARM_API_VERSION;
  private static readonly _armAuthArea: string = configContext.ARM_AUTH_AREA;
--- a/src/Platform/Hosted/Authorization.ts
+++ b/src/Platform/Hosted/Authorization.ts
@@ -20,20 +20,7 @@ export default class AuthHeadersUtil {
  private static readonly _graphEndpoint: string = configContext.GRAPH_ENDPOINT;
  private static readonly _graphApiVersion: string = configContext.GRAPH_API_VERSION;

-  private static _authContext: AuthenticationContext = new AuthenticationContext({
-    instance: AuthHeadersUtil._aadEndpoint,
-    clientId: AuthHeadersUtil._firstPartyAppId,
-    postLogoutRedirectUri: window.location.origin,
-    endpoints: {
-      aad: AuthHeadersUtil._aadEndpoint,
-      graph: AuthHeadersUtil._graphEndpoint,
-      armAuthArea: AuthHeadersUtil._armAuthArea,
-      armEndpoint: AuthHeadersUtil._armEndpoint,
-      arcadiaEndpoint: AuthHeadersUtil._arcadiaEndpoint
-    },
-    tenant: undefined,
-    cacheLocation: window.navigator.userAgent.indexOf("Edge") > -1 ? "localStorage" : undefined
-  });
+  private static _authContext: any = {};

  public static getAccessInputMetadata(accessInput: string): Q.Promise<DataModels.AccessInputMetadata> {
    const deferred: Q.Deferred<DataModels.AccessInputMetadata> = Q.defer<DataModels.AccessInputMetadata>();
--- a/src/hooks/useGraphProfile.tsx
+++ b/src/hooks/useGraphProfile.tsx
@@ -1,7 +1,7 @@
-import { useAccount, useMsal } from "@azure/msal-react";
 import { useEffect, useState } from "react";
+import { useAADToken } from "./useAADToken";

-export async function fetchMe(accessToken: string): Promise<GraphMeResponse> {
+export async function fetchMe(accessToken: string): Promise<ProfileResponse> {
  const headers = new Headers();
  const bearer = `Bearer ${accessToken}`;

@@ -12,32 +12,12 @@ export async function fetchMe(accessToken: string): Promise<GraphMeResponse> {
    headers: headers
  };

-  console.log("EXECUTING REQUEST");
  return fetch("https://graph.microsoft.com/v1.0/me", options)
    .then(response => response.json())
    .catch(error => console.log(error));
 }

-export async function fetchPhoto(accessToken: string): Promise<Blob | void> {
-  const headers = new Headers();
-  const bearer = `Bearer ${accessToken}`;
-
-  headers.append("Authorization", bearer);
-  headers.append("Content-Type", "image/jpg");
-
-  const options = {
-    method: "GET",
-    headers: headers
-  };
-
-  console.log("EXECUTING REQUEST");
-  return fetch("https://graph.microsoft.com/v1.0/me/photo/$value", options)
-    .then(response => response.blob())
-    .catch(error => console.log(error));
-}
-
-interface GraphMeResponse {
-  businessPhones: any[];
+interface ProfileResponse {
  displayName: string;
  givenName: string;
  jobTitle: string;
@@ -50,25 +30,14 @@ interface GraphMeResponse {
  id: string;
 }

-export function useGraphProfile(): { graphData: GraphMeResponse; photo: string } {
-  const { instance, accounts } = useMsal();
-  const account = useAccount(accounts[0] || {});
-  const [graphData, setGraphData] = useState<GraphMeResponse>();
-  const [photo, setPhoto] = useState<string>();
+export function useGraphProfile(): ProfileResponse {
+  const token = useAADToken();
+  const [profileResponse, setProfileResponse] = useState<ProfileResponse>();

  useEffect(() => {
-    console.log("account", account);
-    if (account) {
-      instance
-        .acquireTokenSilent({
-          scopes: ["User.Read"],
-          account
-        })
-        .then(response => {
-          fetchMe(response.accessToken).then(response => setGraphData(response));
-          fetchPhoto(response.accessToken).then(response => setPhoto(URL.createObjectURL(response)));
-        });
+    if (token) {
+      fetchMe(token).then(response => setProfileResponse(response));
    }
-  }, [account]);
-  return { graphData, photo };
+  }, [token]);
+  return profileResponse;
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,7 +11,7 @@
    "allowSyntheticDefaultImports": true,
    "downlevelIteration": true,
    "module": "esnext",
-    "target": "es5",
+    "target": "es2017",
    "lib": ["es5", "es6", "dom", "webworker.importscripts"],
    "jsx": "react",
    "moduleResolution": "node",
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -78,7 +78,7 @@ const ModulesRule = {
      loader: "babel-loader",
      options: {
        cacheDirectory: ".cache/babel",
-        presets: [["@babel/preset-env", { targets: { ie: "11" }, useBuiltIns: false }]]
+        presets: [["@babel/preset-env", { targets: { chrome: "80" }, useBuiltIns: false }]]
      }
    }
  ],