how to pass basic authentication in api call in react native using asynch await fetch

Question

i want to call the basic authentication rest api in the react native.how to pass basic authentication headers.getting error - unhandled promise rejection - cant find base64 variable

  getDataFromAPI=async()=>
{

  var headers = new Headers();
  headers.append("Authorization", "Basic " + base64.encode("admin:admin@123"));
  const endpoint='url'
  const res=await fetch (endpoint,{headers:headers})
  const data=await res.json()
  this.setState({items:data})
}
  _renderItem=({item,index})=>{
    let{cardText,card,cardImage}= styles
return  (
  <TouchableOpacity style={card}>
          <Text style={cardText}>{item.id} Reactor Status:  {item.ph}</Text>
  </TouchableOpacity>
)
}

Does this answer your question? [Basic authentication with fetch?](https://stackoverflow.com/questions/43842793/basic-authentication-with-fetch) — wiesson, Feb 14 '20 at 06:57
fetch takes a second argument so that you can pass custom headers — wiesson, Feb 14 '20 at 06:58
what exactly is your error or what do you want other than what you have achieved? — Gaurav Roy, Feb 14 '20 at 07:15
getting error - possible unhandled promise rejection - cant find variable base64 — krishna mohan, Feb 14 '20 at 07:26
it says the base64 is not defiend, are you defining it somewhere, perhaps its a package ? @GauravRoy — Ahmed Khattab, Feb 14 '20 at 07:46

score 0 · Answer 1 · answered Feb 14 '20 at 07:52

installed npm i -S base-64 and imported import {decode as atob, encode as btoa} from 'base-64'

and i got the response from the basic authentication rest api in react native code

getDataFromAPI=async()=>
{

  var headers = new Headers();
  headers.append("Authorization", "Basic " + btoa("admin:admin@123"));
  const endpoint='url'
  const res=await fetch (endpoint,{headers:headers})
  const data=await res.json()
  this.setState({items:data})
}

score 0 · Answer 2 · answered Feb 14 '20 at 07:58

Firstly, it depends on what authentication method you are using at server side but as of above code you can try below

    fetch("https://www.majhgaon.com/app/supplier/add_report", {
            method: "POST",
            headers: {
              'Accept': 'application/json',
              "key-name": "kay-value",
            },
          body: JSON.stringify({
                  ....
               }) 
          })

how to pass basic authentication in api call in react native using asynch await fetch

2 Answers2