Remove google-oauth-gsi, put script in index.html instead

package.json

@@ -49,7 +49,6 @@
     "classnames": "^2.3.2",
     "flexboxgrid": "^6.3.1",
     "flexboxgrid-helpers": "^1.1.3",
-    "google-oauth-gsi": "^4.0.0",
     "hastscript": "^9.0.0",
     "i18next": "^23.11.2",
     "i18next-browser-languagedetector": "^7.2.1",
@@ -114,6 +113,7 @@
     "@types/gapi": "^0.0.44",
     "@types/gapi.client": "^1.0.5",
     "@types/gapi.client.drive": "^3.0.14",
+    "@types/google.accounts": "^0.0.14",
     "@types/google.picker": "^0.0.39",
     "@types/jest": "^29.0.0",
     "@types/js-yaml": "^4.0.5",

public/index.html

@@ -9,6 +9,7 @@
   <script src="%PUBLIC_URL%/externalLibs/index.js"></script>
   <script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
   <script type="text/javascript" src="https://apis.google.com/js/client.js"></script>
+  <script type="text/javascript" src="https://accounts.google.com/gsi/client"></script>
   <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

src/commons/sagas/PersistenceSaga.tsx

@@ -1,5 +1,4 @@
 import { Intent } from '@blueprintjs/core';
-import { GoogleOAuthProvider, SuccessTokenResponse } from 'google-oauth-gsi';
 import { Chapter, Variant } from 'js-slang/dist/types';
 import { SagaIterator } from 'redux-saga';
 import { call, put, select } from 'redux-saga/effects';
@@ -40,25 +39,7 @@ const MIME_SOURCE = 'text/plain';
 // const MIME_FOLDER = 'application/vnd.google-apps.folder';
 
 // GIS Token Client
-let googleProvider: GoogleOAuthProvider;
-// Login function
-function* googleLogin() {
-  try {
-    const tokenResp: SuccessTokenResponse = yield new Promise<SuccessTokenResponse>(
-      (resolve, reject) => {
-        googleProvider.useGoogleLogin({
-          flow: 'implicit',
-          onSuccess: resolve,
-          onError: reject,
-          scope: SCOPES
-        })();
-      }
-    );
-    yield call(handleUserChanged, tokenResp.access_token);
-  } catch (ex) {
-    console.error(ex);
-  }
-}
+let tokenClient: google.accounts.oauth2.TokenClient;
 
 export function* persistenceSaga(): SagaIterator {
   yield takeLatest(LOGOUT_GOOGLE, function* (): any {
@@ -70,7 +51,7 @@ export function* persistenceSaga(): SagaIterator {
 
   yield takeLatest(LOGIN_GOOGLE, function* (): any {
     yield call(ensureInitialised);
-    yield call(googleLogin);
+    yield call(getToken);
   });
 
   yield takeEvery(PERSISTENCE_INITIALISE, function* (): any {
@@ -346,16 +327,6 @@ const initialisationPromise: Promise<void> = new Promise(res => {
 
 // only called once
 async function initialise() {
-  // initialize GIS client
-  await new Promise<void>(
-    (resolve, reject) =>
-      (googleProvider = new GoogleOAuthProvider({
-        clientId: Constants.googleClientId!,
-        onScriptLoadSuccess: resolve,
-        onScriptLoadError: reject
-      }))
-  );
-
   // load and initialize gapi.client
   await new Promise<void>((resolve, reject) =>
     gapi.load('client', {
@@ -366,6 +337,19 @@ async function initialise() {
   await gapi.client.init({
     discoveryDocs: DISCOVERY_DOCS
   });
+
+  // initialize GIS client
+  await new Promise<google.accounts.oauth2.TokenClient>((resolve, reject) => {
+    resolve(
+      window.google.accounts.oauth2.initTokenClient({
+        client_id: Constants.googleClientId!,
+        scope: SCOPES,
+        callback: () => void 0 // will be updated in getToken()
+      })
+    );
+  }).then(c => {
+    tokenClient = c;
+  });
 }
 
 function* handleUserChanged(accessToken: string | null) {
@@ -382,6 +366,26 @@ function* handleUserChanged(accessToken: string | null) {
   }
 }
 
+function* getToken() {
+  yield new Promise((resolve, reject) => {
+    try {
+      // Settle this promise in the response callback for requestAccessToken()
+      (tokenClient as any).callback = (resp: google.accounts.oauth2.TokenResponse) => {
+        if (resp.error !== undefined) {
+          reject(resp);
+        }
+        // GIS has already automatically updated gapi.client
+        // with the newly issued access token by this point
+        resolve(resp);
+      };
+      tokenClient.requestAccessToken();
+    } catch (err) {
+      reject(err);
+    }
+  });
+  yield call(handleUserChanged, gapi.client.getToken().access_token);
+}
+
 function* ensureInitialised() {
   startInitialisation();
   yield initialisationPromise;
@@ -393,13 +397,13 @@ function* ensureInitialisedAndAuthorised() {
   const currToken: GoogleApiOAuth2TokenObject = yield call(gapi.client.getToken);
 
   if (currToken === null) {
-    yield call(googleLogin);
+    yield call(getToken);
   } else {
     // check if loaded token is still valid
     const email: string | undefined = yield call(getUserProfileDataEmail);
     const isValid = email ? true : false;
     if (!isValid) {
-      yield call(googleLogin);
+      yield call(getToken);
     }
   }
 }

yarn.lock

@@ -2933,6 +2933,11 @@
   resolved "https://registry.yarnpkg.com/@types/gapi/-/gapi-0.0.44.tgz#f097f7a0f59d63a59098a08a62a560ca168426fb"
   integrity sha512-hsgJMfZ/pMwI15UlAYHMNwj8DRoigo1odhbPwEXdp19ZQwQAXbcRrpzaDsfc+9XM6RtGpvl4Ja7uW8A+KPCa7w==
 
+"@types/google.accounts@^0.0.14":
+  version "0.0.14"
+  resolved "https://registry.yarnpkg.com/@types/google.accounts/-/google.accounts-0.0.14.tgz#ffc36c30c5107b9bdab115830c85f7e377bc0dea"
+  integrity sha512-HqIVkVzpiLWhlajhQQd4rIV7czanFvXblJI2J1fSrL+VKQuQwwZ63m35D/mI0flsqKE6p/hNrAG0Yn4FD6JvNA==
+
 "@types/google.picker@^0.0.39":
   version "0.0.39"
   resolved "https://registry.yarnpkg.com/@types/google.picker/-/google.picker-0.0.39.tgz#bb205ffb9736e8ec4a1af7cc87811d0fc5dc30fa"
@@ -7057,11 +7062,6 @@ glsl-tokenizer@^2.1.5:
   dependencies:
     through2 "^0.6.3"
 
-google-oauth-gsi@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/google-oauth-gsi/-/google-oauth-gsi-4.0.0.tgz#5564e97df5535af8c150909e0df9adcb32af2758"
-  integrity sha512-6A2QTSB4iPPfqd7spIOnHLhP4Iu8WeZ7REq+zM47nzIC805FwgOTFj5UsatKpMoNDsmb2xXG2GpKKVNBxbE9Pw==
-
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"