Axios: Can't find variable: btoa

[tonxxd]

Describe the bug
Using Basic Auth with axios in an expo app causes this error. It was working before upgrading both axios and expo, not sure what is causing the issue but seems btoa function is not available in expo envirorment.

To Reproduce
Make a get request with auth headers from an expo app

let axiosInstance = axios.create({
  baseURL: 'http://example.com',
  auth: {
    username: 'user',
    password: 'password'
  }
});
axiosIstance.get('/path/to');

Environment:

• Axios Version 0.18.0
• expo 32.0.0
• react 16.5

Additional context/Screenshots

[sjerdo]

I'm experiencing this same bug in axios 0.19.0. Downgrading to 0.18.0 seems to help for now.

[sjerdo]

Well, seems like the btoa polyfill has been removed, which causes this issue: https://github.com/axios/axios/compare/v0.18.0...v0.19.0

Also removed in v0.18.1
https://github.com/axios/axios/compare/v0.18.0...v0.18.1

[Samyang061195]

Hi, I'm new in GitHub, however let me try to help.
Solved the current issue (Axios Removed btoa variable Polyfill) with these steps: (Used in React-Native Project)

1. Install base-64 npm package, npmjs.com/package/base-64 ,
2. You can set atob and btoa as global variables on React Native. Then, you won't need to import them on each file you need it. Add the following at beginning of your index.js, so that it can be loaded before another file uses atob and btoa:

import {decode, encode} from 'base-64'

if (!global.btoa) {
global.btoa = encode;
}

if (!global.atob) {
global.atob = decode;
}

Source : https://stackoverflow.com/questions/42829838/react-native-atob-btoa-not-working-without-remote-js-debugging.

Hopefully Helps.

Thanks.

[aqweider]

put "axios": "0.18.0" in project dependencies
that's worked for me

[yasuf]

@Alanscut

[Alanscut]

fixed by #2541

[MishraUdit]

Adding following LoC in application tag of AndroidManifest.xml helped me:
android:usesCleartextTraffic="true"

[sadikyalcin]

What's the status with this? Run into this with axios v19 and expo v35.

[syyam]

What's the status with this? Run into this with axios v19 and expo v35.

Any solution?

[Alanscut]

This has been fixed by #2541 , please wait for it to be merged

[syyam]

@Alanscut How much time does it usually requires?

[Alanscut]

@syyam It depends on when the v0.19.1 will be released. because PRs that not quite urgent will be merged after the release of new version.
@yasuf is it necessary to mege it now?

[SyneticDevOps]

@Alanscut Can you reopen this issue, since the bug still isn't solved?
Please close the ticket once the Merge Request has been merged.

Bug was introduced in #1689

[chinesedfan]

@Alanscut @SyneticDevOps According to #1689, it is not a bug, but an intentional change. If you want an out-of-box usage, you have to lock axios to ~0.18.0. Or you should add global btoa polyfill by yourself.

[proIT324]

⚠️ I have still the same issue with axios. Today I installed the latest version of axios (v0.19.2), however, the btoa error is still alive. Is there any solution to resolve the issue?

[ahmad3ttallah]

@proIT324 the same for me !!

[jebzaki]

@Alanscut @SyneticDevOps According to #1689, it is not a bug, but an intentional change. If you want an out-of-box usage, you have to lock axios to ~0.18.0. Or you should add global btoa polyfill by yourself.

[MahmudHamid]

This issue still exist.

[tattivitorino]

My app is in react-native and I ended up solving this with the following:
yarn add react-native-base64

in my login action:

import base64 from 'react-native-base64';

const authHeader = 'Basic ' + base64.encode(`${username}:${password}`);
const response = axios.post(LOGIN_ENDPOINT, {}, {
     headers: { 'Authorization': authHeader }
});

it worked!!!

[mattdamon108]

@chinesedfan What is your team's intention to remove btoa from Axios?

[edritech93]

same for me