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

user_5969614 0
Viewed 31876

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?

visual-studio-code web base64 javascript
4 Answers

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

user_98448050

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');
}

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
user_24491990

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');
user_29116730
user_100690020
Related