Sp-dev-fx-webparts: [Question] react-aad-implicitflow - Could not get Graph access token using SPFX 1.0 & ADAL JS

[honb]

I'm trying to get Graph access token after user is signed in but I got an error:
"Token renewal operation failed due to timeout"
"window.parent.AuthenticationContext()._renewStates;" is undefined.

The sample "react-aad-implicitflow" is working fine (both are using "adal-angular": "^1.0.12") with old version of SPFX. I'm not sure if the root cause is version of Adal or SPFX, do you have any clue for this issue?

Refer: https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/call-microsoft-graph-from-your-web-part#limitations-when-using-adal-js-with-sharepoint-framework-client-side-web-parts

Thanks in advance.

[waldekmastykarz]

adal-angular: ^1.0.12 is not a specific version reference but a range. Could you please verify that you are using adal-angular 1.0.12?

[honb]

I checked in node_modules folder, its adal-angular 1.0.12

[honb]

@waldekmastykarz : are you able to get graph access token with spfx 1.0?

[waldekmastykarz]

@honb I haven't tried it with SPFx v1.0 yet

[waldekmastykarz]

I've just submitted a PR with updated sample for SPFx 1.0 (#160). While updating the code I haven't noticed any major changes between SPFx v1.0 and previous versions related to using ADAL JS.

[honb]

@waldekmastykarz : Thanks for your help.
I tried to run your sample but still does not work.
I was able get access token for 'graph.microsoft.com' or 'outlook.office.com' in the first time. After 1 hour token is expired and I could not get access token anymore (renew token).

AAD app info:

• has been consented
• Multi-tenanted is True
• Manifest: "oauth2AllowImplicitFlow": true, "oauth2AllowUrlPathMatching": false,
  

[waldekmastykarz]

Sorry to hear that @honb. How are you renewing the token?

[honb]

I'm using standard methods in WebPartAuthenticationContext.js

this.authCtx.acquireToken(graphResource, (error: string, token: string))

without any modification, my graph resource can be outlook or graph. Basically, I just replace my ClientID in AdalConfig file.
User is able to login, hmmmm. Although token is not expired yet I still get the same message.
My AAD app is working fine with my custom web application, but not working in SP web part. So I think my issue is not in AAD app.

Thanks,
Hon

[honb]

@waldekmastykarz : I tried with /_layouts/15/workbench.aspx instead of /temp/workbench.html

[mtringuyen]

Hello @waldekmastykarz ,
Yes, we met the issue when using the /_layouts/15/workbench.aspx to test the app. I has even tried to bundle and upload to cdn then add the web part to a page but it doesn't work.
It works with the local host workbench.html.
And It also works when I renamed workbench.html to workbench.aspx, uploading to a document library.

I think the SP online environment doesn't up to date with sp-loader or sp-webpart-workbench!
Could you help us verify the issue?

Thank you,

Tri

[waldekmastykarz]

I've just verified it and the same code indeed works with the local workbench, but doesn't work with the hosted version. I'll try to see if I can find the differences in code and will let you know as soon as I find anything.

[honb]

@waldekmastykarz thank you so much
One issue I found when using adalJS with spfx: It could not be shown on SP classic UI page & IE11

[waldekmastykarz]

I've found a solution for one part of the issue at least: ADAL JS not working in the hosted workbench. It turns out, that for some reason, if the ADAL JS iframe is smaller than 106px, the web part inside is not being initiated and the ADAL JS login callback is not processed. I've just submitted a PR with the fix to the sample. Looking forward to hear if it's solving your issues.

[honb]

Weird. I still get the same error...
Besides that, there is an error from console

[waldekmastykarz]

Are you sure that you're using adal-angular v1.0.12? You can verify that by checking the value of the version property in the ./sp-dev-fx-webparts/samples/react-aad-implicitflow/node_modules/adal-angular/package.json file

[nickaranz]

