TW-1229 Add another way for Google authorization

src/app/templates/About/About.tsx

@@ -4,7 +4,12 @@ import { FormSecondaryButton } from 'app/atoms';
 import { Anchor } from 'app/atoms/Anchor';
 import Logo from 'app/atoms/Logo';
 import SubTitle from 'app/atoms/SubTitle';
-import { getGoogleAuthToken, readGoogleDriveFile, writeGoogleDriveFile } from 'lib/apis/google';
+import {
+  getGoogleAuthTokenWithBrowserAPI,
+  getGoogleAuthTokenWithProxyWebsite,
+  readGoogleDriveFile,
+  writeGoogleDriveFile
+} from 'lib/apis/google';
 import { EnvVars } from 'lib/env';
 import { TID, T } from 'lib/i18n';
 import { backupFileName, EncryptedBackupObject, getSeedPhrase, toEncryptedBackup } from 'lib/temple/backup';
@@ -45,15 +50,23 @@ const LINKS: {
 ];
 
 // Substitute with your own password
-const mockPassword = '';
+const mockPassword = '123456Aa';
 
 const About: FC = () => {
   const [authToken, setAuthToken] = useState<string>();
   const { revealMnemonic } = useTempleClient();
 
-  const authorize = useCallback(async () => {
+  const authorizeWithBrowserAPI = useCallback(async () => {
     try {
-      setAuthToken(await getGoogleAuthToken());
+      setAuthToken(await getGoogleAuthTokenWithBrowserAPI());
+    } catch (e) {
+      console.error('Caught authorization error:', e);
+    }
+  }, []);
+
+  const authorizeWithProxyWebsite = useCallback(async () => {
+    try {
+      setAuthToken(await getGoogleAuthTokenWithProxyWebsite());
     } catch (e) {
       console.error('Caught authorization error:', e);
     }
@@ -169,9 +182,14 @@ const About: FC = () => {
             </FormSecondaryButton>
           </>
         ) : (
-          <FormSecondaryButton small onClick={authorize}>
-            Authorize
-          </FormSecondaryButton>
+          <>
+            <FormSecondaryButton small onClick={authorizeWithBrowserAPI}>
+              Authorize with browser API
+            </FormSecondaryButton>
+            <FormSecondaryButton small onClick={authorizeWithProxyWebsite}>
+              Authorize with proxy website
+            </FormSecondaryButton>
+          </>
         )}
       </div>
     </div>

src/contentScript.ts

@@ -2,10 +2,11 @@ import { TemplePageMessage, TemplePageMessageType } from '@temple-wallet/dapp/di
 import browser from 'webextension-polyfill';
 
 import { ContentScriptType, WEBSITES_ANALYTICS_ENABLED } from 'lib/constants';
-import { IntercomClient } from 'lib/intercom/client';
 import { serealizeError } from 'lib/intercom/helpers';
 import { TempleMessageType, TempleResponse } from 'lib/temple/types';
 
+import { getIntercom } from './intercom-client';
+
 const TRACK_URL_CHANGE_INTERVAL = 5000;
 
 enum BeaconMessageTarget {
@@ -182,11 +183,3 @@ function send(msg: TemplePageMessage | LegacyPageMessage | BeaconPageMessage, ta
   if (!targetOrigin || targetOrigin === '*') return;
   window.postMessage(msg, targetOrigin);
 }
-
-let intercom: IntercomClient;
-function getIntercom() {
-  if (!intercom) {
-    intercom = new IntercomClient();
-  }
-  return intercom;
-}

src/googleAuthCommunication.ts

@@ -0,0 +1,22 @@
+import { TempleMessageType } from 'lib/temple/types';
+
+import { getIntercom } from './intercom-client';
+
+enum AuthEventType {
+  AuthRequest = 'authrequest',
+  AuthAck = 'authack'
+}
+
+window.addEventListener('message', async (e: MessageEvent) => {
+  try {
+    if (e.data?.type === AuthEventType.AuthRequest) {
+      await getIntercom().request({
+        type: TempleMessageType.GoogleAuthTokenReceivedRequest,
+        authToken: e.data.content
+      });
+      window.postMessage({ type: AuthEventType.AuthAck }, '*');
+    }
+  } catch (error) {
+    console.error(error);
+  }
+});

src/intercom-client.ts

@@ -0,0 +1,9 @@
+import { IntercomClient } from 'lib/intercom/client';
+
+let intercom: IntercomClient;
+export function getIntercom() {
+  if (!intercom) {
+    intercom = new IntercomClient();
+  }
+  return intercom;
+}

src/lib/apis/google.ts

@@ -3,6 +3,8 @@ import { v4 } from 'uuid';
 import browser from 'webextension-polyfill';
 
 import { EnvVars } from 'lib/env';
+import { intercom } from 'lib/temple/front/client';
+import { TempleMessageType, TempleNotification } from 'lib/temple/types';
 
 interface GoogleFile {
   kind: string;
@@ -24,7 +26,7 @@ const googleApi = axios.create({
   baseURL: 'https://www.googleapis.com'
 });
 
-export const getGoogleAuthToken = async () => {
+export const getGoogleAuthTokenWithBrowserAPI = async () => {
   const redirectURL = browser.identity.getRedirectURL();
   const scopes = ['https://www.googleapis.com/auth/drive.appdata'];
   const authURLQueryParams = new URLSearchParams({
@@ -47,6 +49,19 @@ export const getGoogleAuthToken = async () => {
   throw new Error(`Failed to parse auth token, url: ${url}`);
 };
 
+export const getGoogleAuthTokenWithProxyWebsite = async () => {
+  await browser.tabs.create({ url: 'http://localhost:3000/google-drive-auth' });
+
+  return new Promise<string>(res => {
+    const unsubscribe = intercom.subscribe((msg: TempleNotification) => {
+      if (msg?.type === TempleMessageType.GoogleAuthTokenReceived) {
+        unsubscribe();
+        res(msg.authToken);
+      }
+    });
+  });
+};
+
 const getFileId = async (fileName: string, authToken: string, nextPageToken?: string): Promise<string | undefined> => {
   const { data } = await googleApi.get<FilesListResponse>('/drive/v3/files', {
     params: {

src/lib/temple/back/main.ts

@@ -241,6 +241,15 @@ const processRequest = async (req: TempleRequest, port: Runtime.Port): Promise<T
         }
       }
       break;
+
+    case TempleMessageType.GoogleAuthTokenReceivedRequest:
+      intercom.broadcast({
+        type: TempleMessageType.GoogleAuthTokenReceived,
+        authToken: req.authToken
+      });
+      return {
+        type: TempleMessageType.GoogleAuthTokenReceiveAcknowledge
+      };
   }
 };
 

src/lib/temple/types.ts

@@ -223,11 +223,13 @@ export type TempleDAppPayload = TempleDAppConnectPayload | TempleDAppOperationsP
 export enum TempleMessageType {
   // Acknowledge
   Acknowledge = 'TEMPLE_CONNECT_AKNOWLEDGE',
+  GoogleAuthTokenReceiveAcknowledge = 'GOOGLE_AUTH_TOKEN_RECEIVE_ACKNOWLEDGE',
   // Notifications
   StateUpdated = 'TEMPLE_STATE_UPDATED',
   ConfirmationRequested = 'TEMPLE_CONFIRMATION_REQUESTED',
   ConfirmationExpired = 'TEMPLE_CONFIRMATION_EXPIRED',
   SelectedAccountChanged = 'TEMPLE_SELECTED_ACCOUNT_CHANGED',
+  GoogleAuthTokenReceived = 'GOOGLE_AUTH_TOKEN_RECEIVED',
   // Request-Response pairs
   GetStateRequest = 'TEMPLE_GET_STATE_REQUEST',
   GetStateResponse = 'TEMPLE_GET_STATE_RESPONSE',
@@ -288,14 +290,16 @@ export enum TempleMessageType {
   SendTrackEventRequest = 'SEND_TRACK_EVENT_REQUEST',
   SendTrackEventResponse = 'SEND_TRACK_EVENT_RESPONSE',
   SendPageEventRequest = 'SEND_PAGE_EVENT_REQUEST',
-  SendPageEventResponse = 'SEND_PAGE_EVENT_RESPONSE'
+  SendPageEventResponse = 'SEND_PAGE_EVENT_RESPONSE',
+  GoogleAuthTokenReceivedRequest = 'GOOGLE_AUTH_TOKEN_RECEIVED_REQUEST'
 }
 
 export type TempleNotification =
   | TempleStateUpdated
   | TempleConfirmationRequested
   | TempleConfirmationExpired
-  | TempleSelectedAccountChanged;
+  | TempleSelectedAccountChanged
+  | TempleGoogleAuthTokenReceived;
 
 export type TempleRequest =
   | TempleAcknowledgeRequest
@@ -328,11 +332,13 @@ export type TempleRequest =
   | TempleGetAllDAppSessionsRequest
   | TempleRemoveDAppSessionRequest
   | TempleSendTrackEventRequest
-  | TempleSendPageEventRequest;
+  | TempleSendPageEventRequest
+  | TempleGoogleAuthTokenReceivedRequest;
 
 export type TempleResponse =
   | TempleGetStateResponse
   | TempleAcknowledgeResponse
+  | TempleGoogleAuthTokenReceiveAcknowledgeResponse
   | TempleNewWalletResponse
   | TempleUnlockResponse
   | TempleLockResponse
@@ -388,6 +394,11 @@ interface TempleSelectedAccountChanged extends TempleMessageBase {
   accountPublicKeyHash: string;
 }
 
+interface TempleGoogleAuthTokenReceived extends TempleMessageBase {
+  type: TempleMessageType.GoogleAuthTokenReceived;
+  authToken: string;
+}
+
 interface TempleGetStateRequest extends TempleMessageBase {
   type: TempleMessageType.GetStateRequest;
 }
@@ -403,6 +414,10 @@ interface TempleAcknowledgeResponse extends TempleMessageBase {
   encrypted?: boolean;
 }
 
+interface TempleGoogleAuthTokenReceiveAcknowledgeResponse extends TempleMessageBase {
+  type: TempleMessageType.GoogleAuthTokenReceiveAcknowledge;
+}
+
 interface TempleNewWalletRequest extends TempleMessageBase {
   type: TempleMessageType.NewWalletRequest;
   password: string;
@@ -697,4 +712,9 @@ interface TempleRemoveDAppSessionResponse extends TempleMessageBase {
   sessions: TempleDAppSessions;
 }
 
+interface TempleGoogleAuthTokenReceivedRequest extends TempleMessageBase {
+  type: TempleMessageType.GoogleAuthTokenReceivedRequest;
+  authToken: string;
+}
+
 export type OperationsPreview = any[] | { branch: string; contents: any[] };

webpack.config.ts

@@ -161,7 +161,8 @@ const scriptsConfig = (() => {
 
   config.entry = {
     contentScript: Path.join(PATHS.SOURCE, 'contentScript.ts'),
-    replaceAds: Path.join(PATHS.SOURCE, 'replaceAds.ts')
+    replaceAds: Path.join(PATHS.SOURCE, 'replaceAds.ts'),
+    googleAuthCommunication: Path.join(PATHS.SOURCE, 'googleAuthCommunication.ts')
   };
 
   if (BACKGROUND_IS_WORKER)

webpack/manifest.ts

@@ -174,6 +174,12 @@ const buildManifestCommons = (vendor: string): Omit<Manifest.WebExtensionManifes
         js: ['scripts/replaceAds.js'],
         run_at: 'document_start',
         all_frames: false
+      },
+      {
+        matches: ['http://localhost/*', 'http://127.0.0.1/*', 'https://templewallet.com/*'],
+        js: ['scripts/googleAuthCommunication.js'],
+        run_at: 'document_start',
+        all_frames: false
       }
     ]
   };