Two okta-authenticated apps - trying to access one from the other within an i-frame

Hi,

I’m building an okta-authenticated web application (let’s call it app 1) that can stand alone or be accessed for certain REST calls within another app (let’s call it app 2) that we have access to but we do not own (or have the ability to modify beyond a few basic changes).

App 1 is using Django as a backend and a react frontend handling authorization flow with okta-auth-js and okta-react. App2 is SAML authenticated.

The problem arises when I try to make calls to app 1’s REST API within app 2. App 2 allows such things through the use of a modal I-Frame that can render browser pages.

If I’ve logged into app 1 in the browser already, the modal panel doesn’t need authentication and all seems well.

However if I’ve not logged into app 1 and I do a REST call from app 2, the modal panel shoots me a warning like:

[okta-auth-sdk] WARN: a saved auth transaction exists in storage. This may indicate another auth flow is already in progress.

I’m guessing that it’s detected the authorization in app 2 but I’m not sure what auth transaction its referring to in storage.

Given that app 2 requires authentication anyway, is there a way pass along that authentication? I already do some checking on all backend calls to verify their validity, I could do something similar there if I knew what to look for.

Thanks for you help!

Are these two applications hosted on the same domain? The SDKs store somethings in cookies to handle the login flow and will warn you if it detects that there is already a transaction in progress.

Are you making two authorize calls in a row, one for each app, instead of waiting for the first app to get tokens before requesting them for the second app?

I will note that the SDKs rely on storing the tokens in local storage, and that the key for this item in storage cannot be customized, so we do not recommend using the SDK for two different apps hosted on the same exact domain/subdomain/port as the tokens will be difficult (if not impossible) to store separately so that each set is available for each app.

I figured out what’s happening. well, I haven’t fixed the problem yet. But I at least figured out that it has nothing (I think) to do with the other app.

The i-frame fails when I begin the flow but never gives me a reason. So I retry the call in a new i-frame. The first flow is unfinished. That’s why (I think) it thinks there’s a flow in progress. The i-frame failed for some reason but the call to the authorization endpoint still took place.

1 Like