fix: handle email verification bug

akmalhisyammm · Dec 6, 2021 · 46681db · 46681db
1 parent e9f9d7e
commit 46681db
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 63 deletions.
diff --git a/src/contexts/auth/AuthProvider.tsx b/src/contexts/auth/AuthProvider.tsx
@@ -14,13 +14,11 @@ export const AuthProvider: React.FC = ({ children }) => {
   const [loading, setLoading] = useState<boolean>(true);
 
   useEffect(() => {
-    const unsubscribe = firebaseAuth.onAuthStateChanged((user: User | null) => {
-      setCurrentUser(user);
+    const unsubscribe = firebaseAuth.onIdTokenChanged((user: User | null) => {
+      setCurrentUser(user?.emailVerified ? user : null);
       setLoading(false);
     });
 
-    console.log(currentUser);
-
     return unsubscribe;
   }, [currentUser]);
 

diff --git a/src/pages/auth/Login.tsx b/src/pages/auth/Login.tsx
@@ -1,24 +1,19 @@
 import { useRef, useContext, useState, KeyboardEvent } from 'react';
-import { useHistory } from 'react-router-dom';
+import { Redirect, useHistory } from 'react-router-dom';
 import {
   IonButton,
   IonCard,
   IonCardContent,
   IonCardHeader,
   IonCol,
-  IonContent,
   IonGrid,
-  IonHeader,
   IonIcon,
   IonInput,
   IonItem,
   IonList,
-  IonModal,
   IonRouterLink,
   IonRow,
   IonText,
-  IonTitle,
-  IonToolbar,
   useIonLoading,
   useIonToast,
 } from '@ionic/react';
@@ -30,6 +25,7 @@ import { AuthContext } from 'contexts/auth';
 import Layout from 'components/layout';
 
 import styles from 'styles/auth/Login.module.scss';
+import ForgotPasswordModal from 'components/auth/login/ForgotPasswordModal';
 
 const Login: React.FC = () => {
   const [presentLoading, dismissLoading] = useIonLoading();
@@ -41,10 +37,14 @@ const Login: React.FC = () => {
   const passwordRef = useRef<HTMLIonInputElement>(null);
   const forgotPasswordEmailRef = useRef<HTMLIonInputElement>(null);
 
-  const { login } = useContext(AuthContext);
+  const { currentUser, login } = useContext(AuthContext);
 
   const history = useHistory();
 
+  if (currentUser) {
+    return <Redirect to="/" />;
+  }
+
   const handleLogin = async () => {
     const email = emailRef.current?.value;
     const password = passwordRef.current?.value;
@@ -254,56 +254,21 @@ const Login: React.FC = () => {
         </div>
       </Layout>
 
-      <IonModal isOpen={isForgotPassword}>
-        <IonHeader>
-          <IonToolbar color="secondary">
-            <IonTitle>Atur Ulang Kata Sandi</IonTitle>
-          </IonToolbar>
-        </IonHeader>
-
-        <IonContent>
-          <IonGrid>
-            <IonRow>
-              <IonCol>
-                <IonItem>
-                  <IonIcon icon={mailOutline} color="primary" slot="start" />
-                  <IonInput
-                    type="text"
-                    placeholder="Masukkan email Anda"
-                    ref={forgotPasswordEmailRef}
-                    required
-                  />
-                </IonItem>
-              </IonCol>
-            </IonRow>
-
-            <IonRow className="ion-text-center">
-              <IonCol>
-                <IonButton
-                  color="primary"
-                  expand="block"
-                  fill="solid"
-                  shape="round"
-                  onClick={handleRequestPasswordReset}
-                >
-                  Kirim
-                </IonButton>
-              </IonCol>
-              <IonCol>
-                <IonButton
-                  color="danger"
-                  expand="block"
-                  fill="outline"
-                  shape="round"
-                  onClick={() => setIsForgotPassword(false)}
-                >
-                  Batal
-                </IonButton>
-              </IonCol>
-            </IonRow>
-          </IonGrid>
-        </IonContent>
-      </IonModal>
+      <ForgotPasswordModal
+        isOpen={isForgotPassword}
+        handleSendRequest={handleRequestPasswordReset}
+        onDismiss={setIsForgotPassword}
+      >
+        <IonItem>
+          <IonIcon icon={mailOutline} color="primary" slot="start" />
+          <IonInput
+            type="text"
+            placeholder="Masukkan email Anda"
+            ref={forgotPasswordEmailRef}
+            required
+          />
+        </IonItem>
+      </ForgotPasswordModal>
     </>
   );
 };

diff --git a/src/pages/auth/Register.tsx b/src/pages/auth/Register.tsx
@@ -1,5 +1,5 @@
 import { useRef, useState, useContext, KeyboardEvent } from 'react';
-import { useHistory } from 'react-router-dom';
+import { Redirect, useHistory } from 'react-router-dom';
 import {
   IonButton,
   IonCard,
@@ -47,10 +47,14 @@ const Register: React.FC = () => {
   const passwordRef = useRef<HTMLIonInputElement>(null);
   const confirmPasswordRef = useRef<HTMLIonInputElement>(null);
 
-  const { register } = useContext(AuthContext);
+  const { currentUser, register } = useContext(AuthContext);
 
   const history = useHistory();
 
+  if (currentUser) {
+    return <Redirect to="/" />;
+  }
+
   const handleRegister = async () => {
     const fullName = fullNameRef.current?.value;
     const email = emailRef.current?.value;