Getting c.trim error form google oauth2 web client requestAccessToken function

Question

I am using google Oauth2 client script but in that "requestAccessToken" function geving me 2 error. See on bellow image

Here I am loading the 'https://accounts.google.com/gsi/client' script dynamically and after it been loaded I am createing a tokenClient by using initTokenClient funciton.

When user click on the button I am checking is token is allready avaiable or not if not then I am sending a request for google auth popup tokenClient.current.requestAccessToken({ prompt: 'consent' }); But this requestAccessToken funciton giveing me a error called c.trim() is not a funciton. As per as I found it's comming form the internal implementation of this funciton

I am also getting another CORS error in the same place.

Reproduce Link: https://codesandbox.io/s/nostalgic-ives-wngw3v?file=/src/Picker.jsx

Error Image

import React, { useEffect, useRef, useState } from 'react';
import loadScript from 'load-script';

const GOOGLE_INDENTITY_URL = 'https://accounts.google.com/gsi/client';

const clientId = '865996907937-t2ca9nu95hv87f204t11gikb2rqm3s4v.apps.googleusercontent.com';
const scope = ['https://www.googleapis.com/auth/drive.readonly'];

let scriptLoadingStarted = false;

export default function TryPicker() {
  const tokenClient = useRef();
  const isGoogleAuthReady = () => {
    return !!window.google?.accounts?.oauth2;
  };

  const doAuth = () => {
    console.log('yea', tokenClient.current, tokenClient.current.requestAccessToken);
    // // Use Google Identity Services to request an access token
    tokenClient.current.requestAccessToken({ prompt: 'consent' });
  };

  const onChoose = () => {
    if (!isGoogleAuthReady()) {
      return null;
    }

    doAuth();

    return undefined;
  };

  const onAuthLoad = () => {
    tokenClient.current = window.google.accounts.oauth2.initTokenClient({
      client_id: clientId,
      scope,
      callback: async response => {
        if (response.error !== undefined) {
          throw response;
        }

        console.log(response);
      },
    });
  };

  useEffect(() => {
    if (isGoogleAuthReady()) {
      // google api is already exists
      // init immediately
      onAuthLoad();
    } else if (!scriptLoadingStarted) {
      // load google api and the init
      scriptLoadingStarted = true;
      loadScript(GOOGLE_INDENTITY_URL, onAuthLoad);
    } else {
      // is loading
    }
  });

  return (
    <div>
      <button className="text-darker" onClick={onChoose} type="button">
        Get access token
      </button>
    </div>
  );
}

Answer 1

As mentioned by yash, it's probably cuz you are using array. This is how used it for multiple scopes.

scope: 'https://www.googleapis.com/auth/user.birthday.read \
     https://www.googleapis.com/auth/profile.agerange.read \
     https://www.googleapis.com/auth/user.gender.read',
```