From 439511fe3d16aa21be157c1371c269a61d267ea4 Mon Sep 17 00:00:00 2001
From: "alex.opoku" <alex.opoku@sinnerschrader.com>
Date: Thu, 12 Jan 2023 10:38:28 +0100
Subject: [PATCH 1/3] fix: replace unsupported google-login

---
 packages/frontend/package.json             |  1 +
 packages/frontend/src/app.tsx              |  9 +++++---
 packages/frontend/src/pages/login-page.tsx | 27 +++++++++-------------
 yarn.lock                                  | 11 ++++++---
 4 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index d391ec6..7c348c2 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "@apollo/client": "^3.2.2",
     "@lara/components": "^1.0.0",
+    "@react-oauth/google": "^0.5.1",
     "@rebass/grid": "^6.1.0",
     "apollo-link-token-refresh": "^0.4.0",
     "date-fns": "^2.16.1",
diff --git a/packages/frontend/src/app.tsx b/packages/frontend/src/app.tsx
index 4d1979c..f2a37f3 100644
--- a/packages/frontend/src/app.tsx
+++ b/packages/frontend/src/app.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { Router, Switch } from 'react-router-dom'
+import { GoogleOAuthProvider } from '@react-oauth/google'
 
 import ApolloProvider from './apollo-provider'
 import AppHistory from './app-history'
@@ -17,9 +18,11 @@ export const App: React.FunctionComponent = () => {
 
   return (
     <AuthenticationContext.Provider value={{ authenticated, setAuthenticated }}>
-      <ApolloProvider>
-        <InnerApp />
-      </ApolloProvider>
+      <GoogleOAuthProvider clientId={ENVIRONMENT.googleClientID}>
+        <ApolloProvider>
+          <InnerApp />
+        </ApolloProvider>
+      </GoogleOAuthProvider>
     </AuthenticationContext.Provider>
   )
 }
diff --git a/packages/frontend/src/pages/login-page.tsx b/packages/frontend/src/pages/login-page.tsx
index 99953a7..51c8ac4 100644
--- a/packages/frontend/src/pages/login-page.tsx
+++ b/packages/frontend/src/pages/login-page.tsx
@@ -1,14 +1,14 @@
 import React, { useState } from 'react'
-import { GoogleLogin, GoogleLoginResponse, GoogleLoginResponseOffline } from 'react-google-login'
+import { TokenResponse, useGoogleLogin } from '@react-oauth/google'
 
 import { Container, Paragraph, Spacer, StyledLogo } from '@lara/components'
 
 import AppHistory from '../app-history'
-import { PrimaryButton } from '../components/button'
 import { useLoginPageLoginMutation } from '../graphql'
 import { useAuthentication } from '../hooks/use-authentication'
 import { Template } from '../templates/template'
 import { SplashPage } from './splash-page'
