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

227

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

81,630
19
117
142

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
8

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

18

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

200
1
7

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

7,314
3
48
49

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,138
32
35

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

7

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

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

5 Answers5

Linked