I have to Sign in twice so that I get the access_tocken

[AbjabjaSalahEddine]

here is my code : callbackFunction: (data) => { if (data.action === 'cancel') { console.log('User clicked cancel/close button') } if (data.action === 'loaded') { console.log(data) console.log(authResponse) } if (data.action === 'picked') { console.log(data) console.log(authResponse) .... } }

when I press the button the first time and I log in and pick , here is what I get :

SpreadSheets.js:30 {action: 'loaded'} SpreadSheets.js:31 undefined SpreadSheets.js:37 {action: 'picked', viewToken: Array(3), docs: Array(1)} SpreadSheets.js:38 undefined

but in the second time I do exactly the same I get :

SpreadSheets.js:30 {action: 'loaded'} SpreadSheets.js:31 {access_token: 'ya29.a0Ael9sCM4zjGFQRXj24vMshd5WQ7idWVB71smCz8_8uP…', token_type: 'Bearer', expires_in: 3599, scope: 'email profile openid https://www.googleapis.com/au…le https://www.googleapis.com/auth/drive.readonly', authuser: '0', …} SpreadSheets.js:37 {action: 'picked', viewToken: Array(3), docs: Array(1)} SpreadSheets.js:38 {access_token: 'ya29.a0Ael9sCM4zjGFQRXj24vMshd5WQ7idWVB71smCz8_8uP…', token_type: 'Bearer', expires_in: 3599, scope: 'email profile openid https://www.googleapis.com/au…le https://www.googleapis.com/auth/drive.readonly', authuser: '0', …}

what to do so that I get the access_token the first time?

[AbjabjaSalahEddine]

the authresponse is updated but not mounted

[Priitz]

the authresponse is updated but not mounted

And what are we supposed to do to use the authResponse with the value and not undefined? I've tried with a useState but it doesnt seems to work

[AbjabjaSalahEddine]

you should add a useEffect to watch the authresponse changes, and inside you add the code to be executed after login in. if you need a code snipppet I can look it up and send it to you

[Priitz]

yes! id like to have it thank you!

[AbjabjaSalahEddine]

Try this : `export default function SpreadSheets() {

const [openPicker , authResponse] = useDrivePicker();
const [spreadsheetId, setSpreadSheetID] = useState();

useEffect(() => { console.log(authResponse) console.log(spreadsheetId) //in my case I will read the content of a sheet if(authResponse && spreadsheetId){ const range = "A1:Z99"; // Replace with the name of your sheet const url = https://sheets.googleapis.com/v4/spreadsheets/${spreadsheetId}/values/${range}?access_token=${authResponse.access_token}; axios.get(url) .then(response => { console.log(JSON.stringify(response.data.values)) }) .catch(error => { console.error(error.response.data); }); } }, [authResponse,spreadsheetId])

const handleOpenPicker = () => { openPicker({ clientId: CLIENT_ID, developerKey: API_KEY, viewId: "SPREADSHEETS", callbackFunction: ( data ) => { if (data.action === 'cancel') { console.log('User clicked cancel/close button') } if (data.action === 'loaded') { console.log(data) } if (data.action === 'picked') { setSpreadSheetID(data.docs[0].id) } }, }) }

return (

handleOpenPicker()}>Import from Sheets

); }`

[Priitz]

Thank god its working! i was doing my logic in the callbackFunction where authResponse was undefined, thank you very much sir!

[AbjabjaSalahEddine]

I was doing the same beforeI tried to track how authresponse changes XD , you are welcome m8 , GL