Bad Request: /dj-rest-auth/google/ . Request Failed with status code 400

With dj-rest-auth, google login, I keep getting Request failed with status code 400 and cant figure out what's wrong. All the other API end points are working, except for social login. The page redirects to Google Signup Page, and then the URL also contains the "key", but doesnt seem to login for some reason. Kindly help.

//Action.js
 export const googleLogin = ( code ) => async dispatch => {
    if ( !localStorage.getItem('access') ) {
        const config = {
            headers: {
                "Content-Type": "application/json"
            }
        };
        const body = JSON.stringify({ code })
        try {
            const res = await axios.post("http://localhost:8000/dj-rest-auth/google/", body, config)
            dispatch ({
                type: TYPE.LOGIN_SUCCESS,
                payload: res.data
            })
        } catch (err) {
            dispatch ({
                type: TYPE.LOGIN_FAIL,
                error: err.message
            })
        }
    } else {
        dispatch( verify() );
        dispatch( getUser() );
    }
}

//reducer.js
const AuthReducer = (state=initialState, action) => {
    const { type, payload } = action;
    switch (type) {
        case TYPE.LOGIN_SUCCESS:
            localStorage.setItem('access', payload.access);
            return {
                ...state,
                access: payload.access,
                isAuthenticated: true,
                user: payload.user,
                message: "Login has successed"
            }
        case TYPE.LOGIN_FAIL:
            localStorage.removeItem('access');
            return {
                ...state,
                access: null,
                isAuthenticated: false,
                user: null,
                message: "Login has failed"
            }
        default:
            return state;
    }
}

//Header.js
const Layout = (props) => {
    let location = useLocation();
    useEffect (() => {
        const values = queryString.parse(location.search);
        const code = values.code;
        if ( code ) {
            props.googleLogin( code );
        } else {
            props.verify();
            props.getUser();
        }
        // eslint-disable-next-line
    },[location])

    return (
        <div>
            < Header />
            {props.message? <Alert message={props.message}/>:null}
            {props.children}
            
        </div>
    )
}

Back to Top