React oauth2 authentication not working when request is sent

i am trying to integrate social authentication for my react site which i am using drf for the server side, here i am using react-oauth2/google library because the react-google-login npm package seem to be depreciated, so unlike react-google-login that once a request is sent to google from the client side it return an accesstoken and refresh token that is automatically sent to django's end through a callback requesting django authtoken and also sending/comparing users data if any. react-oauth2/google on the other hand tend to only give me just one token called code. i sent it to my server side and it returned wrong credential. error

i am using social_django for my drf server side

AUTH.JS

const GoogleLoginFunc = useGoogleLogin({
        flow: 'auth-code',
        onSuccess: async (codeResponse) => {
            console.log(codeResponse);
            
            // const tokens = await axios.post(
            //     'http://localhost:3000/auth/google', {
            //         code: codeResponse.code,
            //     });

            // console.log(tokens);
            SocialGoogleLoginFunc(codeResponse.code)
        },
        onError: errorResponse => console.log(errorResponse),
    });






<GoogleLogin
                            
                            onSuccess={GoogleLoginFunc}

                            // onSuccess={credentialResponse => {
                            //     console.log(credentialResponse.credential);
                            //     SocialGoogleLoginFunc(credentialResponse.credential)
                            //   }}


                            onError={() => {
                                console.log('Login Failed');
                            }}

                            useOneTap
                            />;

GOOGLEAUTH.JS

const SocialGoogleLoginFunc=(accesstoken,app_id,app_secret)=>{
// console.log(`MY CREDENTIALS ${app_id},${app_secret}`)
// let client_id='nILBGJCOSiaLKDyRZeFpHmUoyDw0PgChrkEGzjkj'
// let client_secret='fkUSbr5mtR6oIX3osX51zS1ycbWOfNWGvEjhhKwVQvBb3rJ8gRN1BW2gkFMiPBfBKq3437IC3joXQUEFxPRs1PSXfSgKehOCwoRJoNgjtAzI6ZXwdjyX3RyZfTKKb8hE'

// console.log(client_secret.includes(' '))
// http://127.0.0.1:8000/client/auth/convert-token
// grant_type:"convert_token",
// client_id: client_id,
// client_secret: client_secret,
// backend:"google-oauth2", 
// token:accesstoken
// http://127.0.0.1:8000/
fetch('http://127.0.0.1:8000/auth/api/register-by-access-token/social/google-oauth2/',{
   
    method: "POST",
    body: JSON.stringify({
        
        access_token:accesstoken

    }),
    headers: {
        "Content-Type": 'application/json;charset',
        "accept":'application/json;charset'

    }

})
.then(response=>{
    return response.json()
}).then(data=>{
   try{
    console.log(data)
    localStorage.setItem('access_token',data.access_token)
    localStorage.setItem('refresh_token',data.refresh_token)
   }catch(error){
    console.log(error)
   }

})

}

export default SocialGoogleLoginFunc

Back to Top