Convert a string to base64 in JavaScript. btoa and atob are deprecated

Question

I have been working on some projects in VS Code lately and suddenly started receiving notifications in my code that btoa and atob are now deprecated. I can't find any resource for this besides VS Code. If this is true, what alternative is there?

Those functions are decidedly *not* deprecated. It would help if you provided the exact error you're seeing. — I wrestled a bear once., Aug 19 '21 at 13:58
According to VS Code they are deprecated. It advises to use Buffer.from(str, "base64") but that does not exist in JavaScript. — Caleb Prenger, Aug 19 '21 at 14:05
It [definitely does exist in Javscript](https://nodejs.org/api/buffer.html#buffer_static_method_buffer_from_array), in Node. [`btoa`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/btoa) is for the web. You question has the `web` tag, so I assumed you were using the web, but your IDE seems to think you're writing Node. So, which is it? — I wrestled a bear once., Aug 19 '21 at 14:09
They are alive an well in the [HTML Standard](https://html.spec.whatwg.org/multipage/webappapis.html#dom-btoa-dev) (updated today). Is this the same issue: [base64 - How to encode base 64 string in ReactJS when btoa is deprecated?](https://stackoverflow.com/questions/68493486/how-to-encode-base-64-string-in-reactjs-when-btoa-is-deprecated). On [MDN](https://developer.mozilla.org/en-US/docs/Glossary/Base64) is says: "Note that btoa() expects to be passed binary data, and will throw an exception if the given string contains any characters whose UTF-16 representation occupies more than one byte." — chrwahl, Aug 19 '21 at 14:09
I wrestled a bear once had a good idea. I am writing a Vue project so it probably thinks I am trying to write in node. — Caleb Prenger, Aug 19 '21 at 14:30
For more context: https://github.com/nodejs/node/issues/40754 — Roko C. Buljan, May 26 '23 at 20:13

score 132 · Answer 1 · answered Jan 25 '22 at 15:29

132

The Node btoa() and atob() functions are the only ones that have been deprecated. However, if you're working on the DOM code (front-end) and see this deprecated notice, you can use the window object to get around it.

window.atob()

For more info

answered Jan 25 '22 at 15:29

Kamal Thennakoon

1,439
1
7
8

Cassio Seffrin · Answer 2 · 2023-07-17T13:17:40.157

TLDR: These functions btoa and atob are deprecated for Node JS. If you are coding for the web browser you just need to prepend the window to get rid of this deprecation mark.

to encode :

window.btoa('test')

result: dGVzdA==

to decode

window.atob('dGVzdA==')

result: test

Otherwise, you could install buffer with "yarn add buffer" or "npm i buffer" to run on browser. The buffer module's API is identical to node's Buffer API.

Here is a React sample using javascript module to browser, but it can run on any modern javascript frontend app that uses webpack or parcel or even vanilla javascript with script src:

//this will run on browser    
import React from "react";
import { Buffer } from 'buffer';
export default function App() {

  const encodeBase64 = (data) => {
    return Buffer.from(data).toString('base64');
  }
  const decodeBase64 = (data) => {
    return Buffer.from(data, 'base64').toString('ascii');
  }

  return <div>
    {'encoded test to base64 = ' + encodeBase64('test')}<br />
    {'decoded dGVzdA== to ascII = ' + decodeBase64('dGVzdA==')}
  </div>;
}

The above react hook will result:

encoded test to base64 = dGVzdA==
decoded dGVzdA== to ascII = test

btoa(): accepts a string where each character represents an 8bit byte. If you pass a string containing characters that cannot be represented in 8 bits, it will probably break. Probably that's why btoa is deprecated.

atob(): returns a string where each character represents an 8-bit byte.

If you are using nodejs just replace atob and btoa with Buffer. Here is the official documentation Buffers in nodejs:

//With NodeJS

export const encodeBase64 = (data) => {
    return Buffer.from(data).toString('base64');
}
export const decodeBase64 = (data) => {
    return Buffer.from(data, 'base64').toString('ascii');
}

score 37 · Answer 3 · answered Nov 16 '21 at 16:02

37

Still within VS Code, I had a look into the comments for the deprecated btoa(str) function. It suggests the following as a replacement:

const base64Str = Buffer.from(str, 'utf8').toString('base64');

answered Nov 16 '21 at 16:02

Jamie M.

379
4
6

1

How about `atob`? – Aseer KT Miqdad Nov 18 '21 at 09:56
10

@AseerKTMiqdad simply do the oposite: `const str = Buffer.from(base64str, 'base64').toString('utf8');` – Tristan Pct Nov 20 '21 at 10:51
23

The Buffer class is not available in the browser.. – Peter Jun 08 '22 at 06:30
@Peter, for browser apps, you need to install the `Buffer` lib via `npm i buffer` then import it with `import { Buffer } from "buffer";` – sareno Nov 02 '22 at 12:49
this one worked for me, var byteCharacters = Buffer.Buffer.from(base64, 'base64').toString('binary'); – Mr. Leeds Jan 30 '23 at 22:56

score 27 · Answer 4 · edited Jan 03 '23 at 07:34

btoa and atob are only deprecated for Node.js. If you prepend the window. you will get rid of this deprecation mark.

On the other hand, if you are trying to use btoa or atob in the back-end side, you definitely should use Buffer interface.

References:

Convert a string to base64 in JavaScript. btoa and atob are deprecated

4 Answers4

Linked