[ECO-4995] Fix base64 url encoding/decoding

src/channel/ably/utils.ts

@@ -12,11 +12,11 @@
     // Get Token Header
     const base64HeaderUrl = jwtToken.split('.')[0];
     const base64Header = base64HeaderUrl.replace('-', '+').replace('_', '/');
-    const header = JSON.parse(toText(base64Header));
+    const header = JSON.parse(fromBase64UrlEncoded(base64Header));
     // Get Token payload
     const base64Url = jwtToken.split('.')[1];
     const base64 = base64Url.replace('-', '+').replace('_', '/');
-    const payload = JSON.parse(toText(base64));
+    const payload = JSON.parse(fromBase64UrlEncoded(base64));
     return { header, payload };
 };
 
@@ -33,18 +33,37 @@
 
 const isBrowser = typeof window === 'object';
 
-export const toText = (base64: string) => {
+/**
+ * Helper method to decode base64 url encoded string
+ * https://stackoverflow.com/a/78178053
+ * @param base64 base64 url encoded string
+ * @returns decoded text string
+ */
+export const fromBase64UrlEncoded = (base64: string) => {
+    const base64Encoded = base64.replace(/-/g, '+').replace(/_/g, '/');
+    const padding = base64.length % 4 === 0 ? '' : '='.repeat(4 - (base64.length % 4));
+    const base64WithPadding = base64Encoded + padding;
+
     if (isBrowser) {
-        return atob(base64);
+        return atob(base64WithPadding);
     }
-    return Buffer.from(base64, 'base64').toString('binary');
+    return Buffer.from(base64WithPadding, 'base64').toString('binary');
 };
 
-export const toBase64 = (text: string) => {
+/**
+ * Helper method to encode text into base64 url encoded string
+ * https://stackoverflow.com/a/78178053
+ * @param base64 text
+ * @returns base64 url encoded string
+ */
+export const toBase64UrlEncoded = (text: string) => {
+    let encoded = ''
     if (isBrowser) {
-        return btoa(text);
+        encoded = btoa(text);
+    } else {
+        encoded = Buffer.from(text, 'binary').toString('base64');
     }
-    return Buffer.from(text, 'binary').toString('base64');
+    return encoded.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
 };
 
 const isAbsoluteUrl = (url: string) => (url && url.indexOf('http://') === 0) || url.indexOf('https://') === 0;

src/connector/ably-connector.ts

@@ -2,7 +2,7 @@ import { Connector } from './connector';
 
 import { AblyChannel, AblyPrivateChannel, AblyPresenceChannel, AblyAuth } from './../channel';
 import { AblyRealtime, TokenDetails } from '../../typings/ably';
-import { toBase64 } from '../channel/ably/utils';
+import { toBase64UrlEncoded } from '../channel/ably/utils';
 
 /**
  * This class creates a connector to Ably.
@@ -119,14 +119,14 @@ export class AblyConnector extends Connector {
 
     /**
      * Get the socket ID for the connection.
-     * For ably, returns base64 encoded json with keys {connectionKey, clientId}
+     * For ably, returns base64 url encoded json with keys {connectionKey, clientId}
      */
     socketId(): string {
         let socketIdObject = {
             connectionKey : this.ably.connection.key,
             clientId : this.ably.auth.clientId ?? null,
         }
-        return toBase64(JSON.stringify(socketIdObject));
+        return toBase64UrlEncoded(JSON.stringify(socketIdObject));
     }
 
     /**

src/echo.ts

@@ -117,7 +117,7 @@ export default class Echo {
 
     /**
      * Get the Socket ID for the connection.
-     * For ably, returns base64 encoded json with keys {connectionKey, clientId}
+     * For ably, returns base64 url encoded json with keys {connectionKey, clientId}
      */
     socketId(): string {
         return this.connector.socketId();