Auth redirect to blank page & `Cannot read properties of null (reading 'postMessage')`

transloadit / uppy

The next open source file uploader for web browsers :dog:

https://uppy.io

MIT License

29.18k stars 2.01k forks source link

Auth redirect to blank page & `Cannot read properties of null (reading 'postMessage')` #4107

Open S0c5 opened 2 years ago

S0c5 commented 2 years ago

Initial checklist

[X] I understand this is a bug report and questions should be posted in the Community Forum
[X] I searched issues and couldn’t find anything (or linked relevant results below)

Link to runnable example

No response

Steps to reproduce

how to reproduce?

Instgram app installed
- Android 11
1. open browser https://uppy.io/examples/dashboard/
2. connect with instagram
3. when the user authorizes Instagram app in the browser (chrome) is get redirected to a blank page

What is causing the error:

lost of context for window.opener when user is redirected through app to the authorization page.
```
window.opener.sendMessage({ token }) // at instagram/send-token
```

Work around?

we need to send the token via webSockets

Expected behavior

That I coud connect with instagram

Actual behavior

blank page at instagram/send-token/

mifi commented 2 years ago

Is this a duplicate of #2295 or a different issue?

arturi commented 2 years ago

Looks like the same. I wonder if WebSockets could be the answer indeed?

mifi commented 2 years ago

lost of context for window.opener

what does this actually mean in technical terms? what is a context? I'm not sure why WebSockets is a "magical solution".

Murderlon commented 2 years ago

It's also a bit hard to grasp for me what the up and downsides of using websockets for this particular case are.

StrixOSG commented 1 year ago

We noticed this issue as well, but also on a Mac (both Chrome and Safari). Not sure if it's related, but it seems close. Sign in, get redirected to a blank page, and this shows up in the console as an error:

Uncaught TypeError: Cannot read properties of null (reading 'postMessage') 
at send-token?uppyAuthToken=...

StrixOSG commented 1 year ago

Is there any updates on a fix or #4110 @mifi ? I've noticed this issue on Android for a while, but now that it potentially affects some users on Desktop, this is more of a concern to me. I should note some of our users get this, some don't. It's unclear why, and I also seem to be getting the same error on the Uppy home page when connecting my Instagram account.

mifi commented 1 year ago

If it can be reproduced somehow on desktop, that would make it easier to look into a fix

StrixOSG commented 1 year ago

I've done some testing locally, and couldn't come up with a fix, but I think I got much closer. It seems the likely culprit is window.opener.postMessage not having any context. In the browser, it complains that postMessage is null, which really it's because opener is null. For some reason the context is being lost (in some cases) and opener is null. I tried modifying things on the server side such as waiting for window.onload and then executing the window.opener.postMessage but to no avail. It might be client side where window.open() is called to redirect to Instagram that needs a bit more help. My best guess right now is that maybe for some Instagram accounts there is a few more redirects and it messes with opener context, but I'm not sure. Hopefully this sheds a bit more light at least and moves us closer to a fix. As suggested originally, webSockets may be the best solution here