initial commit

Author: lindsey-volta

gatsby-node.js

@@ -34,3 +34,10 @@ exports.onPostBuild = () => {
     }
   })
 }
+
+exports.onCreateDevServer = ({ app }) => {
+  app.use((req, res, next) => {
+    res.setHeader("Cross-Origin-Opener-Policy", "unsafe-none")
+    next()
+  })
+}

gatsby/onInitialClientRender.js

@@ -2,61 +2,82 @@ import loadScript from "load-script"
 import { store } from "./wrapRootElement"
 
 export const onInitialClientRender = () => {
-  loadScript(`https://apis.google.com/js/api.js`, err => {
-    if (err) {
-      console.error("Could not load gapi")
-      return
-    }
 
-    var SCOPES = ["https://www.googleapis.com/auth/analytics.readonly"]
+  const gapiPromise = new Promise((resolve, reject) => {
+    loadScript("https://apis.google.com/js/api.js", err => {
+      if (err) {
+        reject(err)
+      } else {
+        window.gapi.load("client", () => {
+          resolve(window.gapi)
+        })
+      }
+    })
+  })
+
+  const gisPromise = new Promise((resolve, reject) => {
+    loadScript("https://accounts.google.com/gsi/client", err => {
+      if (err) {
+        reject(err)
+      } else resolve(window.google)
+    })
+  })
+
+  Promise.all([gapiPromise, gisPromise])
+    .then(([gapi, google]) => {
+      const SCOPES = ["https://www.googleapis.com/auth/analytics.readonly"]
+      const clientId = process.env.GAPI_CLIENT_ID
 
-    const clientId = process.env.GAPI_CLIENT_ID
+      if (!clientId) {
+        console.error(
+          "GAPI_CLIENT_ID is not defined. Please check your .env file."
+        )
+        store.dispatch({ type: "gapiStatus", status: "cannot initialize" })
+        return
+      }
 
-    // TODO - Remove :analytics and replace it with the discovery document.
-    window.gapi.load("client:auth2:analytics", () => {
       Promise.all([
-        window.gapi.client.load(
-          "https://analyticsreporting.googleapis.com/$discovery/rest?version=v4"
-        ),
-        window.gapi.client.load(
+        gapi.client.load(
           "https://analyticsdata.googleapis.com/$discovery/rest"
         ),
-        window.gapi.client.load(
+        gapi.client.load(
           "https://analyticsadmin.googleapis.com/$discovery/rest"
         ),
-      ]).then(() => {
-        window.gapi.client
-          .init({
+      ])
+        .then(() => {
+          console.log("Initializing token client...")
+          // Replace gapi.auth2.init() with google.accounts.oauth2.initTokenClient()
+          const tokenClient = google.accounts.oauth2.initTokenClient({
+            client_id: clientId,
             scope: SCOPES.join(" "),
-            clientId,
-          })
-          .then(() => {
-            store.dispatch({ type: "setGapi", gapi: window.gapi })
-            const user = window.gapi.auth2.getAuthInstance().currentUser.get()
-            store.dispatch({
-              type: "setUser",
-              user: user.isSignedIn() ? user : undefined,
-            })
-            window.gapi.auth2.getAuthInstance().currentUser.listen(user => {
-              store.dispatch({
-                type: "setUser",
-                user: user.isSignedIn() ? user : undefined,
-              })
-            })
-          })
-          .catch(e => {
-            store.dispatch({ type: "setGapi", gapi: window.gapi })
-            store.dispatch({
-              type: "setUser",
-              user: undefined,
-            })
-            store.dispatch({
-              type: "gapiStatus",
-              status: "cannot initialize",
-            })
-            console.error(e)
+            callback: tokenResponse => {
+              console.log("onInitialClientRender: callback invoked", tokenResponse)
+              if (tokenResponse && tokenResponse.access_token) {
+                gapi.client.setToken(tokenResponse.access_token)
+                console.log("onInitialClientRender: setUser", tokenResponse);
+                store.dispatch({ type: "setUser", user: tokenResponse })
+              } else {
+                console.error("onInitialClientRender: tokenResponse did not contain access_token.", tokenResponse);
+                store.dispatch({ type: "setUser", user: undefined })
+              }
+            }, error_callback: (error) => {
+              console.error("GIS Error:", error);
+            },
           })
-      }, console.error)
+
+          store.dispatch({ type: "setGapi", gapi })
+          store.dispatch({ type: "gapiStatus", status: "initialized" })
+          store.dispatch({ type: "setGoogle", google })
+          store.dispatch({ type: "setTokenClient", tokenClient })
+        })    
+        .catch(e => {
+          store.dispatch({ type: "setGapi", gapi })
+          store.dispatch({ type: "setUser", user: undefined })
+          store.dispatch({ type: "gapiStatus", status: "cannot initialize" })
+          console.error(e)
+        })
+    })
+    .catch(e => {
+      console.error(e)
     })
-  })
 }

gatsby/wrapRootElement.tsx

@@ -20,13 +20,17 @@ type State =
     {
       user?: {},
       gapi?: PartialDeep<typeof gapi>,
+      google?: any,
+      tokenClient?: any,
       toast?: string,
-      status?: string
+      gapiStatus?: string
     }
 
 type Action =
     | { type: 'setUser', user: {} | undefined  }
     | { type: 'setGapi', gapi: PartialDeep<typeof gapi>  | undefined }
+    | { type: 'setGoogle', google: any }
+    | { type: 'setTokenClient', tokenClient: any }
     | { type: 'setToast', toast: string | undefined }
     | { type: 'gapiStatus', status: string | undefined };
 const reducer = (state: State = {}, action: Action) => {
@@ -35,6 +39,10 @@ const reducer = (state: State = {}, action: Action) => {
       return { ...state, user: action.user }
     case "setGapi":
       return { ...state, gapi: action.gapi }
+    case "setGoogle":
+      return { ...state, google: action.google }
+    case "setTokenClient":
+      return { ...state, tokenClient: action.tokenClient }
     case "setToast":
       return { ...state, toast: action.toast }
     case "gapiStatus":

package.json

@@ -60,11 +60,9 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^13.1.8",
     "@types/gapi": "^0.0.39",
-    "@types/gapi.auth2": "^0.0.54",
     "@types/gapi.client.analytics": "^3.0.7",
     "@types/gapi.client.analyticsadmin": "^1.0.0",
     "@types/gapi.client.analyticsdata": "^1.0.2",
-    "@types/gapi.client.analyticsreporting": "^4.0.3",
     "@types/gtag.js": "^0.0.5",
     "@types/jest": "^26.0.23",
     "@types/node": "^18.16.5",

src/components/Layout/Login.tsx

@@ -7,7 +7,7 @@ import { UserStatus } from "./useLogin"
 
 interface LoginProps {
   className?: string
-  user: gapi.auth2.GoogleUser | undefined
+  user: any
   userStatus: UserStatus
   login: () => void
   logout: () => void

src/components/Layout/index.tsx

@@ -69,7 +69,7 @@ interface TemplateProps {
   userStatus?: UserStatus
   login?: () => void
   logout?: () => void
-  user?: gapi.auth2.GoogleUser
+  user?: any
 }
 
 const PREFIX = 'Layout2';

src/global.d.ts

@@ -23,8 +23,10 @@ declare module "*.svg" {
 declare module "*.module.css";
 
 declare interface AppState {
-  user?: gapi.auth2.GoogleUser
+  user?: User
   gapi?: typeof gapi
   gapiStatus?: string
   measurementID: string
+  tokenClient?: any
+  google?: typeof google
 }