Outlook Add-in Office-Js Authentication

Question

I am building a React based Outlook Add-in. I set up my project using the YeomanGenerator. I am trying to set up authentication using Office-Js-Helpers. I am able to create the authenticator, register the microsoftAuth Endpoint. My add in opens the dialog, and I am able to sign in, etc. and it returns the access token in the url in the dialog, but the dialog never closes, and the success/then function after I try to authenticate to get my token is never hit. If I manually close the dialog window then the catch is triggered.

I don't know if I am setting my project up correctly. This is the code in my main.tsx which is the first loaded page when I open my add-in. Here is the code (with some dummy data - e.g. my clientId is an actual one, I've just blocked it out). I've set up my redirectUrl in my application account as well as https://localhost:3000/signin-microsoft. Please let me know what other information you might need - I'm 100% stuck here.

import * 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);
})();

Answer 1

I was running into the same issue with my react add-in for PowerPoint.

In my case, the problem was because I was using "https://localhost:3000" as my redirect URL instead of "https://localhost:3000/taskpane.html".

To fix the issue, I had to do the following:

In azure, specify the redirect URL as "https://localhost:3000/taskpane.html" (or whatever is configured in the webpack config)

In code, specify the same: authenticator.endpoints.registerMicrosoftAuth("xxxxxx-xxxx",{redirectUrl: "https://localhost:3000/taskpane.html"});