✨ feat: migrate gapi to gsi oauth2

michaelcaxias · Feb 20, 2023 · 225e2f0 · 225e2f0
1 parent 41e108e
commit 225e2f0
Show file tree

Hide file tree

Showing 8 changed files with 141 additions and 59 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,7 +13,6 @@
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "framer-motion": "^7.6.1",
-    "gapi-script": "^1.2.0",
     "node-sass": "^7.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -34,6 +33,7 @@
     "eject": "react-scripts eject"
   },
   "devDependencies": {
+    "axios": "^1.3.3",
     "cypress": "^9.5.0",
     "eslint": "^8.26.0",
     "eslint-plugin-react": "^7.31.10",

diff --git a/public/index.html b/public/index.html
@@ -37,6 +37,7 @@
   <meta property="twitter:description"
     content="Basta copiar a sua agenda do dia no seu Slack e colar aqui, nós vamos adicionar cada momento do seu dia com um único clique!">
   <meta property="twitter:image" content="https://i.imgur.com/pl7D97r.png">
+  <script src="https://apis.google.com/js/api.js" async defer></script>
 </head>
 
 <body>

diff --git a/src/components/AddEventButton/AddEventButton.jsx b/src/components/AddEventButton/AddEventButton.jsx
@@ -6,7 +6,7 @@ import Snackbar from '@mui/material/Snackbar';
 import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/Close';
 
-import { gapi } from 'gapi-script';
+const { gapi } = window;
 
 import Alert from '../Alert/Alert';
 

diff --git a/src/components/LoginButton/LoginButton.jsx b/src/components/LoginButton/LoginButton.jsx
@@ -1,52 +1,62 @@
 import React, { useContext } from 'react';
+import { MyContext } from '../../context/Provider';
 
 import { Button } from '@mui/material';
-
 import { FcGoogle } from 'react-icons/fc';
 import { ImExit } from 'react-icons/im';
 
-import { gapi } from 'gapi-script';
-
 import { useNavigate } from 'react-router-dom';
-
-import { MyContext } from '../../context/Provider';
+import { useGoogleLogin, googleLogout } from '@react-oauth/google';
+import axios from 'axios';
 
 import './LoginButton.scss';
 
 const blankImage = 'https://i.imgur.com/qEgz28w.png';
+const SCOPES = 'https://www.googleapis.com/auth/calendar https://www.googleapis.com/auth/userinfo.profile';
 
 export default function LoginButton() {
-  const { isSignedIn, setUserImage, changeSignedInState } = useContext(MyContext);
+  const { isSignedIn, setUserImage, setUserName, setUserEmail, changeSignedInState } = useContext(MyContext);
   const navigate = useNavigate();
 
-  const handleAuthClick = async () => {
-    // Faz o Login
-    await gapi.auth2.getAuthInstance().signIn();
+  const login = useGoogleLogin({
+    scope: SCOPES,
+    onSuccess: (response) => signInWorkflow(response),
+    onError: (error) => console.error(error),
+  });
 
-    // Depois verifica se o usuário está logado, e seta esse valor em isSignedIn
-    await gapi.auth2.getAuthInstance().isSignedIn.listen(changeSignedInState);
-    await changeSignedInState(gapi.auth2.getAuthInstance().isSignedIn.get());
-
-    // Agora pega a imagem do usuário e seta em userImage
-    const profileImage = gapi.auth2.getAuthInstance().currentUser.get()
-      .getBasicProfile().getImageUrl();
+  const signInWorkflow = async (response) => {
+    changeSignedInState(true);
+    const userInfo = await requestUserInfo(response);
+    updateUserInfo(userInfo.data);
+    navigate('/scheduler');
+  };
 
-    setUserImage(profileImage);
+  const updateUserInfo = (userInfo) => {
+    const { picture, name, email } = userInfo;
+    setUserImage(picture);
+    setUserName(name);
+    setUserEmail(email);
+  };
 
-    // Finalmente navega para a página de schedule
-    navigate('/scheduler');
+  const requestUserInfo = async (response) => {
+    const gettingUserInfo = await axios.get('https://www.googleapis.com/oauth2/v3/userinfo', {
+      headers: {
+        Authorization: `Bearer ${response.access_token}`
+      }
+    });
+    return gettingUserInfo;
   };
 
   const handleSignoutClick = () => {
-    gapi.auth2.getAuthInstance().signOut();
+    googleLogout();
     setUserImage(blankImage);
     navigate('/');
   };
 
   const connectButton = (
     <Button
       className="login-logout login-button"
-      onClick={ handleAuthClick }
+      onClick={ login }
       size="large"
     >
       <div className="google-icon-div">

diff --git a/src/components/Menu/Menu.jsx b/src/components/Menu/Menu.jsx
@@ -1,8 +1,9 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { gapi } from 'gapi-script';
+const { gapi } = window;
 import { CgLogOut } from 'react-icons/cg';
 import { useNavigate } from 'react-router-dom';
+import { googleLogout } from '@react-oauth/google';
 
 import { 
   Dialog,
@@ -28,7 +29,7 @@ const Menu = (props) => {
   };
 
   const handleLogout = () => {
-    gapi.auth2.getAuthInstance().signOut();
+    googleLogout();
     changeSignedInState(false);
 
     onClose();

diff --git a/src/context/Provider.jsx b/src/context/Provider.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useState, useEffect, createContext, useRef } from 'react';
-import { gapi } from 'gapi-script';
+const { gapi } = window;
 import usePersistedState from '../hooks/usePersistedState';
 
 const blankImage = 'https://i.imgur.com/qEgz28w.png';
@@ -36,6 +36,8 @@ export function Provider({ children }) {
     scheduleValue,
     setMinutes,
     setUserImage,
+    setUserName,
+    setUserEmail,
     userImage,
     userName,
     userEmail,
@@ -49,38 +51,30 @@ export function Provider({ children }) {
   };
 
   useEffect(() => {
-    const apiKey = REACT_APP_API_KEY || '';
-    const clientId = REACT_APP_CLIENT_ID || '';
-
+    try {
+      initalizeGapi();
+    } catch (error) {
+      console.error('Error intialize: ', error);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const initalizeGapi = async () => {
     gapi.load('client:auth2', async () => {
-      try {
-        await gapi.client.init({
-          apiKey,
-          clientId,
-          discoveryDocs: DISCOVERY_DOCS,
-          scope: SCOPES,
-        });
-        gapi.auth2.getAuthInstance().isSignedIn.listen(changeSignedInState);
-        changeSignedInState(gapi.auth2.getAuthInstance().isSignedIn.get());
-
-        await gapi.client.load('calendar', 'v3');
-        if (isSignedIn) {
-          setUserImage(gapi.auth2.getAuthInstance().currentUser.get()
-            .getBasicProfile().getImageUrl());
-
-          setUserName(gapi.auth2.getAuthInstance().currentUser.get()
-            .getBasicProfile().getName());
-
-          setUserEmail(gapi.auth2.getAuthInstance().currentUser.get()
-            .getBasicProfile().getEmail());
-        }
-
-        setLoading(false);
-      } catch (error) {
-        console.log('Error intialize: ', error);
-      }
+      const apiKey = REACT_APP_API_KEY || '';
+      const clientId = REACT_APP_CLIENT_ID || '';
+
+      await gapi.client.init({
+        apiKey,
+        clientId,
+        discoveryDocs: DISCOVERY_DOCS,
+        scope: SCOPES,
+      });
+
+      await gapi.client.load('calendar', 'v3');
     });
-  }, [setUserImage, isSignedIn]);
+  };
 
   return (
     <MyContext.Provider value={ context }>

diff --git a/src/index.js b/src/index.js
@@ -2,13 +2,17 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { Provider } from './context/Provider';
 import App from './App';
+import { GoogleOAuthProvider } from '@react-oauth/google';
+const { REACT_APP_CLIENT_ID } = process.env;
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 
 root.render(
   <React.StrictMode>
-    <Provider>
-      <App />
-    </Provider>
+    <GoogleOAuthProvider clientId={REACT_APP_CLIENT_ID}>
+      <Provider>
+        <App />
+      </Provider>
+    </GoogleOAuthProvider>
   </React.StrictMode>
 );