Search code examples
react-nativedjango-rest-frameworkcsrffetch-apidjango-rest-auth

csrf issue in fetch API call from react native


I am using the following code from react-native mobile application to make a social authentication call to dj-rest-auth local link. However my Facebook authentication succeeds each time and then the fetch (or axios) local API call executes, which runs perfectly for the first time/run returning me the token but thereafter on every other runs, it gives me an error saying missing or invalid csrf token. I can't used the Django docs getCookie function as it gives Document error since this is a react-native mobile application. Please guide how to properly have API calls using csrf from the mobile app, with the code being used below (which is inside an async function):

fetch(
    "http://192.168.1.102:8080/dj-rest-auth/facebook/",
    {
      method: "POST",
      headers: {
        'Accept': 'application/json',
        'Content-Type':'application/json',
      },
      xsrfCookieName:"csrftoken",
      xsrfHeaderName:'X-CSRFToken',
      body:JSON.stringify({access_token:resolvedToken})
    }
  )
  .then(resp => resp.json())
  .then(data => {
    console.log(data);
  }  
  )
  .catch(error => console.log(error))

The logout function also give the missing or invalid csrf error, which is written below for reference:

async function Logout() {
  fetch(
    "http://192.168.1.102:8080/dj-rest-auth/logout/",
    {
      method: "POST",
      headers: {
        'Accept': 'application/json',
        'Content-Type':'application/json',
      },
      xsrfCookieName:"csrftoken",
      xsrfHeaderName:'X-CSRFToken'
    }
    )
  .then(resp => resp.json())
  .then(data => {console.log(data)})
  .catch(error => console.log(error))
}

Solution

  • The issue above is resolved by removing "Session Authentication" from your default REST authentication classes in settings.py and keeping the "Basic Authentication" and "Token Authentication" enabled.

    'rest_framework.authentication.BasicAuthentication',
    'rest_framework.authentication.TokenAuthentication',
    

    Source: https://github.com/Tivix/django-rest-auth/issues/164#issuecomment-860204677