From ec8d62d106dd6b77780905e52ffe1f4cb59a01fa Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheen@symph.co>
Date: Thu, 18 May 2023 01:58:35 +0800
Subject: [PATCH] show toast when oauth login error

---
 frontend/src/hooks/useProviderAuth.ts       | 22 ++++++++++++++++++++-
 frontend/src/pages/_app.tsx                 |  8 +++++---
 frontend/src/pages/login/provider/error.tsx | 13 +++++++-----
 3 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/frontend/src/hooks/useProviderAuth.ts b/frontend/src/hooks/useProviderAuth.ts
index 2493c5e47..ca6e85db6 100644
--- a/frontend/src/hooks/useProviderAuth.ts
+++ b/frontend/src/hooks/useProviderAuth.ts
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import jwt_decode from 'jwt-decode';
 
+import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
 import SecurityClient, { PROVIDER_AUTH_TOKEN_KEY } from '@app/components/utilities/SecurityClient';
 
 export const useProviderAuth = () => {
@@ -8,12 +9,19 @@ export const useProviderAuth = () => {
     const [userId, setUserId] = useState<string>('');
     const [providerAuthToken, setProviderAuthToken] = useState<string>('');
     const [isProviderUserCompleted, setIsProviderUserCompleted] = useState<boolean>();
+    const { createNotification } = useNotificationContext();
+    const AUTH_ERROR_KEY = 'PROVIDER_AUTH_ERROR'
 
     useEffect(() => {
         SecurityClient.setProviderAuthToken('')
+        window.localStorage.removeItem(AUTH_ERROR_KEY);
 
         const handleStorageChange = (event: StorageEvent) => {
-            if (event.storageArea === localStorage && event.key === PROVIDER_AUTH_TOKEN_KEY) {
+            if (event.storageArea !== localStorage) {
+                return;
+            }
+
+            if (event.key === PROVIDER_AUTH_TOKEN_KEY) {
                 if (event.newValue) {
                     const token = event.newValue;
                     const {
@@ -33,6 +41,18 @@ export const useProviderAuth = () => {
                 }
                 setProviderAuthToken(event.newValue || '');
             }
+
+            if (event.key === AUTH_ERROR_KEY) {
+                if (event.newValue) {
+                    createNotification({
+                        text: 'An error has occured during login.',
+                        type: 'error',
+                        timeoutMs: 6000,
+                    })
+
+                    window.localStorage.removeItem(AUTH_ERROR_KEY);
+                }
+            }
         };
 
         window.addEventListener('storage', handleStorageChange);
diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx
index 81379cbba..20c3340c2 100644
--- a/frontend/src/pages/_app.tsx
+++ b/frontend/src/pages/_app.tsx
@@ -57,9 +57,11 @@ const App = ({ Component, pageProps, ...appProps }: NextAppProp): JSX.Element =>
   ) {
     return (
       <QueryClientProvider client={queryClient}>
-        <AuthProvider>
-          <Component {...pageProps} />
-        </AuthProvider>
+        <NotificationProvider>
+          <AuthProvider>
+            <Component {...pageProps} />
+          </AuthProvider>
+        </NotificationProvider>
       </QueryClientProvider>
     );
   }
diff --git a/frontend/src/pages/login/provider/error.tsx b/frontend/src/pages/login/provider/error.tsx
index 3f9a0fe0c..049323b53 100644
--- a/frontend/src/pages/login/provider/error.tsx
+++ b/frontend/src/pages/login/provider/error.tsx
@@ -1,7 +1,10 @@
+import { useEffect } from "react";
+
 export default function LoginProviderError() {
-    return (
-        <div className="bg-gradient-to-tr from-bunker-500 to-bunker-800 h-screen flex flex-col justify-center pb-28 px-6 items-center">
-            <span className="text-white text-xl" >Oops! An error has occured.</span>
-        </div>
-    )
+    useEffect(() => {
+        window.localStorage.setItem('PROVIDER_AUTH_ERROR', 'err');
+        window.close();
+    }, [])
+
+    return <div />
 }