refactor: 💡 Auth refactor

src/components/Auth/index.tsx

@@ -8,31 +8,30 @@ import { matchesPathname } from '../../utils/matchesPathname';
 import { FleekLogo } from '../FleekLogo/FleekLogo';
 
 import type { FC, ReactNode } from 'react';
+import { useAuthContext } from '@/providers/AuthProvider';
 
 interface AuthProps {
   children: ReactNode;
 }
 
 export const Auth: FC<AuthProps> = ({ children }) => {
   const router = useRouter();
+  const auth = useAuthContext();
   const [isChecking, setIsChecking] = useState(true);
 
   useEffect(() => {
     const checkAuth = () => {
-      const authToken = document.cookie
+      const authProviderToken = document.cookie
         .split('; ')
         .find((row) => row.startsWith('authProviderToken='))
         ?.split('=')[1];
-      const projectId =
-        document.cookie
-          .split('; ')
-          .find((row) => row.startsWith('projectId='))
-          ?.split('=')[1] || constants.DEFAULT_PROJECT_ID;
-      const hasAuthentication = Boolean(authToken);
+      const hasAuthentication = Boolean(authProviderToken);
       const currentPath = window.location.pathname;
 
       if (hasAuthentication && currentPath === routes.home()) {
-        router.push(routes.project.home({ projectId }));
+        router.push(
+          routes.project.home({ projectId: constants.DEFAULT_PROJECT_ID }),
+        );
 
         setIsChecking(false);
         return;
@@ -45,7 +44,8 @@ export const Auth: FC<AuthProps> = ({ children }) => {
       );
 
       if (!hasAuthentication && !isPublicRoute) {
-        router.push(routes.home());
+        console.log('logging out from auth');
+        auth.logout();
       }
 
       setIsChecking(false);

src/components/CreateProject/CreateProject.tsx

@@ -7,21 +7,21 @@ import {
   useCreateProjectMutation,
 } from '@/generated/graphqlClient';
 import { useToast } from '@/hooks/useToast';
-import { useCookies } from '@/providers/CookiesProvider';
 import { useProjectContext } from '@/providers/ProjectProvider';
 import { Button, Dialog, Text } from '@/ui';
 
 import { Form } from '../Form/Form';
 import { LearnMoreMessage } from '../LearnMoreMessage/LearnMoreMessage';
 import { Modal } from '../Modal/Modal';
 import { ProjectField } from '../ProjectField/ProjectField';
+import { useSessionContext } from '@/providers/SessionProvider';
 
 export const CreateProject: React.FC = () => {
+  const session = useSessionContext();
   const { isCreateProjectModalOpen: isModalOpen, setIsCreateProjectModalOpen } =
     useProjectContext();
   const toast = useToast();
 
-  const cookies = useCookies();
   const client = useClient();
 
   const [, createProject] = useCreateProjectMutation();
@@ -63,7 +63,7 @@ export const CreateProject: React.FC = () => {
             });
           }
 
-          cookies.set('projectId', data.createProject.id);
+          session.setProject(data.createProject.id);
           handleModalChange(false);
         } catch (error) {
           toast.error({

src/components/FeedbackModal/FeedbackModal.tsx

@@ -24,6 +24,7 @@ import {
   SubmitSupportFormError,
   uploadFile,
 } from './submitForm';
+import { useAuthContext } from '@/providers/AuthProvider';
 
 const MAX_FILE_SIZE_MB = 5;
 const MAX_FILE_SIZE_BYTES = MAX_FILE_SIZE_MB * 1024 * 1024;
@@ -33,13 +34,14 @@ export const formSchema = zod.object({
 });
 
 export const FeedbackModal: React.FC = () => {
+  const auth = useAuthContext();
   const feedbackModal = useFeedbackModal();
   const [inputValue, setInputValue] = useState('');
   const [view, setView] = useState<'FORM' | 'SUBMITTED'>('FORM');
 
   const [files, setFiles] = useState<File[]>([]);
   const toast = useToast();
-  const [meQuery] = useMeQuery();
+  const [meQuery] = useMeQuery({ variables: {}, pause: !auth.token });
   const user = meQuery.data?.user;
   const isAuthed = !!user;
 

src/constants.ts

@@ -11,7 +11,7 @@ export const constants = {
   VERSION: Package.version,
 
   FIRST_PROJECT_NAME: 'First Project',
-  DEFAULT_PROJECT_ID: 'new-project',
+  DEFAULT_PROJECT_ID: '[projectid]',
 
   EXTERNAL_LINK: {
     ENS_DOMAIN: 'https://app.ens.domains',

src/fragments/App/Navbar/Navbar.tsx

@@ -8,6 +8,7 @@ import { Button, ButtonProps, Input } from '@/ui';
 
 import { NavbarStyles as S } from './Navbar.styles';
 import { Navigation } from './Navigation';
+import { constants } from '@/constants';
 
 const Search: React.FC = () => {
   const handleSearch = (/* e: React.ChangeEvent<HTMLInputElement> */) => {
@@ -68,7 +69,14 @@ const LoginButton: React.FC<LoginButtonProps> = ({ title, intent }) => {
   const session = useSessionContext();
 
   return (
-    <Button intent={intent} onClick={() => session.auth.login('dynamic')}>
+    <Button
+      intent={intent}
+      onClick={() =>
+        session.auth.login(
+          routes.project.home({ projectId: constants.DEFAULT_PROJECT_ID }),
+        )
+      }
+    >
       {title}
     </Button>
   );

src/fragments/App/Navbar/UserMenu/UserMenu.tsx

@@ -29,7 +29,7 @@ export const UserMenu: React.FC = () => {
   const { theme, toggleTheme } = useTheme();
   const session = useSessionContext();
   const projectId = session.project.id;
-  const [meQuery] = useMeQuery();
+  const [meQuery] = useMeQuery({ pause: !session.auth.token });
 
   const handleCreateProjectClick = (): void => {
     projectContext.setIsCreateProjectModalOpen(true);

src/fragments/IpfsPropagation/Sections/CreateGatewayButton.tsx

@@ -12,7 +12,6 @@ export const CreateGatewayButton: React.FC = () => {
   const handleClick = () => {
     if (!hasToken) {
       session.auth.login(
-        'dynamic',
         routes.project.settings.privateGateways({ projectId: 'project' }),
       );
     }

src/fragments/Migration/Layout.tsx

@@ -17,7 +17,7 @@ export const Layout: React.FC<Layout> = ({ children }) => {
 
   const handleLogIn = () => {
     if (!session.error && !session.loading && !session.auth.token) {
-      session.auth.login('dynamic', routes.migration());
+      session.auth.login(routes.migration());
     }
   };
 

src/fragments/Profile/Settings/Sections/ManageProjects.tsx

@@ -1,4 +1,3 @@
-import { routes } from '@fleek-platform/utils-routes';
 import { useMemo, useState } from 'react';
 
 import { BadgeText, SettingsBox, SettingsListItem } from '@/components';
@@ -9,15 +8,13 @@ import {
   useMeQuery,
   useProjectsQuery,
 } from '@/generated/graphqlClient';
-import { useRouter } from '@/hooks/useRouter';
 import { useToast } from '@/hooks/useToast';
-import { useCookies } from '@/providers/CookiesProvider';
 import { Icon } from '@/ui';
 import { firstLetterUpperCase } from '@/utils/stringFormat';
+import { useSessionContext } from '@/providers/SessionProvider';
 
 export const ManageProjects: React.FC = () => {
-  const router = useRouter();
-  const cookies = useCookies();
+  const session = useSessionContext();
   const toast = useToast();
   const [meQuery] = useMeQuery();
   const [projectsQuery] = useProjectsQuery();
@@ -46,8 +43,7 @@ export const ManageProjects: React.FC = () => {
   }
 
   const handleViewProject = ({ projectId }: HandleViewProjectProps) => {
-    cookies.set('projectId', projectId);
-    router.push(routes.project.home({ projectId }));
+    session.setProject(projectId);
   };
 
   const handleLeaveProject = async ({ projectId }: HandleLeaveProjectProps) => {

src/fragments/Projects/Home/Sections/MainSites.tsx

@@ -9,8 +9,10 @@ import {
 } from '@/generated/graphqlClient';
 import { useSessionContext } from '@/providers/SessionProvider';
 import { Box, Icon, Skeleton, Text } from '@/ui';
+import { useAuthContext } from '@/providers/AuthProvider';
 
 export const MainSites: React.FC = () => {
+  const auth = useAuthContext();
   const session = useSessionContext();
 
   const projectId = session.project.id;
@@ -25,6 +27,7 @@ export const MainSites: React.FC = () => {
         sortOrder: SortOrder.desc,
       },
     },
+    pause: !auth.tokenProjectId,
   });
 
   const sites = sitesQuery?.data?.sites.data || [];

src/fragments/Projects/Settings/Sections/DeleteProject/DeleteProject.tsx

@@ -29,7 +29,6 @@ import { usePermissions } from '@/hooks/usePermissions';
 import { useRouter } from '@/hooks/useRouter';
 import { useToast } from '@/hooks/useToast';
 import { useBillingContext } from '@/providers/BillingProvider';
-import { useCookies } from '@/providers/CookiesProvider';
 import { useSessionContext } from '@/providers/SessionProvider';
 import { ChildrenProps, LoadingProps } from '@/types/Props';
 import { Button, Dialog, Text } from '@/ui';
@@ -53,7 +52,7 @@ export const DeleteProject: React.FC<DeleteProjectProps> = ({
   const client = useClient();
   const router = useRouter();
   const toast = useToast();
-  const cookies = useCookies();
+  const session = useSessionContext();
 
   const [, createProject] = useCreateProjectMutation();
 
@@ -127,7 +126,7 @@ export const DeleteProject: React.FC<DeleteProjectProps> = ({
         }
 
         if (redirectProjectId) {
-          cookies.set('projectId', redirectProjectId);
+          session.setProject(redirectProjectId);
         }
 
         toast.success({

src/fragments/Projects/Sites/AddSiteDropdown.tsx

@@ -8,8 +8,10 @@ import { useSiteRestriction } from '@/hooks/useBillingRestriction';
 import { usePermissions } from '@/hooks/usePermissions';
 import { useSessionContext } from '@/providers/SessionProvider';
 import { Button, Menu, Skeleton } from '@/ui';
+import { useAuthContext } from '@/providers/AuthProvider';
 
 export const AddSiteDropdown: React.FC = () => {
+  const auth = useAuthContext();
   const session = useSessionContext();
   const hasDeployPermissions = usePermissions({
     action: [constants.PERMISSION.SITE.CREATE],
@@ -27,6 +29,7 @@ export const AddSiteDropdown: React.FC = () => {
       where: {},
       filter: { take: constants.SITES_PAGE_SIZE, page: 1 },
     },
+    pause: !auth.tokenProjectId,
   });
 
   if (sitesQuery.fetching) {

src/fragments/Template/List/Hero/Hero.tsx

@@ -41,7 +41,7 @@ const SubmitTemplateButton: React.FC = () => {
 
   const handleSubmitTemplate = () => {
     if (!session.auth.token) {
-      return session.auth.login('dynamic', routes.profile.settings.templates());
+      return session.auth.login(routes.profile.settings.templates());
     }
 
     return router.push(routes.profile.settings.templates());

src/fragments/Template/TemplateDetails/TemplateDetails.tsx

@@ -8,14 +8,16 @@ import { getLinkForTemplateReport } from '@/utils/getLinkForTemplateReport';
 import { firstLetterUpperCase } from '@/utils/stringFormat';
 
 import { TemplateDetailsStyles as S } from './TemplateDetails.styles';
+import { useAuthContext } from '@/providers/AuthProvider';
 
 export type TemplateDetailsProps = LoadingProps<{ template: Template }>;
 
 export const TemplateDetails: React.FC<TemplateDetailsProps> = ({
   isLoading,
   template,
 }) => {
-  const [meQuery] = useMeQuery();
+  const auth = useAuthContext();
+  const [meQuery] = useMeQuery({ variables: {}, pause: !auth.token });
 
   if (isLoading) {
     return <TemplateDetailsSkeleton />;

src/hooks/useBillingRestriction.tsx

@@ -9,15 +9,18 @@ import { useSessionContext } from '@/providers/SessionProvider';
 import { filterDeletedDomains } from '@/utils/filterDeletedDomains';
 
 import { useRouter } from './useRouter';
+import { useAuthContext } from '@/providers/AuthProvider';
 
 export const useSiteRestriction = () => {
+  const auth = useAuthContext();
   const billing = useBillingContext();
 
   const [sitesQuery] = useSitesQuery({
     variables: {
       where: {},
       filter: { take: constants.SITES_PAGE_SIZE, page: 1 },
     },
+    pause: !auth.tokenProjectId,
   });
 
   return billing.hasReachedLimit(