Books API has not been used in project ******** before or it is disabled. Error code 403

Question

I'm trying to migrate to Google Identity Services. When I log a user in and try to get info from their Google Books account I get "error code 403. Books API has not been used in project ****** before or it is disabled"

I checked the project number that was being used before I tried to migrate to Google Identity Services and the project number is totally different from the one stated in the error, and I definitely have the Book API enabled.

I use the following scripts in the react index.html page:

<script src="https://apis.google.com/js/api.js" async defer></script>

script src="https://accounts.google.com/gsi/client" async defer></script>

App.js

import { Routes, Route, Link } from "react-router-dom";

import Home from "./pages/Home";
import CreatePost from "./pages/CreatePost";
import Login from "./pages/Login";
import Logout from "./pages/Logout";

import "./App.css";

import { useEffect, useState } from "react";

function App() {
  const [isAuth, setIsAuth] = useState(false);
  
  useEffect(()=>{
    console.log(isAuth);
  }, [isAuth]);

  var tokenClient;

  function gisInit() {
    tokenClient = window.google.accounts.oauth2.initTokenClient({
      client_id: *********,
      scope: 'https://www.googleapis.com/auth/books',
    });
  }

  function gapiStart() {
    window.gapi.client.init({
    }).then(function() {
      // fetch the Books API
      window.gapi.client.load('books', 'v1');
      
    }).then(function(response) {
      console.log('books loaded');
      gisInit()
    }, function(reason) {
      console.log('Error: ' + reason.result.error.message);
    });
  }
  useEffect(()=>{
    window.gapi.load('client', gapiStart);  
  })
  
  return (
    <>
    <nav>
      <Link to="/">Home</Link>
      <Link to="/createpost">Create</Link>
      { !isAuth ? <Link to="/login">Login</Link> : <Link to="/logout">Logout</Link> }
    </nav>
    <Routes>
      <Route path="/" element={ <Home /> } />
      <Route path="/createpost" element={ <CreatePost /> } />
      <Route path="/login" element={ <Login setIsAuth={ setIsAuth } /> } />
      <Route path="/logout" element={ <Logout setIsAuth={ setIsAuth } /> } />
    </Routes>
    </>
    
  );
}

export default App;

Login.js

import {auth, provider} from "../firebase-config";
import { signInWithPopup, GoogleAuthProvider } from "firebase/auth";
import { useNavigate } from "react-router-dom";
import { useEffect } from "react";

// var url = 'books/v1/mylibrary/bookshelves/4/volumes?fields=totalItems, items(id, volumeInfo/title, volumeInfo/authors, volumeInfo/publishedDate, volumeInfo/publisher, volumeInfo/industryIdentifiers, volumeInfo/imageLinks)'; //A local page

function getData(access_token){
    // console.log("token " + access_token);
    window.gapi.client.setToken({"access_token":access_token});
    const fetchUserData = new Promise(function(resolve, reject){
        
        const request = window.gapi.client.request({
            'method': 'GET',
            // 'path': 'books/v1/mylibrary/bookshelves/4/volumes?fields=totalItems, items(id, volumeInfo/title, volumeInfo/authors, volumeInfo/publishedDate, volumeInfo/publisher, volumeInfo/industryIdentifiers, volumeInfo/imageLinks)'
            'path': 'books/v1/mylibrary/bookshelves/4/volumes?fields=totalItems, items(id)',
        });

        // // Execute the API request.
        request.execute( function(response) {
            // const obj = response.result;
            resolve(response);
            
            reject("Error");          
    
        });   
    });
        
    fetchUserData.then((value)=>{
    console.log(value);         
    }).catch((error)=>{
        console.log(error)
    });
}

function Login({ setIsAuth }){

    useEffect(()=>{
        signInWithGoogle();
    });

    let navigate = useNavigate();
    provider.addScope("https://www.googleapis.com/auth/books");

    const signInWithGoogle = () =>{
        signInWithPopup(auth, provider).then((result)=>{
            // This gives you a Google Access Token. You can use it to access the Google API.
            const credential = GoogleAuthProvider.credentialFromResult(result);
            let token = credential.accessToken;

            if(result.user){
                setIsAuth(true);
                getData(token);
                console.log(result.user.displayName);
                navigate("/");
            }
            
        }).catch((error)=>{
            if(error.code === 'auth/popup-closed-by-user'){
                setIsAuth(false);
                navigate("/");
            }
        });
    }

    return (
        <>
        <p>Logging in...</p>
                       
        </>
    )
}

export default Login;

What do I have to do to be able to use the right project?

If I swap out the firebase auth and just use the Google Identity Services auth then I can get the information back from the signed in users Google Books account. Looking at the browser network tab the "authorization: Bearer" is the same.

import { useNavigate } from "react-router-dom";
import { useEffect } from "react";

// var url = 'books/v1/mylibrary/bookshelves/4/volumes?fields=totalItems, items(id, volumeInfo/title, volumeInfo/authors, volumeInfo/publishedDate, volumeInfo/publisher, volumeInfo/industryIdentifiers, volumeInfo/imageLinks)'; //A local page

function getData(){
    const fetchUserData = new Promise(function(resolve, reject){
        
        const request = window.gapi.client.request({
            'method': 'GET',
            'path': 'books/v1/mylibrary/bookshelves/4/volumes?fields=totalItems, items(id, volumeInfo/title, volumeInfo/authors, volumeInfo/publishedDate, volumeInfo/publisher, volumeInfo/industryIdentifiers, volumeInfo/imageLinks)'
        });

        // // Execute the API request.
        request.execute( function(response) {
          // const obj = response.result;
          resolve(response);
        
          reject("Error");          

        });   
    });
    
    fetchUserData.then((value)=>{
        console.log(value);      
    }).catch((error)=>{
        console.log(error)//error shows an empty array when controller abort called
    });    
}

function Login({ setIsAuth }){
    var tokenClient;
    var access_token;
    let navigate = useNavigate();

    function getToken(){
        tokenClient.requestAccessToken();
    }

    function initGis(){
        tokenClient = window.google.accounts.oauth2.initTokenClient({
            client_id: *******,
            scope: 'https://www.googleapis.com/auth/books',
            callback: (tokenResponse) => {
              access_token = tokenResponse.access_token;
              if(access_token !== undefined){
                setIsAuth(true);
                getData();
                navigate("/");
              }  
            },//end of callback:
            
        });
    }

    useEffect(()=>{
        initGis();
        getToken();  
    });

    return (
        <>
        <p>Logging in...</p>
        </>             
    )
}

export default Login;

Answer 1

All I needed to do to solve the problem is when making the firebase project select the Google Cloud Platform project from the dropdown list.