Next js Django Djoser Google authentication/

Viewed 331

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
            });
        }
    }
};```
0 Answers
Related