diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index d391ec6..6291a91 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",
@@ -26,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",
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 (
-
-
-
+
+
+
+
+
)
}
diff --git a/packages/frontend/src/pages/login-page.tsx b/packages/frontend/src/pages/login-page.tsx
index 99953a7..8ca05bc 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
@@ -57,16 +62,7 @@ const LoginPage: React.FunctionComponent = () => {
- (
-
- sign in with Google
-
- )}
- clientId={ENVIRONMENT.googleClientID}
- onSuccess={onLoginSuccess}
- onFailure={onLoginFailure}
- />
+ googleLogin()}>sign in with Google
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" "*"