authResponse always undefined

[IanBoyte]

authResponse is always undefined.

const [openPicker, authResponse] = useDrivePicker();
  const handleOpenPicker = () => {
    openPicker({
      clientId: process.env.REACT_APP_GOOGLE_CLIENTID ?? "",
      developerKey: process.env.REACT_APP_GOOGLE_APIKEY ?? "",
      viewId: "DOCS",
      viewMimeTypes: getAcceptMimeTypes(),
      // token: token, // pass oauth token in case you already have one
      // showUploadView: true,
      // showUploadFolders: true,
      supportDrives: true,
      // multiselect: true,
      // customViews: customViewsArray, // custom view
      callbackFunction: (data) => {
        if (data.action === "cancel") {
          console.log("User clicked cancel/close button");
        }
        console.log(data);
        if (data && data.docs) {
          const cloudFiles = data.docs.map<CloudFile>((doc) => {
            return {
              url: "https://www.googleapis.com/drive/v3/files/" + doc.id, // doc.url,
              filename: doc.name,
              mimeType: doc.mimeType,
            };
          });
          downloadFiles(
            cloudFiles,
            getGoogleDriveFile,
            authResponse?.access_token
          );

        }
      },
    });
  };

[Mykola-Veryha]

import  { useEffect } from 'react';
import useDrivePicker from 'react-google-drive-picker'

function App() {
  const [openPicker, authResponse] = useDrivePicker();  

  const handleOpenPicker = () => {
    let config: PickerConfiguration = {
      clientId: clientId,
      developerKey: developerKey,
      viewId: "DOCS",
      viewMimeTypes: mimeTypes,
      showUploadView: true,
      showUploadFolders: true,
      supportDrives: true,
      multiselect: props.multiselect,
      customScopes: ['https://www.googleapis.com/auth/drive.file'],
      callbackFunction: handleGoogleDrive,
    };

    const defaultScopes = ['https://www.googleapis.com/auth/drive.readonly'];
    const client = google.accounts.oauth2.initTokenClient({
      client_id: clientId,
      scope: (config.customScopes
          ? [...defaultScopes, ...config.customScopes]
          : defaultScopes
      ).join(' '),
      callback: (tokenResponse: authResult) => {
        console.log(tokenResponse);
        config.token = tokenResponse.access_token;
        openPicker(config);
      },
    })

    client.requestAccessToken()
  }

  return (
    <div>
        <button onClick={() => handleOpenPicker()}>Open Picker</button>
    </div>
  );
}

export default App;

[Mykola-Veryha]

The library initializes a global variable "google" that can be used to get an access token.

[Aqibrafiq001]

how to get refresh token @Mykola-Veryha ?

[Mykola-Veryha]

how to get refresh token

In this callback you can get the refresh tocken: tokenResponse.access_token Just save it to State and use where you need

callback: (tokenResponse: authResult) => {
   console.log(tokenResponse);
   config.token = tokenResponse.access_token;
   openPicker(config);
},

[SaddemAmine]

Why is the hook returning authResponse if it's going to stay undefined / we won't be able to use it? In my case it's only accessible after the current page I'm working on hot-reloads.

[jimjacob29]

The library initializes a global variable "google" that can be used to get an access token.

how to import the google variable?

[yashsharma999]

I realized that authResponse does return an access_token. But, it is undefined when we try to access it in the callback function.

To solve this you can do the following in your React component:

  const [openPicker, authResponse] = useDrivePicker();

  const { access_token } = authResponse || {};

  let token = useRef<string | undefined>(undefined);

  useEffect(() => {
    if (access_token !== undefined) {
      token.current = access_token;
    }
  }, [access_token]);

Now, you can access token.current in your component.