# Base64

## CSR only

Start from generating random hex string.

function generateRandomHexString (numberOfBytes) {
  const radix = 16
  const start = -2
  return [...crypto.getRandomValues(new Uint8Array(numberOfBytes))]
    .map((m) => ('0' + m.toString(radix)).slice(start))
    .join('')
}

const hexString = generateRandomHexString(16)

console.log(hexString)
// Example: 5efa2c82e2f92b9ff88b3add3aed8124

### Encoding

It returns Base64-encoded ASCII string.

const encodedString = window.btoa(hexString)

console.log(encodedString)
// Example: NWVmYTJjODJlMmY5MmI5ZmY4OGIzYWRkM2FlZDgxMjQ=

### Decoding

It returns ASCII string.

const decodedSting = window.atob(encodedString)

console.log(decodedSting)
// Example: 5efa2c82e2f92b9ff88b3add3aed8124

console.log(hexString === decodedSting)
// Example: true

## SSR only

Start from generating random hex string.

import { randomBytes } from 'crypto'

function generateRandomHexString (numberOfBytes) {
  return randomBytes(numberOfBytes).toString('hex')
}

const hexString = generateRandomHexString(16)

console.log(hexString)
// Example: 5efa2c82e2f92b9ff88b3add3aed8124

// ...

### Encoding

It returns Base64-encoded ASCII string.

import { Buffer } from 'node:buffer'

// ...

const encodedString = Buffer.from(hexString).toString('base64')

console.log(encodedString)
// Example: NWVmYTJjODJlMmY5MmI5ZmY4OGIzYWRkM2FlZDgxMjQ=

// ...

It returns ASCII string.

### Decoding

import { Buffer } from 'node:buffer'

// ...

const decodedSting = Buffer.from(encodedString, 'base64').toString('ascii')

console.log(decodedSting)
// Example: 5efa2c82e2f92b9ff88b3add3aed8124

console.log(hexString === decodedSting)
// Example: true

## CSR/SSR (Thanks for `crypto-js`)

Start from generating random hex string.

import TypedArrays from 'crypto-js/lib-typedarrays'

function generateRandomHexString (numberOfBytes) {
  return TypedArrays.random(numberOfBytes).toString()
}

const hexString = generateRandomHexString(16)

console.log(hexString)
// Example: 5efa2c82e2f92b9ff88b3add3aed8124

// ...

### Encoding

It returns Base64-encoded ASCII string.

import Utf8 from 'crypto-js/enc-utf8'
import Base64 from 'crypto-js/enc-base64'

// ...

const encodedString = Base64.stringify(Utf8.parse(str))

console.log(encodedString)
// Example: NWVmYTJjODJlMmY5MmI5ZmY4OGIzYWRkM2FlZDgxMjQ=

// ...

It returns ASCII string.

### Decoding

import Utf8 from 'crypto-js/enc-utf8'
import Base64 from 'crypto-js/enc-base64'

// ...

const decodedString = Utf8.stringify(Base64.parse(str))

console.log(decodedSting)
// Example: 5efa2c82e2f92b9ff88b3add3aed8124

console.log(hexString === decodedSting)
// Example: true

## Reference

- [MDN Base64](https://developer.mozilla.org/en-US/docs/Glossary/Base64)
- [淺談 Base64 與應用實例分享](https://blog.errorbaker.tw/posts/cian/base64-qrcode/)
- [What is base64 Encoding and Why is it Necessary?](https://www.freecodecamp.org/news/what-is-base64-encoding/)

###### tags: `Work` `Base64` `JavaScript`