In my next.js application, I’m trying to implement google photos library api. But in this case i want to get google photos library picker just like google drive picker. But when I try to open the picker i see this error.

403 error

It is also generating access token and also gives array type data if i use it on axios api method. But i want it to be in a picker if possible .

This is my code. Correct me if I’m doing it wrong.

const GooglePhotosPicker = ({ onPick }) => {
  useEffect(() => {
    const loadGisClient = () => {
      window.onGoogleLibraryLoad = () => {
        const client = google.accounts.oauth2.initTokenClient({
          client_id: process.env.CLIENT_ID,
          scope: "https://www.googleapis.com/auth/photoslibrary.readonly",
          callback: (tokenResponse) => {
            if (tokenResponse.error) {
              console.error(
                "Error obtaining access token:",
                tokenResponse.error
              );
              return;
            }
            initializePicker(tokenResponse.access_token);
          },
        });

        document.getElementById("authorize_button").onclick = () => {
          client.requestAccessToken();
        };
      };

      const script = document.createElement("script");
      script.src = "https://apis.google.com/js/api.js";
      script.onload = () => {
        gapi.load("picker", { callback: onPickerApiLoad });
        window.onGoogleLibraryLoad();
      };
      document.body.appendChild(script);
    };

    loadGisClient();
  }, []);

  const onPickerApiLoad = () => {
    console.log("Picker API loaded");
  };

  const initializePicker = (accessToken) => {
    const picker = new google.picker.PickerBuilder()
      .addView(google.picker.ViewId.PHOTOS)
      .setOAuthToken(accessToken)
      .setDeveloperKey(process.env.KEY)
      .setCallback(pickerCallback)
      .build();
    picker.setVisible(true);
  };

  const pickerCallback = (data) => {
    if (data.action === google.picker.Action.PICKED) {
      const file = data.docs[0];
      onPick(file);
    }
  };

  return (
    <div>
      <button id="authorize_button">Pick a Photo from Google Photos</button>
    </div>
  );
};

export default function Page() {
  const handlePickedPhoto = (photo) => {
    console.log("Selected photo:", photo);
  };
  return (
    <div>
      <script src="https://accounts.google.com/gsi/client" async defer></script>
      <GooglePhotosPicker onPick={handlePickedPhoto} />
    </div>
  );
}

and yes console.google.com project does also have the permission of this scope https://www.googleapis.com/auth/photoslibrary.readonly

Tring to find the solution days but couldn’t find it. If anybody finds or knows what’s wrong with the code then please let me know.