MSAL 2.0 checkpoint

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;
+  transition: all 0.4s ease-in-out;
-    -ms-transition: all .4s ease-in-out;
+  -ms-transition: all 0.4s ease-in-out;
-    -webkit-transition: all .4s ease-in-out;
+  -webkit-transition: all 0.4s ease-in-out;
-    -moz-transition: all .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;
+  transition: all 0.4s ease-in-out;
-    -webkit-transition: all .4s ease-in-out;
+  -webkit-transition: all 0.4s ease-in-out;
-    -moz-transition: all .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;
+  background: #f3f2f1;
-    border: 0px solid #8A8886;
+  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 {

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",

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",

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 {
+export const AccountSwitchComponent: React.FunctionComponent = () => {
-  authType: AuthType;
+  const subscriptions = useSubscriptions();
-  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;
-
   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 => {
+function renderAccountDropDown(): JSX.Element {
-    if (!option) {
+  const accounts = [];
-      return;
+  const selectedAccountName = "foo";
-    }
+  const isLoadingAccounts = false;
-
-    this.props.onSubscriptionChange(option.data);
-  };
-
-  private _renderAccountDropDown(): JSX.Element {
-    const { accounts, selectedAccountName, isLoadingAccounts } = this.props;
   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>;
-  }
-}

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
+            <img className="chevronRight" src={ChevronRight} alt="account separator" />
-              className="chevronRight"
+            <span className="accountSwitchComponentContainer">
-              src="/chevron-right.svg"
+              {/* <AccountSwitchComponent /> */}
-              alt="account separator"
+              <span className="accountNameHeader">REPLACE ME - Connection string mode</span>;
-              data-bind="visible: isAccountActive"
+            </span>
-            />
-            <span
-              className="accountSwitchComponentContainer"
-              data-bind="react: accountSwitchComponentAdapter, visible: isAccountActive"
-            />
           </div>
           <div className="feedbackConnectSettingIcons">
             <AuthenticatedTemplate>
@@ -177,8 +193,8 @@ const App: React.FunctionComponent = () => {
                 <DefaultButton {...buttonProps}>
                   <Persona
                     imageUrl={photo}
-                    text={graphData?.displayName}
+                    text={account?.name}
-                    secondaryText={graphData?.displayName}
+                    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"
+          src="explorer.html?v=1.0.1&platform=Portal"
-        data-bind="visible: navigationSelection() === 'explorer'"
         ></iframe> */}
+      </AuthenticatedTemplate>
+      <UnauthenticatedTemplate>
+        <ConnectScreen />
+      </UnauthenticatedTemplate>
+      <ConnectScreen />
       <div data-bind="react: firewallWarningComponentAdapter" />
       <div data-bind="react: dialogComponentAdapter" />
-      <Panel
+      <Panel headerText="Select Directory" isOpen={isOpen} onDismiss={dismissPanel} closeButtonAriaLabel="Close">
-        headerText="Select Directory"
+        {/* <div className="directoryDropdownContainer">
-        isOpen={!isOpen}
-        onDismiss={dismissPanel}
-        // You MUST provide this prop! Otherwise screen readers will just say "button" with no label.
-        closeButtonAriaLabel="Close"
-      >
-        <div className="directoryDropdownContainer">
           <DefaultDirectoryDropdownComponent />
         </div>
         <div className="directoryDivider" />
         <div className="directoryListContainer">
           <DirectoryListComponent />
-        </div>
+        </div> */}
       </Panel>
     </div>
   );

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;

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({
+  private static _authContext: any = {};
-    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
-  });
 
   public static getAccessInputMetadata(accessInput: string): Q.Promise<DataModels.AccessInputMetadata> {
     const deferred: Q.Deferred<DataModels.AccessInputMetadata> = Q.defer<DataModels.AccessInputMetadata>();

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> {
+interface ProfileResponse {
-  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[];
   displayName: string;
   givenName: string;
   jobTitle: string;
@@ -50,25 +30,14 @@ interface GraphMeResponse {
   id: string;
 }
 
-export function useGraphProfile(): { graphData: GraphMeResponse; photo: string } {
+export function useGraphProfile(): ProfileResponse {
-  const { instance, accounts } = useMsal();
+  const token = useAADToken();
-  const account = useAccount(accounts[0] || {});
+  const [profileResponse, setProfileResponse] = useState<ProfileResponse>();
-  const [graphData, setGraphData] = useState<GraphMeResponse>();
-  const [photo, setPhoto] = useState<string>();
 
   useEffect(() => {
-    console.log("account", account);
+    if (token) {
-    if (account) {
+      fetchMe(token).then(response => setProfileResponse(response));
-      instance
-        .acquireTokenSilent({
-          scopes: ["User.Read"],
-          account
-        })
-        .then(response => {
-          fetchMe(response.accessToken).then(response => setGraphData(response));
-          fetchPhoto(response.accessToken).then(response => setPhoto(URL.createObjectURL(response)));
-        });
     }
-  }, [account]);
+  }, [token]);
-  return { graphData, photo };
+  return profileResponse;
 }

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",

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 }]]
       }
     }
   ],