kcarnold
commented
2 days ago Nevermind, the popup approach doesn't actually work here at all because auth0 tries to use a webmessage response, and Office doesn't allow cross-origin messages from dialogs without its special API too.
But I realized that loginWithRedirect is a more robust flow. Our WIP approach:
if (!isAuthenticated) {
let dialog: Office.Dialog;
// Strategy: the popup will pass its redirect-callback data here, so we can pass it on to handleRedirectCallback
const processMessage = async (
args:
| { message: string; origin: string | undefined }
| { error: number }
) => {
if ('error' in args) {
console.error('Error:', args.error);
return;
}
let messageFromDialog = JSON.parse(args.message);
dialog.close();
if (messageFromDialog.status === 'success') {
// The dialog reported a successful login.
handleRedirectCallback(messageFromDialog.urlWithAuthInfo);
}
else {
console.error('Login failed.', messageFromDialog);
}
};
// Actually make a popup using MS dialog API
// hook the message event from the popup to set close false and get the token
return (
<div>
Login here:
<button onClick= { async () => {
// Use this dialog for the Auth0 client library.
await loginWithRedirect({
openUrl: async (url: string) => {
const redirect = encodeURIComponent(url);
const bounceURL = location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '') + '/popup.html?redirect=' + redirect;
// height and width are percentages of the size of the screen.
// How MS use it: https://github.com/OfficeDev/Office-Add-in-samples/blob/main/Samples/auth/Office-Add-in-Microsoft-Graph-React/utilities/office-apis-helpers.ts#L38
Office.context.ui.displayDialogAsync(
bounceURL,
{ height: 45, width: 55 },
function (result) {
dialog = result.value;
dialog.addEventHandler(
Office.EventType.DialogMessageReceived,
processMessage
);
}
);
}
});
}}
>Log in
</button>
</div>
);
}Handling log-out is a different story... we haven't figured that out yet!
Checklist
Describe the problem you'd like to have solved
Microsoft Office add-ins require that any popups be opened using a special API instead of
window.open. A few unusual constraints of that API are:Describe the ideal solution
I've done some gymnastics (see below) to make this API work with
loginWithPopup, but it would be much easier if the user of the library could provide a custom dialog API. For example, something like:where I've imagined asyncified versions of the Office dialog code.
Alternatives and current workarounds
My workaround code currently looks like:
Additional context
No response