feat: wip email confirmation

packages/webapp/src/components/App.tsx

@@ -14,8 +14,15 @@ import GlobalErrors from '@/containers/GlobalErrors/GlobalErrors';
 import DashboardPrivatePages from '@/components/Dashboard/PrivatePages';
 import { Authentication } from '@/containers/Authentication/Authentication';
 
+import LazyLoader from '@/components/LazyLoader';
 import { SplashScreen, DashboardThemeProvider } from '../components';
 import { queryConfig } from '../hooks/query/base';
+import { EnsureUserEmailVerified } from './Guards/EnsureUserEmailVerified';
+import { EnsureAuthNotAuthenticated } from './Guards/EnsureAuthNotAuthenticated';
+
+const RegisterVerify = LazyLoader({
+  loader: () => import('@/containers/Authentication/RegisterVerify'),
+});
 
 /**
  * App inner.
@@ -26,9 +33,24 @@ function AppInsider({ history }) {
       <DashboardThemeProvider>
         <Router history={history}>
           <Switch>
-            <Route path={'/auth'} component={Authentication} />
+            <Route path={'/auth'}>
+              <EnsureAuthNotAuthenticated>
+                <Authentication />
+              </EnsureAuthNotAuthenticated>
+            </Route>
+
+            <Route path={'/register/verify'}>
+              <PrivateRoute>
+                <RegisterVerify />
+              </PrivateRoute>
+            </Route>
+
             <Route path={'/'}>
-              <PrivateRoute component={DashboardPrivatePages} />
+              <PrivateRoute>
+                <EnsureUserEmailVerified>
+                  <DashboardPrivatePages />
+                </EnsureUserEmailVerified>
+              </PrivateRoute>
             </Route>
           </Switch>
         </Router>

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

@@ -0,0 +1,14 @@
+// @ts-nocheck
+import React from 'react';
+import { Redirect } from 'react-router-dom';
+import { useIsAuthenticated } from '@/hooks/state';
+
+interface PrivateRouteProps {
+  children: React.ReactNode;
+}
+
+export function EnsureAuthNotAuthenticated({ children }: PrivateRouteProps) {
+  const isAuthenticated = useIsAuthenticated();
+
+  return !isAuthenticated ? children : <Redirect to={{ pathname: '/' }} />;
+}

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Redirect } from 'react-router-dom';
+import { useAuthUserVerified } from '@/hooks/state';
+
+interface EnsureUserEmailVerifiedProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Higher Order Component to ensure that the user's email is verified.
+ * If not verified, redirects to the email verification page.
+ */
+export function EnsureUserEmailVerified({
+  children,
+}: EnsureUserEmailVerifiedProps) {
+  const isAuthVerified = useAuthUserVerified();
+
+  if (!isAuthVerified) {
+    return <Redirect to={{ pathname: '/register/verify' }} />;
+  }
+  return <>{children}</>;
+}

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

@@ -4,16 +4,16 @@ import BodyClassName from 'react-body-classname';
 import { Redirect } from 'react-router-dom';
 import { useIsAuthenticated } from '@/hooks/state';
 
-export default function PrivateRoute({ component: Component, ...rest }) {
+interface PrivateRouteProps {
+  children: React.ReactNode;
+}
+
+export default function PrivateRoute({ children }: PrivateRouteProps) {
   const isAuthenticated = useIsAuthenticated();
 
-  return (
-    <BodyClassName className={''}>
-      {isAuthenticated ? (
-        <Component />
-      ) : (
-        <Redirect to={{ pathname: '/auth/login' }} />
-      )}
-    </BodyClassName>
+  return isAuthenticated ? (
+    children
+  ) : (
+    <Redirect to={{ pathname: '/auth/login' }} />
   );
 }