Trying to make website to update googlesheets

Question

im trying to create a form to update googlesheets the project is in REACTJS, i followed this guide https://medium.com/@mheavers/storing-form-data-from-a-website-in-google-spreadsheets-using-javascript-react-a15aeb9143cb

now im facing a problem where i get the following error error: Request is missing required authentication credential. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project.

my code:

import React,{useState,useEffect} from 'react'
import {Form,Text} from 'informed'
import {gapi} from 'gapi-script'
const Forms=()=>{

    const [SignInStatus, setSignInStatus] = useState("")

    const SPREADSHEETID= ***my spreadsheet id**
    const apiKey= ***my api key***
    const clientID=***my oauth id***
    const SCOPE=['https://www.googleapis.com/auth/spreadsheets']

    const initClient=()=>{
        console.log("got key")
        gapi.client.init({
            'apiKey': apiKey,
            'clientId':clientID,
            'scope': SCOPE,
            'discoveryDocs': ['https://sheets.googleapis.com/$discovery/rest?version=v4'],

        }).then(()=>{
            gapi.auth2.getAuthInstance().isSignedIn.listen(SignInStatus)
            setSignInStatus(gapi.auth2.getAuthInstance().isSignedIn.get())
            
        })
    }
    const handleclientLoad=()=>{
        gapi.load('client:auth2',initClient)
    }
    useEffect(() => {
        handleclientLoad()
       
    }, [])
    const onFormSubmit=(submissionValues)=>{
        console.log(submissionValues)
        
        const params={
            spreadsheetId:SPREADSHEETID,
            clientId: clientID,
            range:'Sheet1',
            valueInputOption:'RAW',
            insetDataOption:'INSERT_ROWS'
        }
        const valueRangeBody={
            'majorDimension':'ROWS',
            'VALUES':[submissionValues]
        }

        let request=gapi.client.sheets.spreadsheets.values.append(params,valueRangeBody)
        request.then(function(response){
            console.log(response.result)
        },function (reason){
            console.log(reason.result.error)
            console.log("error: " + reason.result.error.message)
        })
    }
    return(
        <Form onSubmit={onFormSubmit}>
            <label>
                first name: 
                <Text field="name"/>
            </label>
            <button type="submit">Submit</button>
        </Form>

    )
}



export default Forms

Josh LS Josh LS · Accepted Answer · 2021-02-20T00:59:37

0

votes

This might not be what you want, but forms.google.com does exactly this already.

Trying to make website to update googlesheets

1 Answers