Switch from base64url to universal-base64url (#10185)

package.json

@@ -150,7 +150,6 @@
     "@mozilla-protocol/tokens": "5.0.5",
     "@willdurand/isomorphic-formdata": "1.2.0",
     "base62": "2.0.1",
-    "base64url": "3.0.1",
     "better-npm-run": "0.1.1",
     "chokidar": "3.5.1",
     "classnames": "2.2.6",
@@ -217,6 +216,7 @@
     "touch": "3.1.0",
     "typescript": "4.2.3",
     "ua-parser-js": "0.7.24",
+    "universal-base64url": "1.1.0",
     "universal-cookie-express": "4.0.3",
     "url": "0.11.0",
     "url-loader": "4.1.1",

src/amo/components/GetFirefoxButton/index.js

@@ -1,5 +1,5 @@
 /* @flow */
-import base64url from 'base64url';
+import { encode } from 'universal-base64url';
 import makeClassName from 'classnames';
 import invariant from 'invariant';
 import * as React from 'react';
@@ -41,7 +41,7 @@ export type Props = {|
 
 type InternalProps = {|
   ...Props,
-  _base64url?: typeof base64url,
+  _encode?: typeof encode,
   _tracking: typeof tracking,
   i18n: I18nType,
   userAgentInfo: UserAgentInfoType,
@@ -49,7 +49,7 @@ type InternalProps = {|
 
 export const GetFirefoxButtonBase = (props: InternalProps) => {
   const { addon, buttonType, className, i18n, userAgentInfo } = props;
-  const _base64url = props._base64url || base64url;
+  const _encode = props._encode || encode;
   const _tracking = props._tracking || tracking;
 
   const onButtonClick = () => {
@@ -80,7 +80,7 @@ export const GetFirefoxButtonBase = (props: InternalProps) => {
       );
       buttonText = i18n.gettext('Only with Firefox—Get Firefox Now');
       puffy = true;
-      utmContent = addon.guid ? `rta:${_base64url.encode(addon.guid)}` : '';
+      utmContent = addon.guid ? `rta:${_encode(addon.guid)}` : '';
       break;
     }
     case GET_FIREFOX_BUTTON_TYPE_HEADER: {

src/amo/pages/UsersUnsubscribe/index.js

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { Helmet } from 'react-helmet';
 import { compose } from 'redux';
-import base64url from 'base64url';
+import { decode } from 'universal-base64url';
 import { connect } from 'react-redux';
 
 import Link from 'amo/components/Link';
@@ -125,7 +125,7 @@ export class UsersUnsubscribeBase extends React.Component<InternalProps> {
                       {
                         strongStart: '<strong>',
                         strongEnd: '</strong>',
-                        email: base64url.decode(token),
+                        email: decode(token),
                       },
                     ),
                     ['strong'],

tests/unit/amo/components/TestGetFirefoxButton.js

@@ -1,4 +1,4 @@
-import base64url from 'base64url';
+import { encode } from 'universal-base64url';
 import * as React from 'react';
 
 import GetFirefoxButton, {
@@ -97,7 +97,7 @@ describe(__filename, () => {
           store,
         });
 
-        const utmContent = `rta:${base64url.encode(addon.guid)}`;
+        const utmContent = `rta:${encode(addon.guid)}`;
 
         const expectedHref = `${DOWNLOAD_FIREFOX_BASE_URL}${makeQueryStringWithUTM(
           { utm_content: utmContent },
@@ -105,33 +105,33 @@ describe(__filename, () => {
         expect(root.find('.GetFirefoxButton')).toHaveProp('href', expectedHref);
       });
 
-      it('calls base64url.encode to encode the guid of the add-on', () => {
-        const _base64url = { encode: sinon.spy() };
+      it('calls universal-base64url.encode to encode the guid of the add-on', () => {
+        const _encode = sinon.spy();
         const guid = 'some-guid';
         const addon = createInternalAddonWithLang({ ...fakeAddon, guid });
         render({
-          _base64url,
+          _encode,
           addon,
           buttonType,
           store,
         });
 
-        sinon.assert.calledWith(_base64url.encode, addon.guid);
+        sinon.assert.calledWith(_encode, addon.guid);
       });
 
       // See: https://github.com/mozilla/addons-frontend/issues/7255
-      it('does not call base64url.encode when add-on has a `null` GUID', () => {
-        const _base64url = { encode: sinon.spy() };
+      it('does not call universal-base64url.encode when add-on has a `null` GUID', () => {
+        const _encode = sinon.spy();
         const addon = createInternalAddonWithLang({ ...fakeAddon, guid: null });
 
         render({
-          _base64url,
+          _encode,
           addon,
           buttonType,
           store,
         });
 
-        sinon.assert.notCalled(_base64url.encode);
+        sinon.assert.notCalled(_encode);
       });
 
       it('sets the button as puffy and not micro', () => {

tests/unit/amo/pages/TestUsersUnsubscribe.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import base64url from 'base64url';
+import { encode } from 'universal-base64url';
 
 import {
   abortUnsubscribeNotification,
@@ -26,7 +26,7 @@ describe(__filename, () => {
   const getParams = (overrides = {}) => {
     return {
       hash: 'some-hash',
-      token: base64url.encode('email@example.org'),
+      token: encode('email@example.org'),
       notificationName: 'new_review',
       ...overrides,
     };
@@ -149,7 +149,7 @@ describe(__filename, () => {
   describe('when user is successfully unsubscribed', () => {
     it('decodes the token to reveal the email of the user', () => {
       const email = 'some@email.example.org';
-      const params = getParams({ token: base64url.encode(email) });
+      const params = getParams({ token: encode(email) });
       const { store } = dispatchClientMetadata();
       _finishUnsubscribeNotification(store, params);
 

tests/unit/helpers.js

@@ -3,7 +3,7 @@ import urllib from 'url';
 
 import { LOCATION_CHANGE } from 'connected-react-router';
 import PropTypes from 'prop-types';
-import base64url from 'base64url';
+import { encode } from 'universal-base64url';
 import config from 'config';
 import invariant from 'invariant';
 import { shallow } from 'enzyme';
@@ -445,12 +445,12 @@ export function userAuthToken(
 
   let encodedToken = tokenData;
   if (!encodedToken) {
-    encodedToken = base64url.encode(JSON.stringify(data));
+    encodedToken = encode(JSON.stringify(data));
   }
 
   const base62 = getDjangoBase62();
   const timestamp = base62.encode(tokenCreatedAt);
-  const sig = base64url.encode('pretend-this-is-a-signature');
+  const sig = encode('pretend-this-is-a-signature');
 
   return `${encodedToken}:${timestamp}:${sig}`;
 }

yarn.lock

@@ -2555,11 +2555,6 @@ base64-js@^1.3.1:
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
 
-base64url@3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/base64url/-/base64url-3.0.1.tgz#6399d572e2bc3f90a9a8b22d5dbb0a32d33f788d"
-  integrity sha512-ir1UPr3dkwexU7FdV8qBBbNDRUhMmIekYMFZfi+C/sLNnRESKPl23nB9b2pltqfOQNnGzsDdId90AEtG5tCx4A==
-
 base@^0.11.1:
   version "0.11.2"
   resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
@@ -12723,6 +12718,18 @@ unist-util-visit@^1.1.0:
   dependencies:
     unist-util-visit-parents "^2.0.0"
 
+universal-base64@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/universal-base64/-/universal-base64-2.1.0.tgz#511af92b3a07340fc2647036045aadb3bedcc320"
+  integrity sha512-WeOkACVnIXJZr/qlv7++Rl1zuZOHN96v2yS5oleUuv8eJOs5j9M5U3xQEIoWqn1OzIuIcgw0fswxWnUVGDfW6g==
+
+universal-base64url@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/universal-base64url/-/universal-base64url-1.1.0.tgz#9407e9acc3d3b9c3c39abd200bfa09cf13621782"
+  integrity sha512-qWv2+8KCaAWdpqqXwU8W0Yj9pflYDXP37/a3kec6Y4Je7bYzgIfxEVRjZWeLR67be7iot1lGCy5Nuo+xB0fojA==
+  dependencies:
+    universal-base64 "^2.1.0"
+
 universal-cookie-express@4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/universal-cookie-express/-/universal-cookie-express-4.0.3.tgz#07e871d5a6e2c157690aa5c77654d82d5a34f509"