I am trying to load Google Picker.
I am using this npm package https://www.npmjs.com/package/google-picker
When loading the picker, the auth windows show up, and I can select my Google account.
After auth is done, it tries to open the Google Picker iframe.
It is at this point the iframe fails to load and I get the error
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin
I have searched this issue and many solutions say make sure to add your domain to the authorized JS origins in google console
I have done this! The domain is definitely in the authorized domains for the client. Google sign in works with my app.. but I just can't seem to get the Picker to work.
I have tried both running from localhost and uploading to the server. But I get the same error.
The server I am using is HTTPS. And the iframe URL for picker is HTTPS too. So this should not be a problem.
What else can I try? I am out of options. I am following the API exactly. I have put in all the right keys.
The reason Google Picker was not showing was actually unrelated to the console error.
Even though the console error appeared, the picker still works.
But I thought it was not working because I was using the pickadate library which had css that conflicts with Google Picker.
More info about that issue here: https://github.com/amsul/pickadate.js/issues/619