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