AuthorizationManager.handleErrorResponse gives an INVALID_STATE error when called from an iFrame

[max-l]

In a browser single page app, I can solve the case where a "transfer.fileOperations.ls" request fails for lack of permission with the method : AuthorizationManager.handleErrorResponse

It works without problems.

I would like to get this to work with an iFrame, so that the web app doesn't get redirected, and instead open an iFrame, which calls the AuthorizationManager.handleErrorResponse.

Here is what I have tried:

1. Main window logs in, calls "ls", gets the error

2. iFrame is opened, it received the error object from the main window:

{    "authorization_parameters": {        "required_scopes": [
            "urn:globus:auth:scope:transfer.api.globus.org:all[*https://auth.globus.org/scopes/29f94847-8c7b-4c7b-b102-b3f3d5351e83/data_access]"        ],        "session_message": "Missing required data_access consent"    }

2. code inside the iFrame calls AuthorizationManager.handleErrorResponse with the error object.

The authorazation page loads correctly inside the iFrame, when I click on "allow",

I get the following error:
Error code: INVALID_STATE

Invalid state parameter: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdGF0ZV9pZCI6MzA2MTU4NTMsImV4cCI6MTc1MzEzNjMwM30.OsiLop1ArKwDR0qznX4sHNOXnqwCax2EGsHdUJ4pH-k'

This iFrame approach differs from the standard method, in that there are 2 browser windows (main window and iFrame), each with it's own AutherazationManager.

The error object is recieved by the first (auth manager), passed to the second one (in the iFrame)

Is there a way to make this work ?

[jbottigliero]

Out of the box, in v5 the AuthorizationManager only supports a redirect transport for the OAuth2 PKCE flow, you won't be able to avoid the mismatched state due to cross-frame restrictions.

One way to work around the system entirely for <iframe> usage might be to message the token responses using postMessage.

1. Parent Window
   • Configured AuthorizationManager
   • Listens for token messages from child, calling manager.addTokenResponse() when a message is received.
   • Dispatches login to the <iframe>
2. Frame:
   • Configured AuthorizationManager
   • Calls login() with a redirect to a page that calls handleCodeRedirect and passes the token with window.opener.postMessage(...)

The v6 release (currently a release candidate) does provide an additional experimental popup transport that might be suitable for your use case, or at the very least an implementation to draw inspiration from.

authorization.create({
   ...,
   transport: "popup"
});

Happy to figure out how we can make this easier, I'm thinking we could probably implement an "iframe" transport, just not sure it would be able to give the proper level of customization you might want when embedding in your application.