I am currently developing a React-powered Outlook Add-in. I kickstarted my project using the YeomanGenerator. While working on setting up authentication with the help of Office-Js-Helpers, I faced some challenges. Although I successfully created the authenticator and registered the microsoftAuth Endpoint, there seems to be an issue where the dialog never closes after signing in. Despite receiving the access token in the dialog's URL, the success/then function is not triggered for token authentication - unless I manually close the window, which then triggers the catch function.
I'm uncertain if my project setup is correct or if there might be any missing configurations. The following snippet is from my main.tsx, which acts as the initial page when launching the add-in. Enclosed is the code (with dummy data) where the clientId is intentionally hidden for privacy reasons. I have configured the redirectUrl in my application account along with
https://localhost:3000/signin-microsoftimport * as React from 'react'
import { render } from 'react-dom'
import { App } from './components/app'
import { Progress } from './components/progress'
import './assets/styles/global.scss'
import { Authenticator, Utilities, DefaultEndpoints } from '@microsoft/office-js-helpers'
(() => {
const title = 'My App';
const container = document.querySelector('#container');
const clientId = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
/* Render application after Office initializes */
Office.initialize = () => {
if (Authenticator.isAuthDialog()) return
this.authenticator = new Authenticator()
this.authenticator.endpoints.registerMicrosoftAuth(clientId, {
redirectUrl: 'https://localhost:3000/signin-microsoft',
scope: 'https://outlook.office.com/tasks.readwrite'
})
return this.authenticator.authenticate(DefaultEndpoints.Microsoft)
.then(function (token) {
debugger;
console.log("CINDER " + token)
})
.catch(function (error) {
debugger;
Utilities.log(error)
throw new Error('Failed to login using your Microsoft Account')
})
render(
<App title={title} authenticator={this.authenticator}/>,
container
);
};
/* Initial render showing a progress bar */
render(<Progress title={title} logo='assets/logo-filled.png' message='Please sideload your addin to see app body.' />, container);
})();