+import { PrimaryButton } from '../components/button'
 
 const LoginPage: React.FunctionComponent = () => {
   const { login } = useAuthentication()
@@ -16,14 +16,19 @@ const LoginPage: React.FunctionComponent = () => {
 
   const [authLoading, setAuthLoading] = useState(false)
 
-  const onLoginSuccess = (googleResponse: GoogleLoginResponse | GoogleLoginResponseOffline) => {
+  const googleLogin = useGoogleLogin({
+    onSuccess: (tokenResponse: TokenResponse) => onLoginSuccess(tokenResponse),
+    onError: () => onLoginFailure,
+  })
+
+  const onLoginSuccess = (tokenResponse: TokenResponse) => {
     setAuthLoading(true)
 
-    if (!('getAuthResponse' in googleResponse)) {
+    if (!tokenResponse) {
       return
     }
 
-    const accessToken = googleResponse.getAuthResponse().access_token
+    const accessToken = tokenResponse.access_token
 
     mutate({ variables: { token: accessToken } }).then((response) => {
       const { data } = response
@@ -44,7 +49,6 @@ const LoginPage: React.FunctionComponent = () => {
   if (authLoading) {
     return <SplashPage />
   }
-
   return (
     <Template type={'Secondary'}>
       <Spacer bottom="xxl">
@@ -57,16 +61,7 @@ const LoginPage: React.FunctionComponent = () => {
           </Paragraph>
         </Spacer>
         <Paragraph center noMargin>
-          <GoogleLogin
-            render={({ onClick, disabled }) => (
-              <PrimaryButton onClick={onClick} disabled={disabled}>
-                sign in with Google
-              </PrimaryButton>
-            )}
-            clientId={ENVIRONMENT.googleClientID}
-            onSuccess={onLoginSuccess}
-            onFailure={onLoginFailure}
-          />
+          <PrimaryButton onClick={() => googleLogin()}>sign in with Google</PrimaryButton>
         </Paragraph>
       </Container>
     </Template>
diff --git a/yarn.lock b/yarn.lock
index a02eee6..0ee54ba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3881,6 +3881,11 @@
   resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
   integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
 
+"@react-oauth/google@^0.5.1":
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/@react-oauth/google/-/google-0.5.1.tgz#fc5cf33bff5d59583c5b0ed387431350216dd907"
+  integrity sha512-XCMMke24klAHIVnrZAMibodyjSUsxBOJ+vO5yvRptWC2Vnq02uLUnydjtIdCzCUIAxbvbFbQWZxG0xF0Y8GtHA==
+
 "@rebass/grid@^6.1.0":
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/@rebass/grid/-/grid-6.1.0.tgz#17827e13d9b461d86e3e5c6b47393b5aea857370"
@@ -4558,9 +4563,9 @@
     "@types/react" "*"
 
 "@types/react@*", "@types/react@^17", "@types/react@^17.0.4", "@types/react@^17.0.9":
-  version "17.0.50"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.50.tgz#39abb4f7098f546cfcd6b51207c90c4295ee81fc"
-  integrity sha512-ZCBHzpDb5skMnc1zFXAXnL3l1FAdi+xZvwxK+PkglMmBrwjpp9nKaWuEvrGnSifCJmBFGxZOOFuwC6KH/s0NuA==
+  version "17.0.52"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.52.tgz#10d8b907b5c563ac014a541f289ae8eaa9bf2e9b"
+  integrity sha512-vwk8QqVODi0VaZZpDXQCmEmiOuyjEFPY7Ttaw5vjM112LOq37yz1CDJGrRJwA1fYEq4Iitd5rnjd1yWAc/bT+A==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"

From c7d058177e1c8255dbec8150c22301d42e65169d Mon Sep 17 00:00:00 2001
From: "alex.opoku" <alex.opoku@sinnerschrader.com>
Date: Thu, 12 Jan 2023 10:48:11 +0100
Subject: [PATCH 2/3] fix: format

---
 packages/frontend/src/pages/login-page.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/frontend/src/pages/login-page.tsx b/packages/frontend/src/pages/login-page.tsx
index 51c8ac4..8ca05bc 100644
--- a/packages/frontend/src/pages/login-page.tsx
+++ b/packages/frontend/src/pages/login-page.tsx
@@ -49,6 +49,7 @@ const LoginPage: React.FunctionComponent = () => {
   if (authLoading) {
     return <SplashPage />
   }
+
   return (
     <Template type={'Secondary'}>
       <Spacer bottom="xxl">

From a5c9fdd48b21a22c6a6277fb8dd8d7cfb7a08f06 Mon Sep 17 00:00:00 2001
From: "alex.opoku" <alex.opoku@sinnerschrader.com>
Date: Thu, 12 Jan 2023 11:04:02 +0100
Subject: [PATCH 3/3] fix: remove old login dep

---
 packages/frontend/package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 7c348c2..6291a91 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -27,7 +27,6 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-focus-lock": "^2.9.0",
-    "react-google-login": "^5.1.21",
     "react-hook-form": "^7.28.1",
     "react-localization": "^1.0.15",
     "react-router": "^5.2.0",