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" "*"