#CSRF issues

2 messages · Page 1 of 1 (latest)

quiet cobalt
#

Im trying to make a login in page on my project. Im using ReactJS for frontend and django for backend.
here's what the frontend look like
(1/2)

const fetchCSRF = async ()=>{
    const url = 'http://localhost:8000/members/getCookie'
    await fetch(url,{
        method:"GET",
        credentials:'include',
        headers:{'Content-Type':'application/json'},
    }).then(response =>{
        return response.text()
    }).then(data=>{
        console.log(data)
        return data
    })
    
    const csrfToken = getCookie('csrftoken')
    return csrfToken 
}

const getCookie = (name: string)=>{
    let cookieValue = null;
    if (document.cookie && document.cookie !== ''){
        let cookies = document.cookie.split(';')
        for (let i = 0; i < cookies.length; i++){
            let cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')){
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break
            }
        }
    }
    if (cookieValue === null){
        cookieValue = ''
    }
    console.log(cookieValue)
    return cookieValue
}

async function confirmSignup(username: string, password: string, email: string){
    const url = 'http://localhost:8000/members/signup'
    const CSRFToken = await fetchCSRF()
    fetch(url,{
        method:"POST",
        headers:{
            'Content-Type':'application/json', 
            'X-CSRFToken': CSRFToken
        },
        body:JSON.stringify({
            username:username,
            email:email,
            password:password,
        })
    }).then(response =>{
        if(!response.ok){
            throw new Error(response.statusText)
        }
        return response.text()
    }).then(data=>{
        console.log(data)
    })
}
#

(2/2)

and heres what part of the backend looks like:
@method_decorator(csrf_protect, name ='dispatch')
class Signup(APIView):
    permission_classes = {permissions.AllowAny}
    def post(self, request, format = None):
        data = self.request.data

        username = data['username']
        password = data['password']
        email = data['email']
        if User.objects.filter(username=username).exists():
            return HttpResponse("Try another username")
        else:
            # user = User.objects.create_user(username = username, email = email, password=password)
            # user.save()
            # return redirect("/")
            return HttpResponse(f"user: {username}, pass: {password}")

@method_decorator(ensure_csrf_cookie, name="dispatch")
class GetCSRFToken(APIView):
    permission_classes = {permissions.AllowAny}
    def get(self, request, format=None):
        csrf_token = get_token(request)
        return HttpResponse(csrf_token)

i can confirm that the cookieVal (within the getCookie function) that is printed in the console of the frontend is the same as the value i read in google's cookies. What am i doing wrong? i'm still getting a a 403 error, which dissappears after i get rid of the Signup() method decorator