Asana OAuth flow shows "Waiting for authorization. If nothing is happening, try again."

[Sameer_Mehra]

When attempting to initiate the OAuth flow from Asana - (using a url like this ) - the flow is correctly working, and the resulting window even correctly calls window.opener.postMessage(), as required in the app approval checklist. I can confirm that the message is received, since I am using the following snippet in the Asana window:

window.addEventListener('message', function(event) {
    console.log('Received message:', event.data);
    console.log('message:', event)
});

And it shows what you can see in the images for success and error. What is going on? To clarify the error message of Waiting for authorization. If nothing is happening, try again. only appears AFTER the message has been received, so I am sure the message is receiving the Asana window, it just isn’t being accepted. I cannot determine what in the JS is causing this error, but there is something about this postMessage that reaches the Asana window, but is ‘rejected’ in favor of this opaque error.

See screenshots below. Server is Google cloud run, dockerized.

[Phil_Seeman]

Can you post the HTML source of your App Component’s auth page?

(FYI I moved your post to the Developers & API > App Components section underneath the API section.)

[Sameer_Mehra]

Deny and Accept requests/responses shown. Unless you meant the initial redirect page?

Appreciate your thoughts here.

[Phil_Seeman]

Hmm, that looks right to me. Not sure what the issue is…

@Andrew-asana maybe you can help?

[Sameer_Mehra]

Any thoughts here? Still seeing the same issue with no helpful error message. If I could just get a better sense of the js error, I would have a much better sense of why this is happening.

[Sameer_Mehra]

Well, ultimately this is now working but to be perfectly honest, I’m not sure what happened. Just documenting some of the steps I took in case it helps:

1. Temporarily hard-coded the expected response for the ‘deny’ case, exactly as written in the approval checklist, and hosted this as a static file as a temporary redirect url. Doing this actually did show the expected message on the Asana side (“You denied authorization of the app.”). One of my theories is that this seems to have ‘unlocked’ something on the asana side, because once I switched back to non-hard-coded, it seems to have worked. App component approval checklist
2. Double checked on my backend that there wasn’t an issue with the request to the token endpoint (“https://app.asana.com/-/oauth_token”), since there was a moment in my testing where the redirect url didnt match - had to re-match them up again (the redirect url that started the flow should match the one passed in the call to the token api)
3. Security Headers - temporarily added cors headers like so to the callback response:

{
        'Strict-Transport-Security': 'max-age=31556926; includeSubDomains',
        'Cache-Control': 'no-store, no-cache, must-revalidate, max-age=0',
        'Pragma': 'no-cache',
        'Expires': '0',
        'X-Content-Type-Options': 'nosniff'
}

4. (Just a recommendation) - error in my backend should not return the ‘deny’ html, as this caused some confusion on my side, and asana may have been waiting for the request without it ever being received.

One of these things or a combination seems to have fixed it… I appreciate the Asana team’s help along the way.

[Sunil_Chauhan]

Facing same issue, I am new to building apps for Asana, have implemented a OAuth flow, but in my case window.opener is none.

Not sure where to post the message, I am using Asana sandbox currently.

[Mikhail_Melikhov]

I’ve mocked auth flow with a test app, and in my tests window.opener reliably holds a reference to the tab that initiated the redirect. From there I’m able to postMessage back to the opener as expected.

What I can imagine could potentially cause empty window.opener is some strict security setting or enterprise policy isolating tabs more aggressively or browser plugins intercepting the redirect.

[Sunil_Chauhan]

Thanks for the response and the time taken to verify it.

I am still facing the same issue, I am using ngrok right now to locally test the app would it make the difference?

Flow I am using is as follows:

1. User goes to Project and adds the App.
2. Click on Connect button, this opens up a new tab where my site is loaded.
3. User logs in and clicks on allow(on my website)
4. Redirect to /oauth_authorize with code challenge.
5. Callback URL is called, I am able to get the token as well. Then I return back the window.opener.postMessage(“success”, “asana url”) this is part of page that gets rendered.

at last step, it just says
”oauth/?code=2%2F1212…d89-182dd911e7f3:12 Uncaught TypeError: Cannot read properties of null (reading ‘postMessage’)
at window.onload (oauth/?code=2%2F1212…-182dd911e7f3:12:23)”