[polaris.shopify.com] Add auth header for services api (#9246)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

We need to add an authorization header to communicate with the services
API

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?
Adding auth header and using env variable according to [these
docs](https://github.com/Shopify/oauthboss/wiki/Oauthboss#example-request-code-node-how-do-i-add-the-authentication-information-to-another-app-to-make-requests-from-my-app).

[See site container builder for related
data](https://github.com/Shopify/polaris-site-container-builder/blob/main/config/secrets.production-unrestricted-52t1.ejson#L6).
<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

.changeset/unlucky-spoons-cover.md

@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': minor
+---
+
+Added auth header for service api

polaris.shopify.com/package.json

@@ -27,6 +27,7 @@
     "@shopify/polaris-icons": "^6.15.0",
     "@shopify/polaris-tokens": "^6.13.0",
     "@types/react-syntax-highlighter": "^15.5.6",
+    "base-64": "^1.0.0",
     "codesandbox": "^2.2.3",
     "endent": "^2.1.0",
     "framer-motion": "^6.5.1",
@@ -51,6 +52,7 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
+    "@types/base-64": "^1.0.0",
     "@types/gtag.js": "^0.0.10",
     "@types/js-yaml": "^4.0.5",
     "@types/lodash.get": "^4.4.7",

polaris.shopify.com/pages/api/service/index.tsx

@@ -1,4 +1,5 @@
 import type {NextApiResponse, NextApiRequest} from 'next';
+import base64 from 'base-64';
 
 const isProd = process.env.NODE_ENV === 'production';
 const enableLogs = process.env.DEBUG_ANALYTICS === 'true';
@@ -36,6 +37,10 @@ class AnalyticsProducer {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
+            Authorization: `Basic ${
+              process.env.SERVICES_API &&
+              base64.encode(process.env.SERVICES_API)
+            }`,
           },
           body: JSON.stringify(event),
         });

yarn.lock

@@ -3592,6 +3592,11 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/base-64@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/base-64/-/base-64-1.0.0.tgz#de9c6070ea457fbd65a1b5ebf13976b3ac0bdad0"
+  integrity sha512-AvCJx/HrfYHmOQRFdVvgKMplXfzTUizmh0tz9GFTpDePWgCY4uoKll84zKlaRoeiYiCr7c9ZnqSTzkl0BUVD6g==
+
 "@types/base64-url@^2.2.0":
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/@types/base64-url/-/base64-url-2.2.0.tgz#ff17c19bf357821bd637af2f54f7922443377950"
@@ -5688,6 +5693,11 @@ balanced-match@^2.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-2.0.0.tgz#dc70f920d78db8b858535795867bf48f820633d9"
   integrity sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==
 
+base-64@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/base-64/-/base-64-1.0.0.tgz#09d0f2084e32a3fd08c2475b973788eee6ae8f4a"
+  integrity sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg==
+
 base64-js@^1.0.2, base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"