feat(google): add toast to display error message from google

AmruthPillai · Jul 13, 2022 · 25cf594 · 25cf594
1 parent 1c3beee
commit 25cf594
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/client/modals/auth/LoginModal.tsx b/client/modals/auth/LoginModal.tsx
@@ -87,16 +87,24 @@ const LoginModal: React.FC = () => {
 
   const handleLoginWithGoogle = async () => {
     google.accounts.id.initialize({
+      auto_select: true,
+      itp_support: true,
       client_id: env('GOOGLE_CLIENT_ID'),
       callback: async (response: any) => {
         await loginWithGoogleMutation({ credential: response.credential });
 
         handleClose();
       },
-      auto_select: false,
     });
 
-    google.accounts.id.prompt();
+    google.accounts.id.prompt((notification: any) => {
+      if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
+        const reason = notification.getNotDisplayedReason() || notification.getSkippedReason();
+
+        toast.error(`Google returned an error while trying to sign in: ${reason}.`);
+        toast("Please try logging in using email/password, or use another browser that supports Google's One Tap API.");
+      }
+    });
   };
 
   const PasswordVisibility = (): React.ReactElement => {

diff --git a/client/pages/_app.tsx b/client/pages/_app.tsx
@@ -54,7 +54,7 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
         </LocalizationProvider>
       </ReduxProvider>
 
-      <Script src="https://accounts.google.com/gsi/client" />
+      <Script src="https://accounts.google.com/gsi/client" async defer />
     </>
   );
 };