diff --git a/Composer/packages/client/src/components/ManageService/ManageService.tsx b/Composer/packages/client/src/components/ManageService/ManageService.tsx index 0fb074c414..2c3ea232b3 100644 --- a/Composer/packages/client/src/components/ManageService/ManageService.tsx +++ b/Composer/packages/client/src/components/ManageService/ManageService.tsx @@ -23,6 +23,7 @@ import { ProvisionHandoff } from '@bfc/ui-shared'; import sortBy from 'lodash/sortBy'; import { NeutralColors } from '@uifabric/fluent-theme'; import { AzureTenant } from '@botframework-composer/types'; +import jwtDecode from 'jwt-decode'; import TelemetryClient from '../../telemetry/TelemetryClient'; import { AuthClient } from '../../utils/authClient'; @@ -95,7 +96,7 @@ export const ManageService = (props: ManageServiceProps) => { const [availableSubscriptions, setAvailableSubscriptions] = useState([]); const [subscriptionsErrorMessage, setSubscriptionsErrorMessage] = useState(); const [keys, setKeys] = useState([]); - + const [userProvidedTokens, setUserProvidedTokens] = useState(false); const [currentStep, setCurrentStep] = useState('intro'); const [outcomeDescription, setOutcomeDescription] = useState(''); const [outcomeSummary, setOutcomeSummary] = useState(); @@ -137,15 +138,23 @@ export const ManageService = (props: ManageServiceProps) => { return []; } }; + const decodeToken = (token: string) => { + try { + return jwtDecode(token); + } catch (err) { + console.error('decode token error in ', err); + return null; + } + }; useEffect(() => { - if (!userShouldProvideTokens()) { + if (currentStep === 'subscription' && !userShouldProvideTokens()) { AuthClient.getTenants() .then((tenants) => { setAllTenants(tenants); if (tenants.length === 0) { setTenantsErrorMessage(formatMessage('No Azure Directories were found.')); - } else if (tenants.length === 1) { + } else if (tenants.length >= 1) { setTenantId(tenants[0].tenantId); } else { setTenantsErrorMessage(undefined); @@ -159,7 +168,7 @@ export const ManageService = (props: ManageServiceProps) => { ); }); } - }, []); + }, [currentStep]); useEffect(() => { if (tenantId) { @@ -210,9 +219,21 @@ export const ManageService = (props: ManageServiceProps) => { setShowAuthDialog(true); } newtoken = getTokenFromCache('accessToken'); - } - if (newtoken) { - setToken(newtoken); + if (newtoken) { + const decoded = decodeToken(newtoken); + if (decoded) { + setToken(newtoken); + setUserProvidedTokens(true); + } else { + setTenantsErrorMessage( + formatMessage( + 'There was a problem with the authentication access token. Close this dialog and try again. To be prompted to provide the access token again, clear it from application local storage.' + ) + ); + } + } + } else { + setUserProvidedTokens(false); } setCurrentStep('subscription'); }; @@ -619,7 +640,7 @@ export const ManageService = (props: ManageServiceProps) => { ); }; - const renderResourseCreatorStep = () => { + const renderResourceCreatorStep = () => { return (
@@ -754,7 +775,7 @@ export const ManageService = (props: ManageServiceProps) => {

{formatMessage( - 'Select your Azure directory, then choose the subscription where you’d like your new {service} resource.', + 'Select your Azure directory, then choose the subscription where you’d like your new {service} resource. ', { service: props.serviceName } )} {props.learnMore ? ( @@ -799,7 +820,7 @@ export const ManageService = (props: ManageServiceProps) => { {loading && } setCurrentStep('intro')} /> setCurrentStep('resourceCreation')} /> @@ -820,7 +841,7 @@ export const ManageService = (props: ManageServiceProps) => { return renderSubscriptionSelectionStep(); } case 'resourceCreation': - return renderResourseCreatorStep(); + return renderResourceCreatorStep(); case 'outcome': return renderOutcomeStep(); default: