Upgrades to msal-browser (#781)

* Replaces msal with msal-browser

* Remove unused id, logging in returns the tenant

* format

* Fix tenant switch

* Removes v1 forceRefresh
This commit is contained in:
Zachary Foster
2021-05-17 14:10:54 -04:00
committed by GitHub
parent 4f3b2f7996
commit a06e213b81
5 changed files with 39 additions and 23 deletions

View File

@@ -1,8 +1,8 @@
import * as React from "react";
import * as msal from "@azure/msal-browser";
import { useBoolean } from "@fluentui/react-hooks";
import { UserAgentApplication, Account, Configuration } from "msal";
import * as React from "react";
const config: Configuration = {
const config: msal.Configuration = {
cache: {
cacheLocation: "localStorage",
},
@@ -16,9 +16,9 @@ if (process.env.NODE_ENV === "development") {
config.auth.redirectUri = "https://dataexplorer-dev.azurewebsites.net";
}
const msal = new UserAgentApplication(config);
const msalInstance = new msal.PublicClientApplication(config);
const cachedAccount = msal.getAllAccounts()?.[0];
const cachedAccount = msalInstance.getAllAccounts()?.[0];
const cachedTenantId = localStorage.getItem("cachedTenantId");
interface ReturnType {
@@ -28,7 +28,7 @@ interface ReturnType {
login: () => void;
logout: () => void;
tenantId: string;
account: Account;
account: msal.AccountInfo;
switchTenant: (tenantId: string) => void;
}
@@ -36,13 +36,14 @@ export function useAADAuth(): ReturnType {
const [isLoggedIn, { setTrue: setLoggedIn, setFalse: setLoggedOut }] = useBoolean(
Boolean(cachedAccount && cachedTenantId) || false
);
const [account, setAccount] = React.useState<Account>(cachedAccount);
const [account, setAccount] = React.useState<msal.AccountInfo>(cachedAccount);
const [tenantId, setTenantId] = React.useState<string>(cachedTenantId);
const [graphToken, setGraphToken] = React.useState<string>();
const [armToken, setArmToken] = React.useState<string>();
msalInstance.setActiveAccount(account);
const login = React.useCallback(async () => {
const response = await msal.loginPopup();
const response = await msalInstance.loginPopup();
setLoggedIn();
setAccount(response.account);
setTenantId(response.tenantId);
@@ -52,13 +53,14 @@ export function useAADAuth(): ReturnType {
const logout = React.useCallback(() => {
setLoggedOut();
localStorage.removeItem("cachedTenantId");
msal.logout();
msalInstance.logoutRedirect();
}, []);
const switchTenant = React.useCallback(
async (id) => {
const response = await msal.loginPopup({
const response = await msalInstance.loginPopup({
authority: `https://login.microsoftonline.com/${id}`,
scopes: [],
});
setTenantId(response.tenantId);
setAccount(response.account);
@@ -69,15 +71,11 @@ export function useAADAuth(): ReturnType {
React.useEffect(() => {
if (account && tenantId) {
Promise.all([
msal.acquireTokenSilent({
// There is a bug in MSALv1 that requires us to refresh the token. Their internal cache is not respecting authority
forceRefresh: true,
msalInstance.acquireTokenSilent({
authority: `https://login.microsoftonline.com/${tenantId}`,
scopes: ["https://graph.windows.net//.default"],
}),
msal.acquireTokenSilent({
// There is a bug in MSALv1 that requires us to refresh the token. Their internal cache is not respecting authority
forceRefresh: true,
msalInstance.acquireTokenSilent({
authority: `https://login.microsoftonline.com/${tenantId}`,
scopes: ["https://management.azure.com//.default"],
}),