feat: sync the isVerified state of authed user

packages/webapp/src/components/App.tsx

@@ -9,7 +9,7 @@ import 'moment/locale/ar-ly';
 import 'moment/locale/es-us';
 
 import AppIntlLoader from './AppIntlLoader';
-import PrivateRoute from '@/components/Guards/PrivateRoute';
+import { EnsureAuthenticated } from '@/components/Guards/EnsureAuthenticated';
 import GlobalErrors from '@/containers/GlobalErrors/GlobalErrors';
 import DashboardPrivatePages from '@/components/Dashboard/PrivatePages';
 import { Authentication } from '@/containers/Authentication/Authentication';
@@ -20,6 +20,9 @@ import { queryConfig } from '../hooks/query/base';
 import { EnsureUserEmailVerified } from './Guards/EnsureUserEmailVerified';
 import { EnsureAuthNotAuthenticated } from './Guards/EnsureAuthNotAuthenticated';
 
+const EmailConfirmation = LazyLoader({
+  loader: () => import('@/containers/Authentication/EmailConfirmation'),
+});
 const RegisterVerify = LazyLoader({
   loader: () => import('@/containers/Authentication/RegisterVerify'),
 });
@@ -33,24 +36,28 @@ function AppInsider({ history }) {
       <DashboardThemeProvider>
         <Router history={history}>
           <Switch>
+            <Route path={'/auth/register/verify'}>
+              <EnsureAuthenticated>
+                <RegisterVerify />
+              </EnsureAuthenticated>
+            </Route>
+
+            <Route path={'/auth/email_confirmation'}>
+              <EmailConfirmation />
+            </Route>
+
             <Route path={'/auth'}>
               <EnsureAuthNotAuthenticated>
                 <Authentication />
               </EnsureAuthNotAuthenticated>
             </Route>
 
-            <Route path={'/register/verify'}>
-              <PrivateRoute>
-                <RegisterVerify />
-              </PrivateRoute>
-            </Route>
-
             <Route path={'/'}>
-              <PrivateRoute>
+              <EnsureAuthenticated>
                 <EnsureUserEmailVerified>
                   <DashboardPrivatePages />
                 </EnsureUserEmailVerified>
-              </PrivateRoute>
+              </EnsureAuthenticated>
             </Route>
           </Switch>
         </Router>

packages/webapp/src/components/Dashboard/DashboardBoot.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
   useAuthenticatedAccount,
   useCurrentOrganization,
@@ -116,6 +116,14 @@ export function useApplicationBoot() {
       isBooted.current = true;
     },
   );
+  // Reset the loading states once the hook unmount.
+  useEffect(
+    () => () => {
+      isAuthUserLoading && !isBooted.current && stopLoading();
+      isOrgLoading && !isBooted.current && stopLoading();
+    },
+    [isAuthUserLoading, isOrgLoading, stopLoading],
+  );
 
   return {
     isLoading: isOrgLoading || isAuthUserLoading,

packages/webapp/src/components/Guards/EnsureAuthNotAuthenticated.tsx

@@ -3,12 +3,20 @@ import React from 'react';
 import { Redirect } from 'react-router-dom';
 import { useIsAuthenticated } from '@/hooks/state';
 
-interface PrivateRouteProps {
+interface EnsureAuthNotAuthenticatedProps {
   children: React.ReactNode;
+  redirectTo?: string;
 }
 
-export function EnsureAuthNotAuthenticated({ children }: PrivateRouteProps) {
+export function EnsureAuthNotAuthenticated({
+  children,
+  redirectTo = '/',
+}: EnsureAuthNotAuthenticatedProps) {
   const isAuthenticated = useIsAuthenticated();
 
-  return !isAuthenticated ? children : <Redirect to={{ pathname: '/' }} />;
+  return !isAuthenticated ? (
+    <>{children}</>
+  ) : (
+    <Redirect to={{ pathname: redirectTo }} />
+  );
 }

packages/webapp/src/components/Guards/EnsureAuthenticated.tsx

@@ -1,19 +1,22 @@
 // @ts-nocheck
 import React from 'react';
-import BodyClassName from 'react-body-classname';
 import { Redirect } from 'react-router-dom';
 import { useIsAuthenticated } from '@/hooks/state';
 
-interface PrivateRouteProps {
+interface EnsureAuthenticatedProps {
   children: React.ReactNode;
+  redirectTo?: string;
 }
 
-export default function PrivateRoute({ children }: PrivateRouteProps) {
+export function EnsureAuthenticated({
+  children,
+  redirectTo = '/auth/login',
+}: EnsureAuthenticatedProps) {
   const isAuthenticated = useIsAuthenticated();
 
   return isAuthenticated ? (
-    children
+    <>{children}</>
   ) : (
-    <Redirect to={{ pathname: '/auth/login' }} />
+    <Redirect to={{ pathname: redirectTo }} />
   );
 }

packages/webapp/src/components/Guards/EnsureUserEmailVerified.tsx

@@ -4,6 +4,7 @@ import { useAuthUserVerified } from '@/hooks/state';
 
 interface EnsureUserEmailVerifiedProps {
   children: React.ReactNode;
+  redirectTo?: string;
 }
 
 /**
@@ -12,11 +13,12 @@ interface EnsureUserEmailVerifiedProps {
  */
 export function EnsureUserEmailVerified({
   children,
+  redirectTo = '/auth/register/verify',
 }: EnsureUserEmailVerifiedProps) {
   const isAuthVerified = useAuthUserVerified();
 
   if (!isAuthVerified) {
-    return <Redirect to={{ pathname: '/register/verify' }} />;
+    return <Redirect to={{ pathname: redirectTo }} />;
   }
   return <>{children}</>;
 }