moves authenticated pages under /auth route

client/next.config.js

@@ -13,6 +13,15 @@ const nextConfig = {
     ],
   },
   output: 'standalone',
+  async redirects() {
+    return [
+      {
+        source: '/auth',
+        destination: '/auth/details',
+        permanent: true,
+      },
+    ];
+  },
 };
 
 module.exports = withPlugins(

client/src/constants/nav.ts

@@ -1,4 +1,15 @@
-export const NAV = [
+type NavItem = {
+  label: string;
+  href: string;
+  filled?: boolean;
+  target?: string;
+  rel?: string;
+  className?: string;
+  auth?: boolean;
+  footer?: boolean;
+};
+
+export const NAV: NavItem[] = [
   {
     label: 'Home',
     href: '/',
@@ -37,11 +48,26 @@ export const NAV = [
   {
     label: 'Log In',
     href: '/auth/signin',
-    className: 'border border-grey-0 rounded-lg !bg-white',
+    className: 'border border-grey-0 rounded-lg bg-white',
     auth: true,
   },
 ];
 
+export const NAV_AUTH: NavItem[] = [
+  {
+    label: 'My details',
+    href: '/auth/details',
+  },
+  {
+    label: 'My projects',
+    href: '/auth/projects',
+  },
+  {
+    label: 'My investments',
+    href: '/auth/investments',
+  },
+];
+
 export const POLICIES = [
   {
     label: 'Privacy policy',

client/src/containers/my-projects/form/steps/contact-details/primary-office-country.tsx → client/src/containers/auth/projects/form/steps/contact-details/primary-office-country.tsx

@@ -6,7 +6,7 @@ import { Field as FieldRFF } from 'react-final-form';
 
 import { useSubGeographics } from 'hooks/geographics';
 
-import { ProjectSchema } from 'containers/my-projects/form/validations';
+import { ProjectSchema } from 'containers/auth/projects/form/validations';
 
 import { Select } from 'components/forms';
 

client/src/containers/my-projects/form/steps/contact-details/primary-office-state.tsx → client/src/containers/auth/projects/form/steps/contact-details/primary-office-state.tsx

@@ -6,7 +6,7 @@ import { Field as FieldRFF, useForm, useFormState } from 'react-final-form';
 
 import { useSubGeographics } from 'hooks/geographics';
 
-import { ProjectSchema } from 'containers/my-projects/form/validations';
+import { ProjectSchema } from 'containers/auth/projects/form/validations';
 
 import { Select } from 'components/forms';
 

client/src/containers/my-projects/form/steps/project-details/demographics.tsx → client/src/containers/auth/projects/form/steps/project-details/demographics.tsx

@@ -6,7 +6,7 @@ import { Field as FieldRFF } from 'react-final-form';
 
 import { useDemographics } from 'hooks/demographics';
 
-import { ProjectSchema } from 'containers/my-projects/form/validations';
+import { ProjectSchema } from 'containers/auth/projects/form/validations';
 
 import { MultiSelect, Select } from 'components/forms';
 

client/src/containers/my-projects/form/steps/project-details/legal-status.tsx → client/src/containers/auth/projects/form/steps/project-details/legal-status.tsx

@@ -6,7 +6,7 @@ import { Field as FieldRFF } from 'react-final-form';
 
 import { useProjectLegalStatuses } from 'hooks/project-legal-statuses';
 
-import { ProjectSchema } from 'containers/my-projects/form/validations';
+import { ProjectSchema } from 'containers/auth/projects/form/validations';
 
 import { Select } from 'components/forms';
 

client/src/containers/my-projects/new/index.tsx → client/src/containers/auth/projects/new/index.tsx

@@ -39,7 +39,7 @@ export default function NewProject() {
       });
     },
     onSuccess: () => {
-      push('/my-projects/new?step=investments');
+      push('/projects/new?step=investments');
     },
   });
 
@@ -53,48 +53,46 @@ export default function NewProject() {
   }, [mutation]);
 
   return (
-    <div className="bg-grey-60">
-      <Wrapper className="w-full flex grow">
-        <FormWrapper
-          onSubmit={(data) => {
-            const formData = new FormData();
-
-            for (const key in data) {
-              if (data.hasOwnProperty(key)) {
-                const value = data[key];
-
-                if (Array.isArray(value)) {
-                  value.forEach((v) => {
-                    formData.append(`${key}[]`, v);
-                  });
-                } else {
-                  formData.append(key, value);
-                }
+    <Wrapper className="w-full flex grow">
+      <FormWrapper
+        onSubmit={(data) => {
+          const formData = new FormData();
+
+          for (const key in data) {
+            if (data.hasOwnProperty(key)) {
+              const value = data[key];
+
+              if (Array.isArray(value)) {
+                value.forEach((v) => {
+                  formData.append(`${key}[]`, v);
+                });
+              } else {
+                formData.append(key, value);
               }
             }
-
-            formData.append('contact_first_name', me?.name.split(' ')[0]);
-            formData.append('contact_last_name', me?.name.split(' ')[1]);
-
-            mutation.mutate(formData);
-          }}
-          render={({ handleSubmit }) => {
-            return (
-              <div className="flex flex-col gap-14 grow">
-                <NewProjectHeader />
-                <div className="grid grid-cols-12 gap-16 h-full">
-                  <div className="col-span-3">
-                    <MyProjectsSidebar sections={formSteps} />
-                  </div>
-                  <div className="col-span-9 flex">
-                    <Form handleSubmit={handleSubmit} />
-                  </div>
+          }
+
+          formData.append('contact_first_name', me?.name.split(' ')[0]);
+          formData.append('contact_last_name', me?.name.split(' ')[1]);
+
+          mutation.mutate(formData);
+        }}
+        render={({ handleSubmit }) => {
+          return (
+            <div className="flex flex-col gap-14 grow">
+              <NewProjectHeader />
+              <div className="grid grid-cols-12 gap-16 h-full">
+                <div className="col-span-3">
+                  <MyProjectsSidebar sections={formSteps} />
+                </div>
+                <div className="col-span-9 flex">
+                  <Form handleSubmit={handleSubmit} />
                 </div>
               </div>
-            );
-          }}
-        />
-      </Wrapper>
-    </div>
+            </div>
+          );
+        }}
+      />
+    </Wrapper>
   );
 }

client/src/containers/my-projects/new/investments.tsx → client/src/containers/auth/projects/new/investments.tsx

@@ -25,7 +25,7 @@ export default function InvestmentsStep() {
           sit sagittis.
         </p>
         <LinkButton
-          href={`/my-investments?project=${newProjectMutationState?.data.data.data.id}`}
+          href={`/investments?project=${newProjectMutationState?.data.data.data.id}`}
           theme="green"
         >
           Report Investment

client/src/containers/header/component.tsx

@@ -1,42 +1,43 @@
 import React, { useCallback, useMemo } from 'react';
 
-import cx from 'classnames';
-
 import Image from 'next/image';
 import Link from 'next/link';
-import { useRouter } from 'next/router';
+import { usePathname } from 'next/navigation';
+
+import { cn } from 'lib/utils';
 
 import { useSession } from 'next-auth/react';
 
-import { NAV } from 'constants/nav';
+import { NAV, NAV_AUTH } from 'constants/nav';
 
 import Wrapper from 'containers/wrapper';
 
 import { Button } from 'components/button/component';
 import CircleUserIcon from 'components/icons/circle-user';
+import { isPrivatePath } from 'middleware';
 
 import LOGO_SVG from 'svgs/logo.svg';
 
 const Header = () => {
-  const { pathname } = useRouter();
+  const pathname = usePathname();
   const { data: session } = useSession();
-  const isAuthPath = useMemo(() => pathname.includes('/auth'), [pathname]);
+  const isAuthPath = isPrivatePath(pathname);
+
   const NAV_ITEMS = useMemo(() => {
+    if (isAuthPath) return NAV_AUTH;
     return NAV.filter((n) => !n.footer && !(session && n.auth));
-  }, [session]);
+  }, [session, isAuthPath]);
 
   const isActiveNavItem = useCallback(
     (href: string) => {
-      if (isAuthPath) return false;
-
       return pathname.includes(href) && pathname !== '/';
     },
-    [pathname, isAuthPath]
+    [pathname]
   );
 
   return (
     <header
-      className={cx({
+      className={cn({
         'py-6': true,
         'bg-white': !isAuthPath,
         'bg-grey-60': isAuthPath,
@@ -68,7 +69,7 @@ const Header = () => {
                         href={href}
                         target={target}
                         rel={rel}
-                        className={cx({
+                        className={cn({
                           'text-base font-semibold py-2 px-7': true,
                           'hover:rounded-lg hover:bg-grey-60/75': pathname !== href,
                           'rounded-lg bg-green-0': isActiveNavItem(href),
@@ -81,13 +82,13 @@ const Header = () => {
                     {!target && (
                       <Link
                         href={href}
-                        className={cx(
+                        className={cn(
                           'text-base font-semibold py-2 px-7',
                           {
                             'hover:rounded-lg hover:bg-grey-60/75': !pathname.includes(href),
                             'rounded-lg bg-green-0': isActiveNavItem(href),
-                            'pointer-events-none select-none':
-                              pathname.includes(href) && pathname !== '/',
+                            // 'pointer-events-none select-none':
+                            //   pathname.includes(href) && pathname !== '/',
                           },
                           className
                         )}
@@ -99,7 +100,7 @@ const Header = () => {
                 );
               })}
               {session && (
-                <Button type="button" theme="transparent">
+                <Button type="button" theme="transparent" className="px-0">
                   <CircleUserIcon />
                 </Button>
               )}

client/src/hoc/auth.ts

@@ -21,7 +21,7 @@ export function withAuth(gssp?: GetServerSideProps) {
       // Public route (auth pages) with session -> redirect to projects
       return {
         redirect: {
-          destination: '/projects',
+          destination: '/auth/details',
           permanent: false,
         },
       };

client/src/layouts/application/component.tsx

@@ -1,35 +1,33 @@
-import cx from 'classnames';
+import { PropsWithChildren } from 'react';
 
-import { useRouter } from 'next/router';
+import { usePathname } from 'next/navigation';
+
+import { cn } from 'lib/utils';
 
 import Footer from 'containers/footer';
 import Header from 'containers/header';
 
-type ApplicationLayoutProps = {
-  children: React.ReactNode;
-};
-
-const ApplicationLayout: React.FC<ApplicationLayoutProps> = (props: ApplicationLayoutProps) => {
-  const { children } = props;
-  const { pathname } = useRouter();
+export default function ApplicationLayout({ children }: PropsWithChildren) {
+  const pathname = usePathname();
+  const isAuthRoute = pathname.includes('/auth');
 
   return (
     <div
-      className={cx({
+      className={cn({
         'flex flex-col lg:min-h-screen': true,
-        'bg-grey-60': pathname.includes('/auth'),
+        'bg-grey-60': isAuthRoute,
       })}
     >
       <Header />
-
-      <main className="flex flex-col grow">
-        {/* Content */}
+      <main
+        className={cn({
+          'flex flex-col grow': true,
+          'bg-grey-60': isAuthRoute,
+        })}
+      >
         {children}
       </main>
-
       <Footer />
     </div>
   );
-};
-
-export default ApplicationLayout;
+}

client/src/middleware.ts

@@ -1,5 +1,21 @@
-export { default } from 'next-auth/middleware';
+import { NextResponse } from 'next/server';
 
-export const config = {
-  matcher: ['/my-details/:path*', '/my-projects/:path*', '/my-investments/:path*'],
+import { NextRequestWithAuth, withAuth } from 'next-auth/middleware';
+
+const PRIVATE_PAGES = /^(\/auth(?!\/signin|\/signup|\/forgot-password))/;
+
+export const isPrivatePath = (pathname: string) => {
+  return PRIVATE_PAGES.test(pathname);
 };
+
+export default function middleware(req: NextRequestWithAuth) {
+  if (isPrivatePath(req.nextUrl.pathname)) {
+    return withAuth(req, {
+      pages: {
+        signIn: '/auth/signin',
+      },
+    });
+  }
+
+  return NextResponse.next();
+}

client/src/pages/404.tsx

@@ -11,7 +11,7 @@ const Page404: React.FC = () => {
 
       <div className="flex flex-col items-center justify-center space-y-3">
         <p className="text-3xl font-display">Page not found</p>
-        <p className="underline">It looks like the link is broken or the pages has been removed.</p>
+        <p className="underline">It looks like the link is broken or the page has been removed.</p>
       </div>
 
       <Button href="/" type="button" size="xl" theme="black">

client/src/pages/my-projects/new.tsx → client/src/pages/auth/projects/new.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 
+import NewProject from 'containers/auth/projects/new';
 import MetaTags from 'containers/meta-tags';
-import NewProject from 'containers/my-projects/new';
 
 const TITLE_TEXT = 'FORA My projects | An initiative in support of regenerative agriculture';
 // @todo: update description