I am creating a website using next js and django and trying to authenticate with Google social auth . For this I am using djoser library and other library for JWT like django-simple-jwt. At first everting is okay . I can select my google account but it retuns bad request as 400 status . When I tried using postman it gives following error : ** "non_field_errors": [ "State could not be found in server-side session data." ]**
Google.tsx file
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { googleAuthenticate } from '../actions/auth.action';
import { useRouter } from 'next/router'
const Google = ({ googleAuthenticate }) => {
const router = useRouter();
const code = router.query.code;
const state = router.query.state;
useEffect(() => {
if (state && code) {
googleAuthenticate(code, state)
}
}, [state, code]);
return (
<div className='container'>
<div className='jumbotron mt-5'>
<h1 className='display-4'>Welcome to Auth System!</h1>
<p className='lead'>This is an incredible authentication system with production level features!</p>
<hr className='my-4' />
<p>Click the Log In button</p>
<Link href='/LoginApi' ><button>Login</button></Link>
</div>
</div>
);
};
export default connect(null, { googleAuthenticate })(Google);
my redux action file as :
export const googleAuthenticate = (state, code) => async dispatch => {
console.log("GoogleAuthenticate called -------------------")
const access = (typeof window !== "undefined") ? localStorage.getItem('access') : '';
console.log("google auth = " + code)
console.log("google auth = " +state)
if (state && code && !access) {
const config = {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
};
const details = {
'state': state,
'code': code
};
const formBody = Object.keys(details).map(key => encodeURIComponent(key) + '=' + encodeURIComponent(details[key])).join('&');
console.log("url link " + `${BACKEND_URL}/auth/o/google-oauth2/?${formBody}`)
try {
const res = await axios.post(`${BACKEND_URL}/auth/o/google-oauth2/?${formBody}`, config);
console.log("login success from google " + res.data)
dispatch({
type: GOOGLE_AUTH_SUCCESS,
payload: res.data
});
dispatch(load_user());
} catch (err) {
console.log("error in google login " + err);
dispatch({
type: GOOGLE_AUTH_FAIL
});
}
}
};```