I am experiencing the same issue [email protected] - I updated the WebPartAuthenticationContext.js with the new code that sets the width and height but I get the time out error when using the hosted workbench (https://myurl.sharepoint.com/_layouts/15/workbench.aspx) - I have also tried deploying the app to my test tenant and adding it to classic and modern UI pages, I get the same error. Also, as a side note, on classic publishing pages using SPFx parts and adal.js the popup fails to close after login.

[honb]

@waldekmastykarz : Sorry for late reply. I'm pretty sure about adal version (v1.0.12). Also, i tried to run your sample but nothing changes :(
My issue is the same as Nickaranz

[waldekmastykarz]

@nickaranz @honb could you guys share your code somewhere where I could have a look at it and see if I can repro the issue?

[honb]

I only update clientID by my AAD app from your sample.
Can you please try to replace a new clientID instead of "00000000-0000-0000-0000-000000000000"?

AAD app info:

• has been consented
• Multi-tenanted is True
• Manifest: "oauth2AllowImplicitFlow": true, "oauth2AllowUrlPathMatching": false,

[waldekmastykarz]

@honb I see. In the Chrome developer tools, could you please check the Network tab for the request to AAD (filter eg. by auth) and see its response? It could be that your application needs to be approved by the admin first and that the current setup incorrectly reports the issue as a timeout rather than an AAD flow error. The response you would get in that case would be similar to:

https://localhost:4321/temp/workbench.html#error=interaction_required&error_description=AADSTS65001%3a+The+user+or+administrator+has+not+consented+to+use+the+application+with+ID+%27000d88c5-acb2-41a8-b9ae-de739123d0d6%27.+Send+an+interactive+authorization+request+for+this+user+and+resource.%0d%0aTrace+ID%3a+a8ac5b98-4c9c-40b7-ac56-c1c6bf570800%0d%0aCorrelation+ID%3a+9896b70b-041b-4d3f-ad95-118afe91fb43%0d%0aTimestamp%3a+2017-03-26+18%3a40%3a38Z&state=927e9d62-612b-407d-83c6-8cb235b2882d%7chttps%3a%2f%2fgraph.microsoft.com

[nickaranz]

I think i figured it out. In my case the issue was caused by the office fabric button. The sample uses a React <Button /> component for the login action. This was behaving as a submit button and refreshing the host page when inside the SP context. This refresh breaks the communication with the popup/iframe auth. This refresh goes almost unnoticed on the workbench but is really obvious on a publishing page. Try swaping the <Button /> with an anchor or any html element with an onclick binding to test this out. <a onClick={() => { this.signIn(); }}

[honb]

@waldekmastykarz My ADD app has been consented and that's why i don't see the error message as you mention.
It sent a request to: https//login.microsoftonline.com/common/oauth2/authorize?response_type=token&client_id=

@nickaranz : Looks like you are right. But it worked on my local workbrench only, not /_layouts/15/workbench.aspx

I'm using Office Fabric UI in my app as well

[nickaranz]

@honb Yes I have confirmed it doesn't work for /_layouts/15/workbench.aspx but it now works everywhere else for me. I have also noticed that /_layouts/15/workbench.aspx doesn't save web parts on the page after a refresh. If I manually refresh the remote workbench my spfx parts are gone. My suspicion is that when the iframe loads the workbench after redirect it doesn't have the web part and thus not code to handle the auth callback.

[waldekmastykarz]

The confusing part is that it's working for me on the hosted workbench. It could be that we're running on two different versions of the workbench and that it's behaving differently, so perhaps that's something we should check out as well.

[nickaranz]

One more piece to the puzzle, at least on my case. Internet Explorer (on my SP tenant, it defaults to IE 10) throws an error when trying to set the iframe height during callback. I just added an if(iframe){//set height} around the fix @waldekmastykarz provided and things are working out now.

[waldekmastykarz]

@nickaranz so you can set the width but not the height and setting the width only is sufficient for it to work as expected?

[leilaferradas]

Hello @waldekmastykarz ,
I have tried the application in workbench and it works fine there, but, in the production tenant the popup does not close and the page is loading inside the popup.
could you help me?
Thank you

[nickaranz]

I had the same issue. Make sure the login button is not type='submit' - In my case replacing the office fabric button and using a input type='button' fixed my reload problem. Hope this helps.

[leilaferradas]

Thank you so much, now it works

[leilaferradas]

It is possible to avoid the login button? I tried this.signIn() at the beginning of the render but the browser has to allow popup windows

[honb]

@leilaferradas : If you want to avoid login button then I think you have to set adal.Config.popUp = false.
I tried that way but it gets into a loop: signIn ==> signIn ==> signIn. Because the component is new one and this.authCtx is new one as well so that this.authCtx.getCachedUser() = null
I was able to make it work with adal.js and no SPFX.
How about your test result?

[VidhiGarg]

Hi,
I am also getting the same error 'Uncaught (in promise) Token renewal operation failed due to timeout'. I am getting this error even when I am running the sample code with just the client id replaced with mine.
I have checked and the adal version is 1.0.12.
Any pointers would be really helpful.

Thanks in advance.

[leilaferradas]

Hi, finally, I avoid the login button and transferred to the login when it
was saved, using the save button.
I have not tried out SPFX.

On Thu, Jul 6, 2017 at 12:35 PM, honb [e-mail] wrote:

@leilaferradas https://github.com/leilaferradas : If you want to avoid
login button then I think you have to set adal.Config.popUp = false.
I tried that way but it get in a loop: signIn ==> signIn ==> signIn.
Because the component is new one and this.authCtx is new one as well so
that this.authCtx.getCachedUser() = null
I was able to make it work with adal.js and no SPFX.
How about your test result?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/SharePoint/sp-dev-fx-webparts/issues/150#issuecomment-313432899,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Ab9SBhhF2Kk-oKKS1oXiM2CpWSuH6htIks5sLP64gaJpZM4MZQCs
.

[kngrace]

I found a typo in the patch code while attempting to debug token timeout/silent issues that my coworker kept encountering but I rarely did. You only encounter it when requesting a token not already in your cache (except during the initial login where you request a token) and only if you've added more than one token into your storage (often triggered when we refresh our remote workbench). If neither of these occur to you, you won't encounter this error. It's based on the need to trigger the window callback function.

I have submitted a pull request to fix this bug and a second pull request to update guidance documentation that references the buggy code.

Pull Request Details:
This update replaces the incorrect semi-colon separator with the correct comma separator. Without a correction, it is possible to encounter issues such as token renewal timeout or token renewal silent failure. Testing included turning on logging in adal-angular.js to observe changes.

When the existing array _renewStates is cast as a string (at the string.prototype.split() function or possibly in earlier code), that existing array is represented as "A String, representing the values of the array, separated by a comma" quote source.

[VidhiGarg]

Hi @waldekmastykarz ,

I am getting a weird issue where in IE11 the code in WebPartAuthenticationContext file to set width and height of iframe is unable to set it to 106px and the webpart does not work.
Whereas when I set the width and height directly in the adal library then it gets set correctly and the webpart works.
Not sure why is it so, could you please help me.

NB: It works fine in Chrome and Firefox

Thanks,
Vidhi

[waldekmastykarz]

@VidhiGarg it could have something to do with the loading order or other conditional styles/code that override the dimensions you set. Have you checked what CSS styles are applied to it in IE developer tools?