rename user to token, save login state in browser

Author: lindsey-volta

gatsby/onInitialClientRender.js

@@ -2,7 +2,6 @@ import loadScript from "load-script"
 import { store } from "./wrapRootElement"
 
 export const onInitialClientRender = () => {
-
   const gapiPromise = new Promise((resolve, reject) => {
     loadScript("https://apis.google.com/js/api.js", err => {
       if (err) {
@@ -36,6 +35,22 @@ export const onInitialClientRender = () => {
         return
       }
 
+      try {
+        const storedTokenString = localStorage.getItem("google_token")
+        if (storedTokenString) {
+          const storedToken = JSON.parse(storedTokenString)
+          if (storedToken.expires_at > Date.now()) {
+            gapi.client.setToken(storedToken)
+            store.dispatch({ type: "setToken", token: storedToken })
+          } else {
+            localStorage.removeItem("google_token")
+          }
+        }
+      } catch (e) {
+        console.error("Unable to restore token from localStorage:", e)
+        localStorage.removeItem("google_token")
+      }
+
       Promise.all([
         gapi.client.load(
           "https://analyticsdata.googleapis.com/$discovery/rest"
@@ -51,28 +66,43 @@ export const onInitialClientRender = () => {
             client_id: clientId,
             scope: SCOPES.join(" "),
             callback: tokenResponse => {
-              console.log("onInitialClientRender: callback invoked", 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 })
+                const tokenWithExpiry = {
+                  ...tokenResponse,
+                  expires_at: Date.now() + tokenResponse.expires_in * 1000,
+                }
+                localStorage.setItem(
+                  "google_token",
+                  JSON.stringify(tokenWithExpiry)
+                )
+                gapi.client.setToken(tokenResponse)
+                console.log("onInitialClientRender: setToken", tokenResponse)
+                store.dispatch({ type: "setToken", token: tokenResponse })
               } else {
-                console.error("onInitialClientRender: tokenResponse did not contain access_token.", tokenResponse);
-                store.dispatch({ type: "setUser", user: undefined })
+                console.error(
+                  "onInitialClientRender: tokenResponse did not contain access_token.",
+                  tokenResponse
+                )
+                store.dispatch({ type: "setToken", token: undefined })
               }
-            }, error_callback: (error) => {
-              console.error("GIS Error:", error);
+            },
+            error_callback: error => {
+              console.error("GIS Error:", 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: "setToken", token: undefined })
           store.dispatch({ type: "gapiStatus", status: "cannot initialize" })
           console.error(e)
         })

gatsby/wrapRootElement.tsx

@@ -18,7 +18,7 @@ import {PartialDeep} from 'type-fest';
 
 type State =
     {
-      user?: {},
+      token?: {},
       gapi?: PartialDeep<typeof gapi>,
       google?: any,
       tokenClient?: any,
@@ -27,16 +27,16 @@ type State =
     }
 
 type Action =
-    | { type: 'setUser', user: {} | undefined  }
+    | { type: 'setToken', token: {} | 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) => {
   switch (action.type) {
-    case "setUser":
-      return { ...state, user: action.user }
+    case "setToken":
+      return { ...state, user: action.token }
     case "setGapi":
       return { ...state, gapi: action.gapi }
     case "setGoogle":

src/components/Layout/useLogin.ts

@@ -1,7 +1,7 @@
 import { Requestable, RequestStatus } from "@/types"
 import { useState, useEffect, useCallback } from "react"
 
-import { useSelector } from "react-redux"
+import { useSelector, useDispatch } from "react-redux"
 
 export enum UserStatus {
   SignedIn,
@@ -11,7 +11,7 @@ export enum UserStatus {
 
 interface Successful {
   userStatus: UserStatus
-  user: gapi.auth2.GoogleUser | undefined
+  user: any
   logout: () => void
   login: () => void
 }
@@ -21,24 +21,35 @@ interface Failed {
 }
 const useLogin = (): Requestable<Successful, {}, InProgress, Failed> => {
   const [requestStatus, setRequestStatus] = useState(RequestStatus.NotStarted)
-  const user = useSelector((state: AppState) => state.user)
+  const token = useSelector((state: AppState) => state.token)
   const gapi = useSelector((state: AppState) => state.gapi)
   const gapiStatus = useSelector((state: AppState) => state.gapiStatus)
-  const [userStatus, setUserStatus] = useState<UserStatus>(UserStatus.Pending)
+  const tokenClient = useSelector((state: AppState) => state.tokenClient)
+  const google = useSelector((state: AppState) => state.google)
+  const dispatch = useDispatch()
+
+  console.log("useLogin: token", token);
+  console.log("useLogin: gapiStatus", gapiStatus);
+  const userStatus = token ? UserStatus.SignedIn : UserStatus.SignedOut
 
   const login = useCallback(() => {
-    if (gapi === undefined) {
-      return
+    console.log("login called. tokenClient:", tokenClient)
+    if (tokenClient) {
+      console.log("requesting access token")
+      tokenClient.requestAccessToken()
     }
-    gapi.auth2.getAuthInstance().signIn()
-  }, [gapi])
+  }, [tokenClient])
 
   const logout = useCallback(() => {
-    if (gapi === undefined) {
-      return
+    const token = gapi?.client.getToken()
+    if (token && google) {
+      google.accounts.oauth2.revoke(token.access_token, () => {
+        gapi?.client.setToken(null)
+        dispatch({ type: "setUser", user: undefined })
+        localStorage.removeItem("google_token")
+      })
     }
-    gapi.auth2.getAuthInstance().signOut()
-  }, [gapi])
+  }, [gapi, google, dispatch])
 
   useEffect(() => {
     if (gapiStatus === "cannot initialize") {
@@ -61,19 +72,11 @@ const useLogin = (): Requestable<Successful, {}, InProgress, Failed> => {
       setRequestStatus(RequestStatus.InProgress)
     }
 
-    gapi.auth2.getAuthInstance().isSignedIn.listen(signedIn => {
-      setUserStatus(signedIn ? UserStatus.SignedIn : UserStatus.SignedOut)
-    })
-
-    gapi.auth2.getAuthInstance().isSignedIn.get()
-      ? setUserStatus(UserStatus.SignedIn)
-      : setUserStatus(UserStatus.SignedOut)
-
     setRequestStatus(RequestStatus.Successful)
   }, [gapi, requestStatus, gapiStatus])
 
   if (requestStatus === RequestStatus.Successful) {
-    return { status: requestStatus, userStatus, user, login, logout }
+    return { status: requestStatus, userStatus, user: token, login, logout }
   }
   if (requestStatus === RequestStatus.Failed) {
     return { status: requestStatus, message: gapiStatus || "unknown" }
@@ -82,4 +85,4 @@ const useLogin = (): Requestable<Successful, {}, InProgress, Failed> => {
   return { status: requestStatus }
 }
 
-export default useLogin
+export default useLogin

src/global.d.ts

@@ -23,7 +23,7 @@ declare module "*.svg" {
 declare module "*.module.css";
 
 declare interface AppState {
-  user?: User
+  token?: Token
   gapi?: typeof gapi
   gapiStatus?: string
   measurementID: string