const msalConfig = {
auth: {
clientId: '********', // app registration id
authority: 'https://login.microsoftonline.com/********', // tenant id
redirectUri: 'http://localhost:3000',
},
cache: {
cacheLocation: 'sessionStorage',
storeAuthStateInCookie: false,
},
}
const msalInstance = new PublicClientApplication(msalConfig);
const PowerAutomatePage = () => {
const [accessToken, setAccessToken] = useState(null);
const sdk = useRef();
const getActiveAccountCallback = async account => {
try {
msalInstance.setActiveAccount(account);
const tokenResponse = await msalInstance.acquireTokenSilent({ ...loginRequest, account });
setAccessToken(tokenResponse.accessToken);
} catch (error) {
console.error('Error getting active account:', error);
}
};
const handleLogin = async () => {
try {
const accountResponse = await msalInstance.loginPopup(loginRequest);
await getActiveAccountCallback(accountResponse.account);
} catch (error) {
console.error('Error with login popup:', error);
}
};
useEffect(
() => {
(async () => {
await msalInstance.initialize();
const currentAccounts = msalInstance.getAllAccounts();
if (currentAccounts.length > 0) await getActiveAccountCallback(currentAccounts[0]);
if (window.MsFlowSdk) {
const sdkInstance = new window.MsFlowSdk({
hostname,
locale: 'en-US',
});
sdk.current = sdkInstance;
} else {
console.error('MsFlowSdk is not available. Check if the script is loaded correctly.');
}
})();
},
[],
);
useEffect(
() => {
const container = document.getElementById('flowsDiv');
if (!sdk.current || !accessToken || !container) return;
const widget = sdk.current.renderWidget('flowCreation', {
container: 'flowsDiv',
flowsSettings: {},
templatesSettings: {},
approvalCenterSettings: {},
widgetStyleSettings: {},
});
widget.listen('GET_ACCESS_TOKEN', (requestParam, widgetDoneCallback) => {
widgetDoneCallback(null, {
token: accessToken,
});
});
},
[sdk.current, accessToken],
);
return !accessToken ? (
<Button onClick={handleLogin}>Connect</Button>
) : (
<Div_FlowContainer id="flowsDiv" />
);
};
