Deno - Base64 Encoding & Decoding Examples

This tutorial is about how to perform Base64 encoding and decoding in Deno, including Base64 URL.

Base64 is an encoding that represents data as an ASCII string by converting data into a radix64-representation. Base64 works by joining the bits of all characters and re-grouping the bits as groups of 6-bit. Each group is then converted to its corresponding Base64 character based on the below table.

Base64 Table

Here's a basic example of how to encode the first three letters of 'woolha.com'.

Source w o o
Bits 0 1 1 1 0 1 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 1 1
Base 64 d 2 9 v

From the above example, you can see that every 3 characters (3 x 8-bit) are converted to 4 Base64 characters (4 x 6-bit). That means the Base64 representation of a value is always longer than the value. Sometimes the number of bits is not a multiplication of 6. In that case, padding needs to be added so that the last encoded block has four Base64 characters. Each padding is represented by = character.

Source w    
Bits 0 1 1 1 0 1 1 1 0 0 0 0                        
Base 64 d w = =

Base64 encoding is commonly used to include data in URLs. To use Base64 encoding in URLs, certain characters need to be encoded into special percent-encoded hexadecimal sequences. + is encoded to %2B%, / becomes %2F, and = becomes %3D. Therefore, there is a modified version of Base64 for URL that replaces + and - with - and _ respectively.

If you want to perform Base64 encoding in Deno, you don't need to do the low-level implementation. Deno already provides the functions for encoding value to Base64 as well as decoding Base64 value as part of Deno std modules. Below are the usage examples.

Using Deno std Encoding Module

The encoding and decoding of Base64 and Base64URL can be done using base64 and base64url modules respectively.

Base64 Encoding & Decoding

For basic encoding and decoding, we are going to use decode and encode functions of base64 module. To use the module, import the module by its URL and re-exports the used functions in deps.ts. By importing all dependencies on deps.ts, it becomes easier to change the version of the module.

deps.ts

  import {
    decode as base64Decode,
    encode as base64Encode,
  } from 'https://deno.land/std@0.82.0/encoding/base64.ts';

  export { base64Decode, base64Encode };

Here's the function for encoding a value to Base64. The passed value must be either ArrayBuffer or string

  function encode(data: ArrayBuffer | string): string

Example:

  import { base64Encode } from './deps.ts';

  const encodedValue = base64Encode('woolha.com');
  console.log(`encodedValue: ${encodedValue}`);

Output:

  encodedValue: d29vbGhhLmNvbQ==

Alternatively, it's also possible to pass the value as Uint8Array. To convert a string into a Uint8Array, you can use TextEncoder.

  const textEncoder = new TextEncoder();
  const encodedValue = base64Encode(textEncoder.encode('woolha.com'));
  console.log(`encodedValue: ${encodedValue}`);

The module also provides a function for decoding a Base64 value.

  function decode(b64: string): Uint8Array

You need to pass the encoded value as a string. Because the return type of the function is Uint8ArrayTextDecoder, decode the value using TextDecoder in order to get the string value.

Example:

  import { base64Decode } from './deps.ts';

  const textDecoder = new TextDecoder('utf-8');
  const decodedValue = textDecoder.decode(base64Decode(encodedValue));
  console.log(`decodedValue: ${decodedValue}`);

Output:

  decodedValue: woolha.com

Base64 URL Encoding & Decoding

Deno has another module named base64url that can be used to perform Base64 URL encoding & decoding. First, import and re-export decode and encode functions of base64 module in deps.ts.

  import {
    decode as base64UrlDecode,
    encode as base64UrlEncode,
  } from 'https://deno.land/std@0.82.0/encoding/base64url.ts';

  export { base64UrlDecode, base64UrlEncode };

Below is the function for encoding a value to Base64 URL.

  function encode(uint8: Uint8Array): string

It requires you to pass the value as Uint8Array. Therefore, you need to encode the string value using TextEncoder first.

Example:

  import { base64UrlEncode } from './deps.ts';

  const textEncoder = new TextEncoder();
  const encodedValue = base64UrlEncode(textEncoder.encode('https://www.woolha.com/'));
  console.log(`encodedValue: ${encodedValue}`);

Output:

  encodedValue: aHR0cHM6Ly93d3cud29vbGhhLmNvbS8

Below is the function to decode a Base64 URL encoded value.

  function decode(b64url: string): Uint8Array

Example:

  import { base64UrlDecode } from './deps.ts';

  const textDecoder = new TextDecoder('utf-8');
  const decodedValue = textDecoder.decode(base64UrlDecode(encodedValue));
  console.log(`decodedValue: ${decodedValue}`);

Output:

  decodedValue: https://www.woolha.com/

That's it for this tutorial. You should be able to perform the encoding and decoding easilly as you can use the functions provided by Deno.

Related Posts: