fix: handle fallback route at router level logic

packages/earth-map/src/auth/auth0.tsx

@@ -66,7 +66,6 @@ export const Auth0Provider = ({
   const [isLoading, setIsLoading] = useState(true);
   const [email, setEmail] = useState('');
   const [userData, setUserData] = useState({});
-  const [verifiedEmail, setVerifiedEmail] = useState(false);
 
   const [groups, setGroups] = useState([]);
   const [roles, setRoles] = useState({});
@@ -125,9 +124,7 @@ export const Auth0Provider = ({
         allGroups: roleGroups,
       };
       setUserData(userData);
-
       setEmail(userData.email);
-      setVerifiedEmail(userData.emailVerified);
 
       const { user } = SessionStorage.getObject('ephemeral');
       const selected = user && user.group ? user.group : mapRoleGroups(roles, ['*']);
@@ -169,7 +166,6 @@ export const Auth0Provider = ({
         roles,
         permissions,
         selectedGroup,
-        verifiedEmail,
         login,
         logout,
         getUser,

packages/earth-map/src/auth/model.tsx

@@ -31,7 +31,6 @@ export interface Auth0 {
   isLoading?: boolean;
   email?: string;
   userData?: User;
-  verifiedEmail?: boolean;
   // TODO: rename this to selectedGroups
   selectedGroup?: string[];
   groups?: string[];
@@ -46,6 +45,8 @@ export interface Auth0 {
 
 export interface User {
   name?: string;
+  email?: string;
   picture?: string;
+  emailVerified?: boolean;
   allGroups?: string[];
 }

packages/earth-map/src/pages/main/authenticated/component.tsx

@@ -22,7 +22,7 @@ import AsyncPage from 'pages/main/async';
 import React, { useEffect } from 'react';
 
 const AuthenticatedPage = ({ component: Component, fallbackRoute, redirect, ...rest }) => {
-  const { isAuthenticated, login, verifiedEmail } = useAuth0();
+  const { isAuthenticated, login } = useAuth0();
 
   useEffect(() => {
     const fn = async () => {
@@ -32,9 +32,6 @@ const AuthenticatedPage = ({ component: Component, fallbackRoute, redirect, ...r
         // save target URL to redirect to after login;
         await login({ appState: { targetUrl: target } });
       }
-      if (!verifiedEmail && fallbackRoute) {
-        redirect({ type: fallbackRoute });
-      }
     };
     fn();
   }, [isAuthenticated, login]);

packages/earth-map/src/pages/main/authorized/component.tsx

@@ -22,7 +22,7 @@ import AsyncPage from 'pages/main/async';
 import React, { useEffect } from 'react';
 
 const AuthorizedPage = ({ component: Component, fallbackRoute, redirect, ...rest }) => {
-  const { isAuthenticated, isAuthorized, login } = useAuth0();
+  const { isAuthenticated, isAuthorized, login, userData } = useAuth0();
 
   useEffect(() => {
     const fn = async () => {
@@ -31,7 +31,7 @@ const AuthorizedPage = ({ component: Component, fallbackRoute, redirect, ...rest
         const target = window.location.href.replace(window.location.origin, '');
         // save target URL to redirect to after login;
         await login({ appState: { targetUrl: target } });
-      } else if (!isAuthorized) {
+      } else if (!userData.emailVerified || !isAuthorized) {
         redirect({ type: fallbackRoute });
       }
     };

packages/earth-map/src/pages/main/component.tsx

@@ -25,22 +25,16 @@ import AuthenticatedPage from './authenticated';
 import AuthorizedPage from './authorized';
 
 const Main = ({ router }) => {
+  const { userData } = useAuth0();
   const { type, routesMap } = router;
-  const { verifiedEmail, email } = useAuth0();
-  const nonVerifiedEmail = email && !verifiedEmail;
-  const { page, authenticated, authorized, fallbackRoute, verifyEmailRoute } = routesMap[type];
-  const fallback = nonVerifiedEmail ? verifyEmailRoute : fallbackRoute;
+  const { page, isAuthenticated, isAuthorized, fallbackRoute } = routesMap[type];
 
   let Page;
-
   switch (true) {
-    case authenticated && authorized:
+    case isAuthenticated(userData) && isAuthorized(userData):
       Page = AuthorizedPage;
       break;
-    case authenticated:
-      Page = AuthenticatedPage;
-      break;
-    case nonVerifiedEmail:
+    case isAuthenticated(userData):
       Page = AuthenticatedPage;
       break;
     default:
@@ -51,31 +45,31 @@ const Main = ({ router }) => {
     <React.Fragment>
       {page === 'home' && (
         // @ts-ignore
-        <Page page="home" fallbackRoute={fallback} />
+        <Page page="home" fallbackRoute={fallbackRoute(userData)} />
       )}
       {page === 'earth' && (
         // @ts-ignore
-        <Page page="earth" fallbackRoute={fallback} />
+        <Page page="earth" fallbackRoute={fallbackRoute(userData)} />
       )}
       {page === 'experience' && (
         // @ts-ignore
-        <Page page="experience" fallbackRoute={fallback} />
+        <Page page="experience" fallbackRoute={fallbackRoute(userData)} />
       )}
       {page === 'change-email' && (
         // @ts-ignore
-        <Page page="change-email" fallbackRoute={fallback} />
+        <Page page="change-email" fallbackRoute={fallbackRoute(userData)} />
       )}
       {page === 'not-found' && (
         // @ts-ignore
-        <Page page="not-found" fallbackRoute={fallback} />
+        <Page page="not-found" fallbackRoute={fallbackRoute(userData)} />
       )}
       {page === 'error' && (
         // @ts-ignore
-        <Page page="error" fallbackRoute={fallback} />
+        <Page page="error" fallbackRoute={fallbackRoute(userData)} />
       )}
       {page === 'unauthorized' && (
         // @ts-ignore
-        <Page page="unauthorized" fallbackRoute={fallback} />
+        <Page page="unauthorized" fallbackRoute={fallbackRoute(userData)} />
       )}
       {page === 'verify-email' && (
         // @ts-ignore

packages/earth-map/src/pages/verify-email/component.tsx

@@ -21,7 +21,7 @@ import { useAuth0 } from 'auth/auth0';
 import { APP_NAME, ENABLE_PUBLIC_ACCESS } from 'config';
 import React from 'react';
 
-import { Button } from '@marapp/earth-components';
+import { Button } from '@marapp/earth-shared';
 
 import './styles.scss';
 

packages/earth-map/src/routes.tsx

@@ -17,81 +17,104 @@
   specific language governing permissions and limitations under the License.
 */
 
+import { User } from 'auth/model';
 import { BASE_URL, ENABLE_PUBLIC_ACCESS } from 'config';
 import qs from 'query-string';
 import { NOT_FOUND } from 'redux-first-router';
 import restoreScroll from 'redux-first-router-restore-scroll';
 
 const UNAUTHORIZED_PAGE = 'UNAUTHORIZED';
 const VERIFY_EMAIL = 'VERIFY_EMAIL';
-const fallbackRoute = ENABLE_PUBLIC_ACCESS ? null : UNAUTHORIZED_PAGE;
+
+/**
+ * Authenticated resolver.
+ * @param user
+ */
+const isAuthenticatedRequired = (user: User = {}): boolean => {
+  return !ENABLE_PUBLIC_ACCESS;
+};
+
+/**
+ * Authorized resolver.
+ * @param user
+ */
+const isAuthorizedRequired = (user: User = {}): boolean => {
+  if (!user.emailVerified) {
+    return true;
+  }
+  return !ENABLE_PUBLIC_ACCESS;
+};
+
+/**
+ * Fallback route resolver.
+ * @param user
+ */
+const fallbackRouteResolver = (user: User): string => {
+  if (user && !user?.emailVerified) {
+    return VERIFY_EMAIL;
+  }
+  if (!ENABLE_PUBLIC_ACCESS) {
+    return UNAUTHORIZED_PAGE;
+  }
+  return null;
+};
 
 export const ROUTES = {
   HOME: {
     path: '/',
     page: 'home',
-    authenticated: !ENABLE_PUBLIC_ACCESS,
-    authorized: !ENABLE_PUBLIC_ACCESS,
-    fallbackRoute,
-    verifyEmailRoute: VERIFY_EMAIL,
+    isAuthenticated: isAuthenticatedRequired,
+    isAuthorized: isAuthorizedRequired,
+    fallbackRoute: fallbackRouteResolver,
   },
   EARTH: {
     path: '/earth',
     page: 'earth',
-    publicAccess: ENABLE_PUBLIC_ACCESS,
-    authenticated: !ENABLE_PUBLIC_ACCESS,
-    authorized: !ENABLE_PUBLIC_ACCESS,
-    fallbackRoute,
-    verifyEmailRoute: VERIFY_EMAIL,
+    isAuthenticated: isAuthenticatedRequired,
+    isAuthorized: isAuthorizedRequired,
+    fallbackRoute: fallbackRouteResolver,
   },
   LOCATION: {
     path: '/earth/:organization/:slug',
     page: 'earth',
-    publicAccess: ENABLE_PUBLIC_ACCESS,
-    authenticated: !ENABLE_PUBLIC_ACCESS,
-    authorized: !ENABLE_PUBLIC_ACCESS,
-    fallbackRoute,
-    verifyEmailRoute: VERIFY_EMAIL,
+    isAuthenticated: isAuthenticatedRequired,
+    isAuthorized: isAuthorizedRequired,
+    fallbackRoute: fallbackRouteResolver,
   },
   CHANGE_EMAIL: {
     path: '/profile/change-email',
     page: 'change-email',
-    authenticated: true,
-    authorized: false,
-    fallbackRoute: null,
-    verifyEmailRoute: VERIFY_EMAIL,
+    isAuthenticated: () => true,
+    isAuthorized: () => false,
+    fallbackRoute: () => null,
   },
   ERROR: {
     path: '/error',
     page: 'error',
-    authenticated: false,
-    authorized: false,
-    fallbackRoute: null,
-    verifyEmailRoute: VERIFY_EMAIL,
+    isAuthenticated: () => false,
+    isAuthorized: () => false,
+    fallbackRoute: () => null,
   },
   [NOT_FOUND]: {
     path: '/404',
     page: 'not-found',
-    authenticated: false,
-    authorized: false,
-    fallbackRoute: null,
-    verifyEmailRoute: VERIFY_EMAIL,
+    isAuthenticated: () => false,
+    isAuthorized: () => false,
+    fallbackRoute: () => null,
   },
   [VERIFY_EMAIL]: {
     path: '/verify-email',
     page: 'verify-email',
-    authenticated: true,
-    authorized: false,
-    fallbackRoute: null,
-    verifyEmailRoute: null,
+    isAuthenticated: () => false,
+    isAuthorized: () => false,
+    fallbackRoute: () => null,
   },
   [UNAUTHORIZED_PAGE]: {
     path: '/unauthorized',
     page: 'unauthorized',
-    authenticated: true,
-    authorized: false,
-    fallbackRoute: null,
-    verifyEmailRoute: VERIFY_EMAIL,
+    isAuthenticated: () => true,
+    isAuthorized: () => false,
+    fallbackRoute: () => null,
   },
 };