base 64 encode and decode a string in angular (2+)

Question

How to encode or decode a string in angular 2 with base64 ??? My front-end tool is Angular 2. I had a password string, before passing it to API I need to base64 encode. Since in service base64 encoded string will be decoded.

So I am looking for some base64 encode/decode library for Angular2/Typescript and some options.

Thanks!!!

https://developer.mozilla.org/en/docs/Web/API/WindowBase64/Base64_encoding_and_decoding — Thakur, Feb 01 '17 at 05:16

Robby Cornelissen · Accepted Answer · 2017-06-26T09:32:50.983

237

Use the btoa() function to encode:

console.log(btoa("password")); // cGFzc3dvcmQ=

To decode, you can use the atob() function:

console.log(atob("cGFzc3dvcmQ=")); // password

edited Jun 26 '17 at 09:32

answered Feb 01 '17 at 05:15

Robby Cornelissen

91,784
22
134
156

2

Before using this you may want to confirm if your target browsers support this: https://caniuse.com/#search=btoa – edrian Oct 12 '17 at 15:56
@edrian Should be OK as long as you're not supporting a very old version of IE. – Robby Cornelissen Oct 13 '17 at 07:00
how would I typecast a variable as base 64? Im using FileReader and getting base64 string as the result – virtualLast Jan 10 '18 at 14:53
@virtualLast Not sure what you mean. It's just a string, what do you want to cast it to? – Robby Cornelissen Jan 10 '18 at 15:43
I found an ImageData type and wondered if there was a Base64 Type or something similar, I've set it as string for now but wondered if there was something better – virtualLast Jan 11 '18 at 16:08
9

Just a word of caution that btoa() and atob() do not support utf-8 characters! – darwin Feb 20 '18 at 07:34
@darwin exactly, so how to with utf-8? – Robert Aug 30 '19 at 18:31
1

@Robert this should work: https://stackoverflow.com/questions/30106476/using-javascripts-atob-to-decode-base64-doesnt-properly-decode-utf-8-strings – darwin Sep 01 '19 at 08:20
Is there anyway to use this in html ? – TheMuyu Aug 05 '20 at 22:39
@TheMuyu Yes, like you use any JavaScript in HTML. – Robby Cornelissen Aug 05 '20 at 22:41
@RobbyCornelissen how ? can you explain ? – TheMuyu Aug 05 '20 at 22:50
@TheMuyu [How to use JavaScript in HTML](https://www.google.com/search?&q=how+to+use+javascript+in+html). – Robby Cornelissen Aug 05 '20 at 22:53

Eros Mazza · Answer 2 · 2021-09-15T16:13:39.923

25

From Angular 12 btoa() and atob() functions are deprecated. Use these instead:

console.log(Buffer.from("Hello World").toString('base64'));
// SGVsbG8gV29ybGQ=
console.log(Buffer.from("SGVsbG8gV29ybGQ=", 'base64').toString('binary'))
// Hello World

Note: you must explicit encoding!

edited Sep 15 '21 at 16:13

answered Sep 14 '21 at 14:10

Eros Mazza

304
3
7

7

getting `ReferenceError: Buffer is not defined` – Pierre Oct 07 '22 at 10:05
I got this error too. After some research, I noticed that the deprecation warning of the btoa function says: "This function is only provided for compatibility with legacy web platform APIs and should never be used in new code, because they use strings to represent binary data and predate the introduction of typed arrays in JavaScript. For code running using Node.js APIs, converting between base64-encoded strings and binary data should be performed using Buffer.from(str, 'base64') andbuf.toString('base64')". So it may be used for APIs, not for client side code. – NFTX Oct 10 '22 at 16:09
2

`ReferenceError: Buffer is not defined` error you can solve doing: installing Buffer, with npm i buffer and import it where you call the function See [Convert a string to base64 in JavaScript. btoa and atob are deprecated](https://stackoverflow.com/a/70733727/7757505) – kergrau Nov 08 '22 at 17:12
4

Thoose deprecations are a false alert and cames from the nodeJS api, that is needed by angular tools but will not be present in browser context. You must use btoa/atob in browser platform an Buffer in server platform. Using window.atob instead of atob is a workaround to get rid of it. See https://github.com/microsoft/TypeScript/issues/45566 – max-lt Nov 26 '22 at 11:24

VIKAS KOHLI · Answer 3 · 2020-05-09T19:50:54.060

5

For encoding to base64 in Angular2, you can use btoa() function.

Example:-

console.log(btoa("stringAngular2")); 
// Output:- c3RyaW5nQW5ndWxhcjI=

For decoding from base64 in Angular2, you can use atob() function.

Example:-

console.log(atob("c3RyaW5nQW5ndWxhcjI=")); 
// Output:- stringAngular2

edited May 09 '20 at 19:50

answered Nov 27 '17 at 08:00

VIKAS KOHLI

8,164
4
50
61

score 4 · Answer 4 · answered Feb 01 '17 at 05:17

4

Use btoa("yourstring")

more info: https://developer.mozilla.org/en/docs/Web/API/WindowBase64/Base64_encoding_and_decoding

TypeScript is a superset of Javascript, it can use existing Javascript libraries and web APIs

answered Feb 01 '17 at 05:17

shusson

5,542
34
38

score 2 · Answer 5 · answered Mar 28 '18 at 10:03

2

Use btoa() for encode and atob() for decode

text_val:any="your encoding text";

Encoded Text: console.log(btoa(this.text_val)); //eW91ciBlbmNvZGluZyB0ZXh0

Decoded Text: console.log(atob("eW91ciBlbmNvZGluZyB0ZXh0")); //your encoding text

answered Mar 28 '18 at 10:03

Yasintha

17
4

8

It's awesome that you want to help, but this answer doesn't add any extra value, since it is a copy of the accepted answer. On SO we like to avoid repetition. Please consider removing this answer. – ViG Mar 28 '18 at 10:11

score -1 · Answer 6 · answered Oct 26 '22 at 09:40

If you want a more complete solution, you can use the turbocommons library. Just install it:

npm install turbocommons-ts

And then call the method you need:

import { ConversionUtils } from 'turbocommons-ts';

console.log(ConversionUtils.stringToBase64('hello'));
console.log(ConversionUtils.base64ToString('aGVsbG8='));

This library is open source and extensively tested. More info here:

https://turboframework.org/en/blog/2022-10-26/encode-decode-base64-strings-javascript-typescript-php

base 64 encode and decode a string in angular (2+)

6 Answers6

Linked