Base64URL decoding via JavaScript?

Use this before decoding :

var decode = function(input) {
        // Replace non-url compatible chars with base64 standard chars
        input = input
            .replace(/-/g, '+')
            .replace(/_/g, '/');

        // Pad out with standard base64 required padding characters
        var pad = input.length % 4;
        if(pad) {
          if(pad === 1) {
            throw new Error('InvalidLengthError: Input base64url string is the wrong length to determine padding');
          }
          input += new Array(5-pad).join('=');
        }

        return input;
    }

After using this function you can use any base64 decoder

Using the TextEncoder interface along with the btoa() function and replace + with -, and / is replaced with _. Finally, remove trailing = characters added during base64 padding. For Decoding, the process is reversed.

Encode

function base64URLencode(str) {
  const utf8Arr = new TextEncoder().encode(str);
  const base64Encoded = btoa(utf8Arr);
  return base64Encoded.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
}

Decode

function base64URLdecode(str) {
  const base64Encoded = str.replace(/-/g, '+').replace(/_/g, '/');
  const padding = str.length % 4 === 0 ? '' : '='.repeat(4 - (str.length % 4));
  const base64WithPadding = base64Encoded + padding;
  return atob(base64WithPadding)
    .split('')
    .map(char => String.fromCharCode(char.charCodeAt(0)))
    .join('');
}

Solution:

var b64str = base64.encode('foo bar');

// fix padding according to the new format
b64str = b64str.padRight(b64str.length + (4 - b64str.length % 4) % 4, '=');

Using this great base64 encode/decode: http://code.google.com/p/stringencoders/source/browse/trunk/javascript/base64.js

Also depends on the padRight method:

String.prototype.padRight = function(n, pad){
    t = this;
    if(n > this.length)
        for(i = 0; i < n-this.length; i++)
            t += pad;
    return t;
}

Though not widely available, you could use Uint8Array.prototype.toBase64():

function base64UrlEncode(str) {
  const bytes = new TextEncoder().encode(str)
  return bytes.toBase64({
    alphabet: 'base64url',
    omitPadding: true,
  })
}

Then use Uint8Array.fromBase64() to decode the base64url string:

function base64UrlDecode(str) {
  const bytes = Uint8Array.fromBase64(str, {
    alphabet: 'base64url',
    omitPadding: true,
  })
  return new TextDecoder().decode(bytes)
}

As mentioned this is not all that useful, since the API is marked as Limited Availability.

If you are using nodejs/webjs, and your expected output is a string with standard characters (from 0x00 to 0x7F):

function base64urlToStr (base64url) {
    const base64 = base64url.replace(/-/g, '+').replace(/_/g, '/');
    return atob(base64);
};

If you are using webjs, and your expected output is a string with extended characters (from 0x00 to 0xFF):

function base64urlToBuf (base64url) {
    const base64 = base64url.replace(/-/g, '+').replace(/_/g, '/');
    const binaryString = atob(base64);
    const bytes = new Uint8Array(binaryString.length);
    for (let i = 0; i < binaryString.length; i++) {
        bytes[i] = binaryString.charCodeAt(i);
    }
    return bytes;
};

If you are using nodejs, and your expected output is a string with extended characters (from 0x00 to 0xFF):

function base64urlToBuf (base64url) {
    return Buffer.from(base64url, 'base64url');
}

Mixing extended functions with standard strings will output the wrong result.

Same as Ronnie Smith's answer, but works for Unicode (i.e. strings that are not only ASCII characters):

function base64URLencode(str) {
  const bytes = new TextEncoder().encode(str)
  const binString = String.fromCodePoint(...bytes)
  const base64Encoded = btoa(binString)

  return base64Encoded.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
}

function base64URLdecode(str) {
  const base64Encoded = str.replace(/-/g, '+').replace(/_/g, '/')
  const padding = str.length % 4 === 0 ? '' : '='.repeat(4 - (str.length % 4))
  const base64 = base64Encoded + padding

  const binString = atob(base64);
  const bytes = Uint8Array.from(binString, (m) => m.codePointAt(0));
  return new TextDecoder().decode(bytes)
}

(For the decode method, I use TextDecoder rather than the custom string concatenation.)

See also this article: https://web.dev/articles/base64-encoding

The answer by mohamed was really helpful, thanks!

If this happens for you: throw new Error("InvalidLengthError: Input base64url string is the wrong length to determine padding");

... you may be using it to decode a JSON Web Token (JWT).

But for this, you need to (after replacing the characters that need replacing) split apart the 3 parts of the JWT properly ("." character), and then pad each before attempting to decode using the code from that answer ( https://stackoverflow.com/a/51838635/1143126 ).

For a quick look inside your JWT, you could just use https://jwt.io/ if it's not critical to security (if it's just for a local test, for example).

Having wasted way too much time on the incomplete solutions above, here's a complete and working solution. No need for padding, no broken UTF8 arrays, no need to apply your own decoder.

function base64URLencode(str) {
  return btoa(str).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
}

function base64URLdecode(str) {
  return atob(str.replace(/-/g, '+').replace(/_/g, '/'));
}

// Tests
console.log("Hi!", base64URLencode("Hi!"), base64URLdecode(base64URLencode("Hi!")));
console.log("Hello!", base64URLencode("Hello!"), base64URLdecode(base64URLencode("Hello!")));
console.log("Super secret key", base64URLencode("Super secret key"), base64URLdecode(base64URLencode("Super secret key")));

I think the most efficient way of doing Base64/Base64URL decoding is to decode directly in a function instead of changing Base64URL into Base64 and then decoding it. I wrote a function that can decode both Base64 and Base64URL directly without any other dependency.

const PADCHAR = '=';
const B64index = [
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0,62,63,62,62,63,52,53,54,55,56,57,58,59,60,61, 0, 0,
    0, 0, 0, 0, 0, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,10,11,12,13,14,
  15,16,17,18,19,20,21,22,23,24,25, 0, 0, 0, 0,63, 0,26,27,28,
  29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,
  49,50,51];

function b64decode(s) {
  const len = s.length;
  if (len === 0) return s;
  const padding = (s.charAt(len-1) === PADCHAR);
  const pad = padding || ((len % 4) > 0);
  const L = (Math.floor((len+3)/4)-pad)*4;
  var x = [];
  for (i = 0; i < L; i += 4)
  {
    var n = B64index[s.charCodeAt(i)] << 18 | 
      B64index[s.charCodeAt(i+1)] << 12 | 
      B64index[s.charCodeAt(i+2)] << 6 | 
      B64index[s.charCodeAt(i+3)];
    x.push(String.fromCharCode(n >> 16, (n >> 8) & 0xff, n & 0xff));
  }
  if (pad)
  {
    var n = B64index[s.charCodeAt(L)] << 18 | 
      B64index[s.charCodeAt(L+1)] << 12;
    x.push(String.fromCharCode(n >> 16));
    if (len > L + 2 && ((s.charAt(L+2) != PADCHAR) || !padding))
    {
      n |= B64index[s.charCodeAt(L+2)] << 6;
      x.push(String.fromCharCode((n >> 8) & 0xff));
    }
  }
  return x.join('');
}

To use this function to decode the Base64URL string, I use JWT token as an example. First, I split the token. Then, I decode the JWT payload and then parse it into JSON object.

const elements = token.split('.');
const payload = JSON.parse(b64decode(elements[1]));