Using an authorization header with Fetch in React Native

Question

I m trying to use fetch in React Native to grab information from the Product Hunt API  I ve obtained the proper Access Token and have saved it to State  but don t seem to be able to pass it along within the Authorization header for a GET request   Here s what I have so far   var Products   React createClass     getInitialState  function         return         clientToken  false        loaded  false              componentWillMount  function          fetch api token link  api token object         then  response    gt  response json           then  responseData    gt              console log responseData           this setState             clientToken  responseData access token                              then      gt            this getPosts                    done           getPosts  function         var obj           link   https   api producthunt com v1 posts         object            method   GET           headers               Accept    application json              Content-Type    application json              Authorization    Bearer     this state clientToken             Host    api producthunt com                              fetch api posts link  obj         then  response    gt  response json           then  responseData    gt            console log responseData                   done           The expectation I have for my code is the following    First  I will fetch an access token with data from my imported API module After that  I will set the clientToken property of this state to equal the access token received  Then  I will run getPosts which should return a response containing an array of current posts from Product Hunt    I am able to verify that the access token is being received and that this state is receiving it as its clientToken property  I am also able to verify that getPosts is being run   The error I m receiving is the following        error   unauthorized oauth    error description   Please supply a valid access token  Refer to our api documentation about how to authorize an api request  Please also make sure you require the correct scopes  Eg   private public   for to access private endpoints      I ve been working off the assumption that I m somehow not passing along the access token properly in my authorization header  but don t seem to be able to figure out exactly why

User · Answer

I had this identical problem  I was using django-rest-knox for authentication tokens  It turns out that nothing was wrong with my fetch method which looked like this            let headers     Content-Type    application json        if  token          headers  Authorization      Token   token              return fetch   api instruments     headers           then res   gt          I was running apache    What solved this problem for me was changing WSGIPassAuthorization to  On  in wsgi conf    I had a Django app deployed on AWS EC2  and I used Elastic Beanstalk to manage my application  so in the django config  I did this    container commands    01wsgipass      command   echo  WSGIPassAuthorization On   gt  gt     wsgi conf

User · Answer

It turns out  I was using the fetch method incorrectly   fetch expects two parameters  an endpoint to the API  and an optional object which can contain body and headers   I was wrapping the intended object within a second object  which did not get me any desired result   Here s how it looks on a high level   fetch  API ENDPOINT   OBJECT       then function res        return res json             then function resJson        return resJson          I structured my object as such   var obj         method   POST     headers         Accept    application json        Content-Type    application json        Origin            Host    api producthunt com         body  JSON stringify        client id     API KEY         client secret     API SECRET         grant type    client credentials

User · Answer

Example fetch with authorization header   fetch  URL GOES HERE         method   post       headers  new Headers         Authorization    Basic   btoa  username password           Content-Type    application x-www-form-urlencoded             body   A 1 amp B 2

User · Answer

completed    id    gt        var details              id   id               var formBody           for  var property in details            var encodedKey   encodeURIComponent property           var encodedValue   encodeURIComponent details property            formBody push encodedKey         encodedValue             formBody   formBody join   amp          fetch markcompleted            method   POST           headers                 Accept    application json                Content-Type    application x-www-form-urlencoded                     body  formBody                 then  response    gt  response json             then  responseJson    gt                console log responseJson   res JSON                if  responseJson status     success                     console log this state                   alert  your todolist is completed                                        catch  error    gt                console error error

[javascript] Using an authorization header with Fetch in React Native

Examples related to javascript

Examples related to oauth-2.0

Examples related to react-native

Examples related to fetch-api