From d1ac8eb07753bbc12ba6e3272d5927f12d5dd8ad Mon Sep 17 00:00:00 2001 From: Steve Faulkner <471400+southpolesteve@users.noreply.github.com> Date: Tue, 5 Jan 2021 01:14:17 -0600 Subject: [PATCH] WIP --- src/HostedExplorer.tsx | 4 +-- .../Hosted/Components/AccountSwitcher.tsx | 2 ++ .../Components/DirectoryPickerPanel.tsx | 21 +++--------- src/hooks/useAADAuth.ts | 33 +++++++++++++++++-- 4 files changed, 39 insertions(+), 21 deletions(-) diff --git a/src/HostedExplorer.tsx b/src/HostedExplorer.tsx index e022d5899..4b14bc4fe 100644 --- a/src/HostedExplorer.tsx +++ b/src/HostedExplorer.tsx @@ -31,7 +31,7 @@ const App: React.FunctionComponent = () => { // For showing/hiding panel const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false); - const { isLoggedIn, armToken, graphToken, account, tenantId, logout, login } = useAADAuth(); + const { isLoggedIn, armToken, graphToken, account, tenantId, logout, login, switchTenant } = useAADAuth(); const [databaseAccount, setDatabaseAccount] = React.useState(); const [authType, setAuthType] = React.useState(encryptedToken ? AuthType.EncryptedToken : undefined); const [connectionString, setConnectionString] = React.useState(); @@ -132,7 +132,7 @@ const App: React.FunctionComponent = () => { {!isLoggedIn && !encryptedTokenMetadata && ( )} - {isLoggedIn && } + {isLoggedIn && } ); }; diff --git a/src/Platform/Hosted/Components/AccountSwitcher.tsx b/src/Platform/Hosted/Components/AccountSwitcher.tsx index e4866b607..b3255b46e 100644 --- a/src/Platform/Hosted/Components/AccountSwitcher.tsx +++ b/src/Platform/Hosted/Components/AccountSwitcher.tsx @@ -55,6 +55,8 @@ export const AccountSwitcher: React.FunctionComponent = ({ armToken, setD const accounts = useDatabaseAccounts(selectedSubscriptionId, armToken); const [selectedAccountName, setSelectedAccoutName] = React.useState(cachedDatabaseAccountName); + console.log(subscriptions, accounts); + React.useEffect(() => { if (accounts && selectedAccountName) { const account = accounts.find(account => account.name === selectedAccountName); diff --git a/src/Platform/Hosted/Components/DirectoryPickerPanel.tsx b/src/Platform/Hosted/Components/DirectoryPickerPanel.tsx index a60623359..d80d69667 100644 --- a/src/Platform/Hosted/Components/DirectoryPickerPanel.tsx +++ b/src/Platform/Hosted/Components/DirectoryPickerPanel.tsx @@ -7,13 +7,15 @@ interface Props { dismissPanel: () => void; tenantId: string; armToken: string; + switchTenant: (tenantId: string) => void; } export const DirectoryPickerPanel: React.FunctionComponent = ({ isOpen, dismissPanel, armToken, - tenantId + tenantId, + switchTenant }: Props) => { const directories = useDirectories(armToken); return ( @@ -27,22 +29,9 @@ export const DirectoryPickerPanel: React.FunctionComponent = ({ ({ key: dir.tenantId, text: `${dir.displayName} (${dir.tenantId})` }))} selectedKey={tenantId} - onChange={async () => { + onChange={async (event, option) => { + switchTenant(option.key); dismissPanel(); - // TODO!!! Switching directories does not work. Still not sure why. Tried lots of stuff. - // const response = await msal.loginPopup({ - // authority: `https://login.microsoftonline.com/${option.key}` - // }); - // // msal = new Msal.UserAgentApplication({ - // // auth: { - // // authority: `https://login.microsoftonline.com/${option.key}`, - // // clientId: "203f1145-856a-4232-83d4-a43568fba23d", - // // redirectUri: "https://dataexplorer-dev.azurewebsites.net" // TODO! This should only be set in development - // // } - // // }); - // setTenantId(option.key); - // setAccount(response.account); - // console.log(account); }} /> diff --git a/src/hooks/useAADAuth.ts b/src/hooks/useAADAuth.ts index 6eeafec3a..7426e0f4b 100644 --- a/src/hooks/useAADAuth.ts +++ b/src/hooks/useAADAuth.ts @@ -2,12 +2,12 @@ import * as React from "react"; import { useBoolean } from "@uifabric/react-hooks"; import { UserAgentApplication, Account } from "msal"; -const msal = new UserAgentApplication({ +let msal = new UserAgentApplication({ cache: { cacheLocation: "localStorage" }, auth: { - authority: "https://login.microsoft.com/common", + authority: "https://login.microsoftonline.com/common", clientId: "203f1145-856a-4232-83d4-a43568fba23d", redirectUri: "https://dataexplorer-dev.azurewebsites.net" // TODO! This should only be set in development } @@ -24,6 +24,7 @@ interface ReturnType { logout: () => void; tenantId: string; account: Account; + switchTenant: (tenantId: string) => void; } export function useAADAuth(): ReturnType { @@ -49,13 +50,38 @@ export function useAADAuth(): ReturnType { msal.logout(); }, []); + const switchTenant = React.useCallback( + async id => { + msal = new UserAgentApplication({ + cache: { + cacheLocation: "localStorage" + }, + auth: { + authority: `https://login.microsoftonline.com/${id}`, + clientId: "203f1145-856a-4232-83d4-a43568fba23d", + redirectUri: "https://dataexplorer-dev.azurewebsites.net" // TODO! This should only be set in development + } + }); + const response = await msal.loginPopup({ + authority: `https://login.microsoftonline.com/${id}` + }); + setTenantId(response.tenantId); + setAccount(response.account); + console.log(response); + }, + [account, tenantId] + ); + React.useEffect(() => { if (account && tenantId) { + console.log("Getting tokens for", tenantId); Promise.all([ msal.acquireTokenSilent({ + authority: `https://login.microsoftonline.com/${tenantId}`, scopes: ["https://graph.windows.net//.default"] }), msal.acquireTokenSilent({ + authority: `https://login.microsoftonline.com/${tenantId}`, scopes: ["https://management.azure.com//.default"] }) ]).then(([graphTokenResponse, armTokenResponse]) => { @@ -72,6 +98,7 @@ export function useAADAuth(): ReturnType { graphToken, armToken, login, - logout + logout, + switchTenant }; }