Use authorization header when getting access token

Author: c-rainbow

src/background.ts

@@ -1,13 +1,28 @@
-import { setTwitchClientId } from './clientIdManager';
+import { setTwitchClientId, setTwitchOauthToken } from './storageManager';
 
 chrome.webRequest.onSendHeaders.addListener(
     async function (details) {
+        let oauthTokenFound = false;
         const headers = details.requestHeaders || [];
         for (const header of headers) {
-            if ('client-id' === header.name.toLocaleLowerCase()) {
+            const headerName = header.name.toLocaleLowerCase()
+            if ('client-id' === headerName) {
                 const clientId = header.value;
                 await setTwitchClientId(clientId);
             }
+            else if ('authorization' === headerName) {
+                const oauthToken = header.value;
+                if (oauthToken) {
+                    await setTwitchOauthToken(oauthToken);
+                    oauthTokenFound = true;
+                    // console.log('Authorization found', header.value);
+                }
+            }
+        }
+        // If user logged out
+        if (!oauthTokenFound) {
+            // console.log('Authorization not found');
+            await setTwitchOauthToken(null);
         }
     },
     { urls: ['*://gql.twitch.tv/gql/*'] },

src/clientIdManager.ts

@@ -2,7 +2,7 @@ import log from 'loglevel';
 
 import { buildUsherUrl, parseAudioOnlyUrl } from './url';
 import { AccessTokenGqlPayload } from './accessToken';
-import { getTwitchClientId } from './clientIdManager';
+import { getTwitchClientId, getTwitchOauthToken } from './storageManager';
 
 const GQL_ENDPOINT_URL: string = 'https://gql.twitch.tv/gql';
 
@@ -52,16 +52,27 @@ export async function fetchJson(url: string) {
     return null;
 }
 
+async function getGqlHeaders() {
+  const twitchClientId = await getTwitchClientId();
+  const twitchOauthToken = await getTwitchOauthToken();
+
+  const basicHeader = {
+    'Client-ID': twitchClientId,
+    'Content-Type': 'text/plain; charset=UTF-8',
+  };
+
+  if (twitchOauthToken) {
+    Object.assign(basicHeader, { 'Authorization': twitchOauthToken });
+  }
+  return basicHeader;
+}
+
 // Run GQL query
 export async function fetchGql(payload: any) {
     try {
-        const twitchClientId = await getTwitchClientId();
         const postResponse = await fetch(GQL_ENDPOINT_URL, {
             method: 'POST',
-            headers: {
-                'Client-ID': twitchClientId,
-                'Content-Type': 'text/plain; charset=UTF-8',
-            },
+            headers: await getGqlHeaders(),
             body: JSON.stringify(payload),
         });
         const respJson = await postResponse.json();

src/fetch.ts

@@ -0,0 +1,22 @@
+// Code shared by both service workers and content script
+
+const TWITCH_CLIENT_ID_KEY = 'twitchClientId';
+const TWITCH_OAUTH_TOKEN_KEY = 'twitchOauthToken';
+
+export async function getTwitchClientId(): Promise<string | null> {
+    const result = await chrome.storage.local.get([TWITCH_CLIENT_ID_KEY]);
+    return result[TWITCH_CLIENT_ID_KEY] || null;
+}
+
+export async function setTwitchClientId(twitchClientId: string) {
+    await chrome.storage.local.set({ [TWITCH_CLIENT_ID_KEY]: twitchClientId });
+}
+
+export async function getTwitchOauthToken(): Promise<string | null> {
+  const result = await chrome.storage.local.get([TWITCH_OAUTH_TOKEN_KEY]);
+  return result[TWITCH_OAUTH_TOKEN_KEY] || null;
+}
+
+export async function setTwitchOauthToken(twitchOauthToken: string | null) {
+  await chrome.storage.local.set({ [TWITCH_OAUTH_TOKEN_KEY]: twitchOauthToken });
+}