Access token in React app SSO hosted in a Dynamics 365 web resource

Question

I have a Reactjs app (aka Single-page Application) that is uploaded in Dynamics 365 Customer Engagement (formerly CRM) as a web resource. This web resource or app is displayed in an IFRAME inside an entity form and therefore this small app already has direct access to Dynamics 365 data using the Xrm object. All good.

What I'm trying to accomplish with this app is to get it to connect to SharePoint via Microsoft Graph API and upload files and create folders.

Since the user is already signed in to Dynamics 365 and Azure AD (I guess), it is not necessary to display another popup login screen to the user.

In the msal wiki, there are 2 additional parameters that can be passed to the userAgentApplication to inform AAD that the user already signed in and they are login_hint and domain_hint. I passed these two parameters but nothing happens. Notice in the snippet below that I put logs. Only componentWillMount, before and after are logged in the console.

Not sure what is missing here.

componentWillMount() {
    console.log('componentWillMount');
    try {
        console.log('before');

        var userAgentApplication = new UserAgentApplication(applicationConfig.clientID, applicationConfig.authority, function (errorDesc, token, error, tokenType) {
            // Called after loginRedirect or acquireTokenPopup
            console.log('callback called');
        }, {cacheLocation: 'localStorage'});

        userAgentApplication.acquireTokenSilent(["user.read"], null, null, "&[email protected],&domain_hint=mydomain.com")
            .then(token => console.log('token', token))
            .catch((err) => console.log('err', err));

        userAgentApplication.acquireTokenSilent(["user.read"], "&[email protected],&domain_hint=mydomain.com")
            .then(token => console.log('token', token))
            .catch((err) => console.log('err', err));

        console.log('after');

    }
    catch (e) {
        console.log('caught error: ', e);
    }
}

Anwar Anwar · Accepted Answer · 2019-01-22T18:42:51

After spending 3 days on, I will answer my own question.

There are 2 issues I found:

I need to call userAgentApplication.loginPopup and pass the [email protected] to login_hint in the extraParameters, then call acquireTokenSilent. The userAgentApplication will check if there is an existing authroization.
The second issue is that acquireTokenSilent doesn't execute at all. Neither successes nor fails and there is an open issue in github.

Access token in React app SSO hosted in a Dynamics 365 web resource

1 Answers