Google sign in window

[indapublic]

Hi. Thanks for your awesome component. But I need help.

My code:

<GooglePicker
    {...googlePickerCredentials}
    multiselect={false}
    navHidden={true}
    authImmediate={false}
    onAuthenticate={token => console.warn('onAuthenticate: ' + token)}
    createPicker={(google, oauthToken) => {
        const googleViewId = google.picker.ViewId.DOCS
        const docsView = new google.picker.DocsView(googleViewId)
            .setIncludeFolders(true)
            .setSelectFolderEnabled(true)
        const picker = new window.google.picker.PickerBuilder()
            .addView(docsView)
            .setOAuthToken(oauthToken)
            .setDeveloperKey(googlePickerCredentials.developerKey)
            .enableFeature(google.picker.Feature.NAV_HIDDEN)
            .setCallback(data => {
                //
            })
        picker.build().setVisible(true)
    }}
>
    <button className="gdrive">
        <img src={googleDriveIcon} alt="Google Drive" />
        Select from Google Drive
    </button>
</GooglePicker>

Sometimes I receive this window and nothing happens when I clicked on Sign in button

Have you encountered this?

[kevalbhatt]

I am facing the same issue

[indapublic]

@kevalbhatt I decided this by removing component and rewriting the code using Google API

[noachr]

I too am experiencing this issue.

[sdoomz]

@noachr should be fixed in 0.0.9

[ermohit400]

could you please let me know what are the issues you are seeing in your console?

[schani]

@sdoomz I'm facing the same issue in a project that's unrelated to this (doesn't use react-google-picker). Could you point me to the commit that fixes it, please?

[sdoomz]

@schani probably you need to do something like https://github.com/sdoomz/react-google-picker/commit/b0d58eadf7a9d8c5e2acbccbf05afd3395f0b3c2#diff-4794d8bb386ede74f530ac134188922bR99

[schani]

@sdoomz Doesn't that just show an error message when the auth fails?

[sebaber]

@kevalbhatt I decided this by removing component and rewriting the code using Google API

You can avance with that? I can't get that working. Im facing with that error:

Invalid 'X-Frame-Options' header encountered when loading 'https://docs.google.com/picker?protocol=gadgets&origin=http://localhost:3020&navHidden=true&multiselectEnabled=true&hostId=localhost&relayUrl=http://localhost:3020/favicon.ico&nav=((%22all%22,null,%7B%22mimeTypes%22:%22image/png,image/jpeg,image/jpg%22%7D))&rpctoken=boautxffui7d&rpcService=p0iclbccx8wa&thirdParty=true&ppli=1': 'ALLOW-FROM http://localhost:3020' is not a recognized directive. The header will be ignored.

[happylinks]

If someone still got stuck on this, like me, I had to add this to the picker initialisation:

      .setAppId(appId)

So something like this:

    const picker = new window.google.picker.PickerBuilder()
      .addView(view)
      .setOAuthToken(oauthToken)
      .setAppId(appId)
      .setDeveloperKey(developerKey)
      .setCallback(onChange);

// Replace with your own project number from console.developers.google.com.
// See "Project number" under "IAM & Admin" > "Settings"

Edit: Still doesn't seem to work for all user accounts :(

Edit2: Changing "https://apis.google.com/js/api.js" to "https://apis.google.com/js/client.js" also seems to help.

Edit 3: And now for the actual fix; I switched to "auth2". window.gapi.load("auth2"); instead of window.gapi.load("auth"); And doAuth becomes:

  const doAuth = (callback) => {
    window.gapi.auth2.authorize(
      {
        client_id: clientId,
        scope: scope.join(" "),
        immediate: authImmediate,
      },
      callback
    );
  };

Gist here: https://gist.github.com/happylinks/0443f283cc4f1c05988608425b2426b0