I'm using Google's YouTube API for authentication and Firebase Firestore for storing user data. The issue I'm facing is that after successfully authenticating a user to access their YouTube API, none of the data (like id_token, access_token, refresh_token) is being passed to my Firestore database.
Here's my Dashboard.js file where the authentication and Firestore logic resides:
import React, { useEffect, useContext } from 'react';import { CLIENT_ID, SCOPES } from '../googleOAuth';import { db } from '../firebase';import { AuthContext } from '../AuthContext';import { addDoc, collection } from 'firebase/firestore';function Dashboard() { const { currentUser } = useContext(AuthContext); const userId = currentUser ? currentUser.uid : null; const loadGapi = () => { gapi.load('client:auth2', initClient); }; const initClient = () => { gapi.client.init({ clientId: CLIENT_ID, scope: SCOPES }).then(() => { console.log("GAPI Initialized"); }); }; const handleAuthClick = async () => { const response = await gapi.auth2.getAuthInstance().signIn(); const id_token = response.getAuthResponse().id_token; const access_token = response.getAuthResponse().access_token; const refresh_token = response.getAuthResponse().refresh_token; if (userId) { try { await addDoc(collection(db, 'users'), { id_token, access_token, refresh_token, userId }); console.log("Document successfully written!"); } catch (error) { console.error("Error writing document: ", error); } } }; useEffect(() => { const script = document.createElement("script"); script.src = "https://apis.google.com/js/api.js"; script.onload = loadGapi; document.body.appendChild(script); }, []); return (<div><button onClick={handleAuthClick}>Give YouTube Access</button></div> );}export default Dashboard;Any help on why the data is not being stored in Firestore would be greatly appreciated. Thank you!