From dc0e9724194a73a30e0e4ea8748a56ee350c5c08 Mon Sep 17 00:00:00 2001
From: Helder Oliveira <heldrida@gmail.com>
Date: Fri, 6 Dec 2024 13:18:48 +0000
Subject: [PATCH 1/5] =?UTF-8?q?chore:=20=F0=9F=A4=96=20remove=20logo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Auth/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Auth/index.tsx b/src/components/Auth/index.tsx
index 43976edc..73b2b32d 100644
--- a/src/components/Auth/index.tsx
+++ b/src/components/Auth/index.tsx
@@ -5,7 +5,6 @@ import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { constants } from '../../constants';
 import { matchesPathname } from '../../utils/matchesPathname';
-import { FleekLogo } from '../FleekLogo/FleekLogo';
 
 import type { FC, ReactNode } from 'react';
 

From d3a10bd3886ea79126bc2b9e140e97e26d87460d Mon Sep 17 00:00:00 2001
From: Helder Oliveira <heldrida@gmail.com>
Date: Fri, 6 Dec 2024 13:19:11 +0000
Subject: [PATCH 2/5] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20logout=20handler?=
 =?UTF-8?q?=20should=20be=20asynchronous?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useAuthProviders.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/hooks/useAuthProviders.ts b/src/hooks/useAuthProviders.ts
index a23c240e..91bd78c0 100644
--- a/src/hooks/useAuthProviders.ts
+++ b/src/hooks/useAuthProviders.ts
@@ -8,7 +8,7 @@ export type AuthProviders = 'dynamic';
 
 export type AuthWith = {
   handleLogin: () => void;
-  handleLogout: () => void;
+  handleLogout: () => Promise<void>;
   requestAccessToken: (projectId?: string) => Promise<string>;
   token: string | undefined;
 };
@@ -29,7 +29,7 @@ const useAuthWithDynamic = (): AuthWith => {
 
   const handleLogin = () => dynamic.setShowAuthFlow(true);
 
-  const handleLogout = () => dynamic.handleLogOut();
+  const handleLogout = async () => dynamic.handleLogOut();
 
   const requestAccessToken = async (projectId?: string): Promise<string> => {
     if (!dynamic.authToken) {
@@ -61,7 +61,7 @@ const getMockedProvider: () => AuthWith = () => {
 
   return {
     handleLogin: () => {},
-    handleLogout: () => {},
+    handleLogout: async () => {},
     requestAccessToken: async () => 'mocked-token',
     token: cookies.values.authProviderToken,
   };

From dcd21a68c87e0e3783c676fff27f954bee04d872 Mon Sep 17 00:00:00 2001
From: Helder Oliveira <heldrida@gmail.com>
Date: Fri, 6 Dec 2024 13:20:10 +0000
Subject: [PATCH 3/5] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20add=20clear=20us?=
 =?UTF-8?q?er=20session=20utility=20and=20add=20TODOs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/providers/AuthProvider.tsx | 47 ++++++++++++++++++++++++++++------
 src/utils/clearUSerSession.ts  |  8 ++++++
 tests/e2e/homepage.spec.ts     | 28 +++-----------------
 tests/e2e/projects.spec.ts     | 12 +++------
 4 files changed, 54 insertions(+), 41 deletions(-)
 create mode 100644 src/utils/clearUSerSession.ts

diff --git a/src/providers/AuthProvider.tsx b/src/providers/AuthProvider.tsx
index fde2568a..69c049de 100644
--- a/src/providers/AuthProvider.tsx
+++ b/src/providers/AuthProvider.tsx
@@ -13,6 +13,7 @@ import { useRouter } from '@/hooks/useRouter';
 import { createContext } from '@/utils/createContext';
 
 import { useCookies } from './CookiesProvider';
+import { clearUserSession } from '@/utils/clearUSerSession';
 
 export type AuthContext = {
   loading: boolean;
@@ -60,9 +61,12 @@ export const AuthProvider: React.FC<React.PropsWithChildren<{}>> = ({
   );
 
   const logout = useCallback(async () => {
-    cookies.remove('authProviderToken');
     const invitationHash = router.query.invitation;
 
+    // TODO: Why would an invitation hash have to be
+    // declared on logout? This might related to whitelisting
+    // approach on persisting session state
+    // see "clearUserSession" comment
     if (!constants.PUBLIC_ROUTES.includes(router.pathname.toLowerCase())) {
       await router.replace({
         pathname: routes.home(),
@@ -70,15 +74,37 @@ export const AuthProvider: React.FC<React.PropsWithChildren<{}>> = ({
       });
     }
 
-    providersValues.forEach((provider) => {
-      if (provider.token) {
-        provider.handleLogout();
+    for (const provider of providersValues) {
+      if (!provider.token) {
+        // TODO: On "auth provider" initialisation
+        // a name should be provided to help troubleshoot.
+        // Include a name for each provider initialised.
+        console.warn('Provider doesn\'t have a token or loogout callback');
+        continue;
       }
-    });
 
-    cookies.remove('projectId');
-    clearAccessToken();
+      if (provider.token && typeof provider.handleLogout !== 'function') {
+        // TODO: Name provider on initialisation
+        // see related TODO above.
+        console.warn('Provider doesn\'t have a logout callback');
+        continue;
+      }
+
+      // TODO: For some reason the original author
+      // hasn't awaited for the logout request.
+      // This has to be revised as its possible
+      // that there are asynchronous calls involved
+      // which would have to be awaited for?
+      await provider.handleLogout();
+    }
+
     posthog.reset();
+
+    // TODO: Session has third-party data
+    // at time of writing there's no way to know which
+    // values should persist. Use of a whitelist approach
+    // can help. Until this is revised, all session data wiped
+    clearUserSession();
   }, [cookies, clearAccessToken, router, providersValues]);
 
   const requestAccessToken = useCallback(
@@ -127,7 +153,12 @@ export const AuthProvider: React.FC<React.PropsWithChildren<{}>> = ({
 
     if (provider?.token) {
       // if has a provider token, it means that auth provider is authenticated
-      cookies.set('authProviderToken', provider.token);
+      // TODO: If this is the token generated by dynamic
+      // for the call to get the `accessToken`
+      // if the token is valid, we seem to not have to need
+      // dynamic for any purpose? Likewise, this doesn't
+      // seem necessary.
+      // cookies.set('authProviderToken', provider.token);
 
       const projectId =
         cookies.values.projectId || constants.DEFAULT_PROJECT_ID;
diff --git a/src/utils/clearUSerSession.ts b/src/utils/clearUSerSession.ts
new file mode 100644
index 00000000..d20a1114
--- /dev/null
+++ b/src/utils/clearUSerSession.ts
@@ -0,0 +1,8 @@
+export const clearUserSession = () => {
+  localStorage.clear();
+  sessionStorage.clear();
+  document.cookie.split(';').forEach((cookie) => {
+    document.cookie =
+      cookie.trim() + '; expires=Thu Jan 01 1970 00:00:00 GMT';
+  });
+}
diff --git a/tests/e2e/homepage.spec.ts b/tests/e2e/homepage.spec.ts
index 76bd6b56..9fa86e64 100644
--- a/tests/e2e/homepage.spec.ts
+++ b/tests/e2e/homepage.spec.ts
@@ -2,6 +2,7 @@ import { test as it, expect } from '@playwright/test';
 import { harFilePaths } from '../utils/har';
 import { latestBlogPosts } from '../data/fleekWebsiteJsonApi';
 import { getDevServerDetails } from '../utils/devServer';
+import { clearUserSession } from '../../src/utils/clearUSerSession';
 
 const { describe, beforeEach, afterEach } = it;
 
@@ -14,14 +15,7 @@ describe('On Home page', () => {
     });
 
     afterEach(async ({ page }) => {
-      await page.evaluate(() => {
-        localStorage.clear();
-        sessionStorage.clear();
-        document.cookie.split(';').forEach((cookie) => {
-          document.cookie =
-            cookie.trim() + '; expires=Thu Jan 01 1970 00:00:00 GMT';
-        });
-      });
+      await page.evaluate(() => clearUserSession());
     });
 
     it('Should get the title page "Home"', async ({ page }) => {
@@ -73,14 +67,7 @@ describe('On Home page', () => {
     });
 
     afterEach(async ({ page }) => {
-      await page.evaluate(() => {
-        localStorage.clear();
-        sessionStorage.clear();
-        document.cookie.split(';').forEach((cookie) => {
-          document.cookie =
-            cookie.trim() + '; expires=Thu Jan 01 1970 00:00:00 GMT';
-        });
-      });
+      await page.evaluate(() => clearUserSession());
     });
 
     it('Should redirect to the homepage url', async ({ page }) => {
@@ -180,14 +167,7 @@ describe('On Home page', () => {
     });
 
     afterEach(async ({ page }) => {
-      await page.evaluate(() => {
-        localStorage.clear();
-        sessionStorage.clear();
-        document.cookie.split(';').forEach((cookie) => {
-          document.cookie =
-            cookie.trim() + '; expires=Thu Jan 01 1970 00:00:00 GMT';
-        });
-      });
+      await page.evaluate(() => clearUserSession());
     });
 
     it('Should redirect to projects page', async ({ page }) => {
diff --git a/tests/e2e/projects.spec.ts b/tests/e2e/projects.spec.ts
index e28443bc..661cd45c 100644
--- a/tests/e2e/projects.spec.ts
+++ b/tests/e2e/projects.spec.ts
@@ -3,12 +3,13 @@ import { harFilePaths } from '../utils/har';
 import { latestBlogPosts } from '../data/fleekWebsiteJsonApi';
 import { getDevServerDetails } from '../utils/devServer';
 const { describe, beforeEach, afterEach, beforeAll, afterAll } = it;
+import { clearUserSession } from '../../src/utils/clearUSerSession';
 
 const { hostname, port } = getDevServerDetails();
 
 describe('On Project settings page', () => {
   describe('Valid cookie token user', () => {
-    const projectId = 'cls4v91mt0001l708wu51eozd';
+    const projectId = 's4v91mt0001l708wu51eozd';
 
     beforeEach(async ({ page }) => {
       const validMockToken =
@@ -80,14 +81,7 @@ describe('On Project settings page', () => {
     });
 
     afterEach(async ({ page }) => {
-      await page.evaluate(() => {
-        localStorage.clear();
-        sessionStorage.clear();
-        document.cookie.split(';').forEach((cookie) => {
-          document.cookie =
-            cookie.trim() + '; expires=Thu Jan 01 1970 00:00:00 GMT';
-        });
-      });
+      await page.evaluate(() => clearUserSession());
     });
 
     it('Should redirect to projects page', async ({ page }) => {

From 9e7536c234758eedfae5f8497a9004176e6a9edc Mon Sep 17 00:00:00 2001
From: Helder Oliveira <heldrida@gmail.com>
Date: Fri, 6 Dec 2024 19:07:25 +0000
Subject: [PATCH 4/5] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20splitting=20conc?=
 =?UTF-8?q?erns=20from=20AuthProvider,=20to=20ProjectProvider,=20rename=20?=
 =?UTF-8?q?token=20as=20accessToken,=20etc?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/fragments/App/Navbar/NavbarCombined.tsx   |   4 +-
 src/fragments/IpfsPropagation/Layout.tsx      |  10 +-
 .../Sections/CreateGatewayButton.tsx          |   6 +-
 src/fragments/Migration/Layout.tsx            |   8 +-
 src/fragments/Migration/Steps/Step1.tsx       |   4 +-
 src/fragments/Template/List/Hero/Hero.tsx     |   6 +-
 src/hooks/useAuthCookie.ts                    |   2 +-
 src/hooks/useAuthProviders.ts                 |   8 +-
 src/pages/index.tsx                           |   8 +-
 src/pages/login/[verificationSessionId].tsx   |  12 +-
 src/pages/migration/index.tsx                 |   4 +-
 src/pages/templates/[templateId]/index.tsx    |   8 +-
 src/providers/AuthProvider.tsx                | 216 +++++++++---------
 src/providers/DynamicProvider.tsx             |   9 +-
 src/providers/ProjectProvider.tsx             |  61 ++++-
 src/providers/SessionProvider.tsx             |   2 +-
 16 files changed, 207 insertions(+), 161 deletions(-)

diff --git a/src/fragments/App/Navbar/NavbarCombined.tsx b/src/fragments/App/Navbar/NavbarCombined.tsx
index 5b32f26c..96d685cb 100644
--- a/src/fragments/App/Navbar/NavbarCombined.tsx
+++ b/src/fragments/App/Navbar/NavbarCombined.tsx
@@ -4,9 +4,9 @@ import { NavbarProject } from './NavbarProject';
 import { NavbarUnauthenticated } from './NavbarUnauthenticated';
 
 export const NavbarCombined: React.FC = () => {
-  const session = useSessionContext(true);
+  const { loading, auth: { accessToken } } = useSessionContext(true);
 
-  if (session.loading || session.auth.token) {
+  if (loading || accessToken) {
     return <NavbarProject />;
   }
 
diff --git a/src/fragments/IpfsPropagation/Layout.tsx b/src/fragments/IpfsPropagation/Layout.tsx
index 9d74e69c..be6c3f86 100644
--- a/src/fragments/IpfsPropagation/Layout.tsx
+++ b/src/fragments/IpfsPropagation/Layout.tsx
@@ -15,10 +15,10 @@ import { App } from '../App/App';
 export const IpfsPropagationLayout: React.FC<ChildrenProps> = ({
   children,
 }) => {
-  const session = useSessionContext();
+  const { loading, auth: { accessToken }} = useSessionContext();
   const navItems = useMainNavigationItems();
 
-  if (!session.auth.token) {
+  if (!accessToken) {
     return (
       <>
         <LayoutHead title={LayoutHead.titles.ipfsPropagation} />
@@ -42,7 +42,7 @@ export const IpfsPropagationLayout: React.FC<ChildrenProps> = ({
       <RootLayout.Head title={LayoutHead.titles.ipfsPropagation} />
       <RootLayout.Page
         slotSidebar={<ProjectDropdown />}
-        isNavigationLoading={session.loading}
+        isNavigationLoading={loading}
         navigation={navItems}
         breadcrumbs={breadcrumbs}
       >
@@ -53,9 +53,9 @@ export const IpfsPropagationLayout: React.FC<ChildrenProps> = ({
 };
 
 const Content: React.FC<ChildrenProps> = ({ children }) => {
-  const session = useSessionContext();
+  const { auth: { accessToken } } = useSessionContext();
 
-  if (session.auth.token) {
+  if (accessToken) {
     return <App.Content>{children}</App.Content>;
   }
 
diff --git a/src/fragments/IpfsPropagation/Sections/CreateGatewayButton.tsx b/src/fragments/IpfsPropagation/Sections/CreateGatewayButton.tsx
index 0c3a2218..81f4f7c7 100644
--- a/src/fragments/IpfsPropagation/Sections/CreateGatewayButton.tsx
+++ b/src/fragments/IpfsPropagation/Sections/CreateGatewayButton.tsx
@@ -5,13 +5,13 @@ import { ActionBox } from '@/components';
 import { useSessionContext } from '@/providers/SessionProvider';
 
 export const CreateGatewayButton: React.FC = () => {
-  const session = useSessionContext();
+  const { auth: { accessToken, login } } = useSessionContext();
 
-  const hasToken = Boolean(session.auth.token);
+  const hasToken = Boolean(accessToken);
 
   const handleClick = () => {
     if (!hasToken) {
-      session.auth.login(
+      login(
         'dynamic',
         routes.project.settings.privateGateways({ projectId: 'project' }),
       );
diff --git a/src/fragments/Migration/Layout.tsx b/src/fragments/Migration/Layout.tsx
index ab23e93a..d88d433d 100644
--- a/src/fragments/Migration/Layout.tsx
+++ b/src/fragments/Migration/Layout.tsx
@@ -13,11 +13,11 @@ export type Layout = React.PropsWithChildren<{
 }>;
 
 export const Layout: React.FC<Layout> = ({ children }) => {
-  const session = useSessionContext();
+  const { error, auth: { login, accessToken }, loading } = useSessionContext();
 
   const handleLogIn = () => {
-    if (!session.error && !session.loading && !session.auth.token) {
-      session.auth.login('dynamic', routes.migration());
+    if (!error && !loading && !accessToken) {
+      login('dynamic', routes.migration());
     }
   };
 
@@ -26,7 +26,7 @@ export const Layout: React.FC<Layout> = ({ children }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  if (session.auth.token) {
+  if (accessToken) {
     return (
       <>
         <LayoutHead title={LayoutHead.titles.migration} />
diff --git a/src/fragments/Migration/Steps/Step1.tsx b/src/fragments/Migration/Steps/Step1.tsx
index 216605a4..20c65818 100644
--- a/src/fragments/Migration/Steps/Step1.tsx
+++ b/src/fragments/Migration/Steps/Step1.tsx
@@ -6,7 +6,7 @@ import { useMigrationContext } from '../Migration.context';
 import { MigrationStyles as S } from '../Migration.styles';
 
 export const Step1: React.FC = () => {
-  const session = useSessionContext();
+  const { auth: { accessToken } } = useSessionContext();
   const {
     isStep1Loading: isLoading,
     handleBeginMigration,
@@ -14,7 +14,7 @@ export const Step1: React.FC = () => {
     migrationToken,
   } = useMigrationContext();
 
-  const isDisabled = !session.auth.token || isLoading || !migrationToken;
+  const isDisabled = !accessToken || isLoading || !migrationToken;
 
   return (
     <S.Content.Container>
diff --git a/src/fragments/Template/List/Hero/Hero.tsx b/src/fragments/Template/List/Hero/Hero.tsx
index d5977643..2f341fb5 100644
--- a/src/fragments/Template/List/Hero/Hero.tsx
+++ b/src/fragments/Template/List/Hero/Hero.tsx
@@ -36,12 +36,12 @@ export const Hero: React.FC = () => {
 };
 
 const SubmitTemplateButton: React.FC = () => {
-  const session = useSessionContext();
+  const { auth: { accessToken, login } } = useSessionContext();
   const router = useRouter();
 
   const handleSubmitTemplate = () => {
-    if (!session.auth.token) {
-      return session.auth.login('dynamic', routes.profile.settings.templates());
+    if (!accessToken) {
+      return login('dynamic', routes.profile.settings.templates());
     }
 
     return router.push(routes.profile.settings.templates());
diff --git a/src/hooks/useAuthCookie.ts b/src/hooks/useAuthCookie.ts
index 07bd412e..32867b4c 100644
--- a/src/hooks/useAuthCookie.ts
+++ b/src/hooks/useAuthCookie.ts
@@ -16,7 +16,7 @@ export const useAuthCookie = (): [
 
   const set = (jwt: string) => {
     try {
-      const parsed = decodeAccessToken({ token: jwt });
+      const parsed = decodeAccessToken({ accessToken: jwt });
 
       cookies.set(key, jwt, {
         expires: DateTime.fromSeconds(parsed.exp).toJSDate(),
diff --git a/src/hooks/useAuthProviders.ts b/src/hooks/useAuthProviders.ts
index 91bd78c0..89469bbc 100644
--- a/src/hooks/useAuthProviders.ts
+++ b/src/hooks/useAuthProviders.ts
@@ -10,7 +10,7 @@ export type AuthWith = {
   handleLogin: () => void;
   handleLogout: () => Promise<void>;
   requestAccessToken: (projectId?: string) => Promise<string>;
-  token: string | undefined;
+  accessToken?: string;
 };
 
 export const useAuthProviders = (): Record<AuthProviders, AuthWith> => {
@@ -32,6 +32,7 @@ const useAuthWithDynamic = (): AuthWith => {
   const handleLogout = async () => dynamic.handleLogOut();
 
   const requestAccessToken = async (projectId?: string): Promise<string> => {
+    console.log('[debug] useAuthProvidders: requestAccessToken: 1')
     if (!dynamic.authToken) {
       return '';
     }
@@ -39,6 +40,7 @@ const useAuthWithDynamic = (): AuthWith => {
     const { data, error } = await loginWithDynamic({
       data: { authToken: dynamic.authToken, projectId },
     });
+    console.log(`[debug] useAuthProvidders: requestAccessToken: loginWithDynamic: response: ${JSON.stringify(data)}`)
 
     if (data && data.loginWithDynamic) {
       return data.loginWithDynamic;
@@ -51,7 +53,7 @@ const useAuthWithDynamic = (): AuthWith => {
     handleLogin,
     handleLogout,
     requestAccessToken,
-    token: dynamic.authToken,
+    accessToken: dynamic.authToken,
   };
 };
 
@@ -63,6 +65,6 @@ const getMockedProvider: () => AuthWith = () => {
     handleLogin: () => {},
     handleLogout: async () => {},
     requestAccessToken: async () => 'mocked-token',
-    token: cookies.values.authProviderToken,
+    accessToken: cookies.values.authProviderToken,
   };
 };
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 262bf578..d19cbafd 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -5,18 +5,18 @@ import { useSessionContext } from '@/providers/SessionProvider';
 import { Page } from '@/types/App';
 
 const HomePage: Page = () => {
-  const session = useSessionContext();
+  const { error, loading, auth: { accessToken, login } } = useSessionContext();
 
   const handleLogIn = () => {
-    if (!session.error && !session.loading && !session.auth.token) {
-      session.auth.login('dynamic');
+    if (!error && !loading && !accessToken) {
+      login('dynamic');
     }
   };
 
   useEffect(() => {
     handleLogIn();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [session.loading]);
+  }, [loading]);
 
   return (
     <>
diff --git a/src/pages/login/[verificationSessionId].tsx b/src/pages/login/[verificationSessionId].tsx
index 0564b4ad..886f469f 100644
--- a/src/pages/login/[verificationSessionId].tsx
+++ b/src/pages/login/[verificationSessionId].tsx
@@ -13,7 +13,7 @@ import { Log } from '@/utils/log';
 
 const LoginWithSessionPage: Page = () => {
   const router = useRouter();
-  const session = useSessionContext();
+  const { auth: { accessToken, login }, project, loading } = useSessionContext();
 
   const [
     createLoginVerificationSessionMutation,
@@ -26,9 +26,9 @@ const LoginWithSessionPage: Page = () => {
 
   const handleRedirect = useCallback(() => {
     return router.replace(
-      routes.project.home({ projectId: session.project.id }),
+      routes.project.home({ projectId: project.id }),
     );
-  }, [router, session.project.id]);
+  }, [router, project.id]);
 
   const handleCreateVerificationSession = useCallback(async () => {
     try {
@@ -76,7 +76,7 @@ const LoginWithSessionPage: Page = () => {
   }
 
   if (
-    session.auth.token &&
+    accessToken &&
     !createLoginVerificationSessionMutation?.data
       ?.createLoginVerificationSession
   ) {
@@ -106,8 +106,8 @@ const LoginWithSessionPage: Page = () => {
       withExternalLink
     >
       <Button
-        onClick={() => session.auth.login('dynamic')}
-        loading={session.loading}
+        onClick={() => login('dynamic')}
+        loading={loading}
         className="w-full"
       >
         Sign in
diff --git a/src/pages/migration/index.tsx b/src/pages/migration/index.tsx
index 33e3454e..d1527cc8 100644
--- a/src/pages/migration/index.tsx
+++ b/src/pages/migration/index.tsx
@@ -8,11 +8,11 @@ import { Button, Stepper } from '@/ui';
 import { withAccess } from '@/utils/withAccess';
 
 const MigrationPage: Page = () => {
-  const session = useSessionContext();
+  const { auth: { accessToken } } = useSessionContext();
 
   return (
     <>
-      {session.auth.token && (
+      {accessToken && (
         <Link href={routes.home()}>
           <Button intent="neutral" iconLeft="arrow-left">
             Go back
diff --git a/src/pages/templates/[templateId]/index.tsx b/src/pages/templates/[templateId]/index.tsx
index aab6f5fd..a9cf5eee 100644
--- a/src/pages/templates/[templateId]/index.tsx
+++ b/src/pages/templates/[templateId]/index.tsx
@@ -61,8 +61,8 @@ const TemplatePage: Page = () => {
 const PageNavContent: React.FC = () => {
   const router = useRouter();
   const templateId = router.query.templateId!;
-  const session = useSessionContext();
-  const projectId = session.project.id;
+  const { project, auth: { accessToken, login } } = useSessionContext();
+  const projectId = project.id;
   const { isOwner, isLoading } = useIsTemplateOwner({ templateId });
   const hasManageBillingPermission = usePermissions({
     action: [constants.PERMISSION.BILLING.MANAGE],
@@ -72,8 +72,8 @@ const PageNavContent: React.FC = () => {
   const hasReachedSitesLimit = useSiteRestriction().hasReachedLimit;
 
   const handleDeploy = () => {
-    if (!session.auth.token) {
-      session.auth.login(
+    if (!accessToken) {
+      login(
         'dynamic',
         routes.project.site.newFromTemplate({
           projectId: '[projectId]',
diff --git a/src/providers/AuthProvider.tsx b/src/providers/AuthProvider.tsx
index 69c049de..c840e810 100644
--- a/src/providers/AuthProvider.tsx
+++ b/src/providers/AuthProvider.tsx
@@ -1,5 +1,5 @@
 import { routes } from '@fleek-platform/utils-routes';
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { constants } from '@/constants';
 import { useAuthCookie } from '@/hooks/useAuthCookie';
@@ -18,13 +18,14 @@ import { clearUserSession } from '@/utils/clearUSerSession';
 export type AuthContext = {
   loading: boolean;
   error?: unknown;
-  token?: string;
+  accessToken?: string;
   redirectUrl: string | null;
 
   login: (provider: AuthProviders, redirectUrl?: string) => void;
   logout: () => void;
   switchProjectAuth: (projectId: string) => Promise<void>;
   setRedirectUrl: React.Dispatch<React.SetStateAction<string | null>>;
+  gotoProjectHome: (projectId: string) => void;
 };
 
 const [Provider, useContext] = createContext<AuthContext>({
@@ -45,22 +46,22 @@ export const AuthProvider: React.FC<React.PropsWithChildren<{}>> = ({
   const [error, setError] = useState<unknown>();
 
   const providers = useAuthProviders();
-  const providersValues = Object.values(providers);
   const router = useRouter();
 
-  const login = useCallback(
-    (providerName: AuthProviders, redirectUrl?: string) => {
-      if (redirectUrl) {
-        setRedirectUrl(redirectUrl);
-      }
+  // TODO: There's only a "provider" which is "dynamic"
+  // looks like premature complexity. Change to "dynamic"
+  const login = (providerName: AuthProviders, redirectUrl?: string) => {
+    // TODO: This looks like a "future"
+    // once the user is "logged in" go to the "future" location
+    if (redirectUrl) {
+      setRedirectUrl(redirectUrl);
+    }
 
-      const provider = providers[providerName];
-      provider.handleLogin();
-    },
-    [providers],
-  );
+    const provider = providers[providerName];
+    provider.handleLogin();
+  };
 
-  const logout = useCallback(async () => {
+  const logout = async () => {
     const invitationHash = router.query.invitation;
 
     // TODO: Why would an invitation hash have to be
@@ -74,29 +75,12 @@ export const AuthProvider: React.FC<React.PropsWithChildren<{}>> = ({
       });
     }
 
-    for (const provider of providersValues) {
-      if (!provider.token) {
-        // TODO: On "auth provider" initialisation
-        // a name should be provided to help troubleshoot.
-        // Include a name for each provider initialised.
-        console.warn('Provider doesn\'t have a token or loogout callback');
-        continue;
-      }
-
-      if (provider.token && typeof provider.handleLogout !== 'function') {
-        // TODO: Name provider on initialisation
-        // see related TODO above.
-        console.warn('Provider doesn\'t have a logout callback');
-        continue;
-      }
-
-      // TODO: For some reason the original author
-      // hasn't awaited for the logout request.
-      // This has to be revised as its possible
-      // that there are asynchronous calls involved
-      // which would have to be awaited for?
-      await provider.handleLogout();
-    }
+    // TODO: For some reason the original author
+    // hasn't awaited for the logout request.
+    // This has to be revised as its possible
+    // that there are asynchronous calls involved
+    // which would have to be awaited for?
+    await providers.dynamic.handleLogout();
 
     posthog.reset();
 
@@ -105,94 +89,107 @@ export const AuthProvider: React.FC<React.PropsWithChildren<{}>> = ({
     // values should persist. Use of a whitelist approach
     // can help. Until this is revised, all session data wiped
     clearUserSession();
-  }, [cookies, clearAccessToken, router, providersValues]);
+  };
+
+  const requestAccessToken = async (dynamic: AuthWith, projectId?: string) => {
+    console.log('[debug] AuthProvider: requestAccessToken: 1');
+    // TODO: The requestAccessToken shouldn't 
+    // be called when loading. This doesn't seem correct.
+    if (loading) {
+      console.log('[debug] AuthProvider: requestAccessToken:is loading')
+      return;
+    }
 
-  const requestAccessToken = useCallback(
-    async (provider: AuthWith, projectId?: string) => {
-      if (loading) {
-        return;
-      }
+    try {
+      setLoading(true);
+      setError(undefined);
 
-      try {
-        setLoading(true);
-        setError(undefined);
-
-        const token = await provider.requestAccessToken(projectId);
-        setAccessToken(token);
-      } catch (requestError) {
-        logout();
-        setError(requestError);
-      } finally {
-        setLoading(false);
-      }
-    },
-    [setAccessToken, loading, logout],
-  );
+      const accessToken = await dynamic.requestAccessToken(projectId);
 
-  const switchProjectAuth = useCallback(
-    async (projectId: string) => {
-      const provider = providersValues.find((provider) => provider.token);
+      if (!accessToken) {
+        console.log(`[debug] AuthProvider: requestAccessToken: doesnt seem valid: ${JSON.stringify(accessToken)}`)
+        return;
+      }
+      
+      setAccessToken(accessToken);
+    } catch (requestError) {
+      logout();
+      setError(requestError);
+    } finally {
+      setLoading(false);
+    }
+  };
 
-      if (provider) {
-        // if in site page, redirect to sites list first
-        if (router.query.siteId) {
-          await router.replace(routes.project.site.list({ projectId }));
-          delete router.query.siteId;
-        }
+  const switchProjectAuth = async (projectId: string) => {
+    if (!providers.dynamic.accessToken) {
+      console.log('[debug] AuthProvider: switchProject: !providers.dynamic.hasAccessToken')
+      return;
+    }
 
-        return requestAccessToken(provider, projectId);
-      }
-    },
+    // if in site page, redirect to sites list first
+    // TODO: Why would redirecting to a site be necessary?
+    if (router.query.siteId) {
+      await router.replace(routes.project.site.list({ projectId }));
+      delete router.query.siteId;
+    }
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [providersValues, requestAccessToken],
-  );
+    return requestAccessToken(providers.dynamic, projectId);
+  };
 
   useEffect(() => {
-    const provider = providersValues.find((provider) => provider.token);
-
-    if (provider?.token) {
-      // if has a provider token, it means that auth provider is authenticated
-      // TODO: If this is the token generated by dynamic
-      // for the call to get the `accessToken`
-      // if the token is valid, we seem to not have to need
-      // dynamic for any purpose? Likewise, this doesn't
-      // seem necessary.
-      // cookies.set('authProviderToken', provider.token);
-
-      const projectId =
-        cookies.values.projectId || constants.DEFAULT_PROJECT_ID;
-
-      // redirect if is in home page
-      if (router.pathname === routes.home()) {
-        // keep query on redirect
-        router.push({
-          pathname: routes.project.home({ projectId }),
-          query: router.query,
-        });
-      }
+    console.log('[debug] AuthProvider: useEffect: dep authProviderToken: 1');
+    const onTokenChange = async () => {
+      try {
+      console.log('[debug] AuthProvider: useEffect: dep authProviderToken: onTokenChange: 1');
 
-      // redirect if has a redirect url pending
-      if (redirectUrl) {
-        router.push(redirectUrl.replace('[projectid]', projectId));
+      // TODO: The original author was iterating over a list
+      // and picking any random accessToken. Suspicious?
+      const { accessToken } = providers.dynamic;
 
-        setRedirectUrl(null);
+      if (!accessToken) {
+        console.log('[debug] AuthProvider: dep authProviderToken: useEffect: !accessToken, should logout');
+        // TODO: Make sure other logout's are being awaited
+        await logout();
+        requestAccessToken(providers.dynamic);
+        return;
       }
 
-      // uses the auth provider token to request the access token from graphql
-      if (!accessToken) {
-        requestAccessToken(provider);
+      cookies.set('authProviderToken', accessToken);
+
+      // TODO: Move to ProjectProvider context
+      // TODO: On project id make sure the route path changes
+      // const projectId =
+      //   cookies.values.projectId || constants.DEFAULT_PROJECT_ID;
+      } catch (err) {
+        console.log('[debug] AuthProvider: useEffect: dep dynamic.accessToken: error')        
+        console.error(err);
       }
-    } else {
-      logout();
-    }
+    };
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    onTokenChange();
   }, [
-    cookies.values.authProviderToken,
-    ...providersValues.map((provider) => provider.token),
+    providers.dynamic.accessToken,
   ]);
 
+  const gotoProjectHome = (projectId: string) => {
+    // Before anything, are there any pending requests?
+    if (redirectUrl) {
+      router.push(redirectUrl.replace('[projectid]', projectId));
+
+      setRedirectUrl(null);
+
+      return;
+    }
+
+    // TODO: The original author seem to check
+    // if the user is in the public landing page
+    // before redirecting. Shouldn't it be regardless?
+    router.push({
+      pathname: routes.project.home({ projectId }),
+      query: router.query,
+    });
+  };
+
   return (
     <Provider
       value={{
@@ -201,9 +198,10 @@ export const AuthProvider: React.FC<React.PropsWithChildren<{}>> = ({
         login,
         logout,
         switchProjectAuth,
-        token: accessToken,
+        accessToken,
         redirectUrl,
         setRedirectUrl,
+        gotoProjectHome,
       }}
     >
       {children}
diff --git a/src/providers/DynamicProvider.tsx b/src/providers/DynamicProvider.tsx
index 44be5750..9283ca5c 100644
--- a/src/providers/DynamicProvider.tsx
+++ b/src/providers/DynamicProvider.tsx
@@ -8,7 +8,8 @@ import { DynamicWagmiConnector } from '@dynamic-labs/wagmi-connector';
 import { useMeQuery, useUpdateUserMutation } from '@/generated/graphqlClient';
 import { secrets } from '@/secrets';
 
-import { useCookies } from './CookiesProvider';
+// TODO: Fix name
+import { clearUserSession } from '@/utils/clearUSerSession';
 
 export type DynamicProviderProps = React.PropsWithChildren<{}>;
 
@@ -17,7 +18,6 @@ export const DynamicProvider: React.FC<DynamicProviderProps> = ({
 }) => {
   const [, updateUser] = useUpdateUserMutation();
   const [meQuery] = useMeQuery();
-  const cookies = useCookies();
 
   return (
     <DynamicContextProvider
@@ -25,10 +25,7 @@ export const DynamicProvider: React.FC<DynamicProviderProps> = ({
         environmentId: secrets.NEXT_PUBLIC_UI__DYNAMIC_ENVIRONMENT_ID,
         walletConnectors: [EthereumWalletConnectors],
         eventsCallbacks: {
-          onLogout: () => {
-            cookies.remove('authProviderToken');
-            cookies.remove('accessToken');
-          },
+          onLogout: () => clearUserSession(),
           onLinkSuccess: async (args) => {
             // for now we want to save the first wallet linked
             if (
diff --git a/src/providers/ProjectProvider.tsx b/src/providers/ProjectProvider.tsx
index 1c8a4129..a1b8f924 100644
--- a/src/providers/ProjectProvider.tsx
+++ b/src/providers/ProjectProvider.tsx
@@ -36,18 +36,67 @@ export const ProjectProvider: React.FC<React.PropsWithChildren<{}>> = ({
   const router = useRouter();
   const cookies = useCookies();
   const [projectsQuery, refetchProjectsQuery] = useProjectsQuery({
-    pause: !auth.token,
+    pause: !auth.accessToken,
     variables: {},
   });
   const [, createProject] = useCreateProjectMutation();
   const [isCreateProjectModalOpen, setIsCreateProjectModalOpen] =
     useState(false);
+  const [defaultProjectId, setDefaultProjectId] = useState('');
+
+  useEffect(() => {
+    // Before, do we already have a Project Id?
+    if (cookies.values.projectId) {
+      setDefaultProjectId(cookies.values.projectId);
+
+      return;
+    }
+    
+    console.log('[debug] useEffect: auth.accessToken: 1')
+    if (!auth.accessToken) {
+      console.log('[debug] Providers>ProjectProviders>auth.token');
+      return;
+    }
+
+    if (projectsQuery.fetching) {
+      console.log('[debug] Providers>ProjectsProviders>projectsQuery.fetching');
+      return;
+    }
+
+    if (!Array.isArray(projectsQuery.data.projects.data) || !projectsQuery.data.projects.data.length) {
+      console.log('[debug] Providers>ProjectsProviders>projectsQuery.data.projects.data NOT');
+      return;
+    }
+
+    // TODO: Create utility to decide which project
+    // to pick when one is not known. For now default first.
+    const projectId = projectsQuery.data.projects.data[0].id;
+
+    if (!projectId) {
+      console.log(`[debug] ProjectProvider: useEffect: deps accessToken, projectsQuery, etc: projectId NOT`)
+
+      return;
+    }
+  
+    setDefaultProjectId(projectId);
+  }, [auth.accessToken, projectsQuery.fetching, projectsQuery.data?.projects?.data, cookies.values?.projectId]);
+
+  useEffect(() => {
+    if (!defaultProjectId) {
+      console.log('[debug] ProjectProvider: defaultProjectId NOT');
+      
+      return;
+    }
+
+    console.log(`[debug] ProjectProvider: defaultProjectId = ${defaultProjectId}`);
+    auth.gotoProjectHome(defaultProjectId);
+  }, [defaultProjectId]);
 
   useEffect(() => {
     const { data, fetching } = projectsQuery;
-    const { token } = auth;
+    const { accessToken } = auth;
 
-    if (!data || !token || fetching) {
+    if (!data || !accessToken || fetching) {
       return;
     }
 
@@ -102,7 +151,7 @@ export const ProjectProvider: React.FC<React.PropsWithChildren<{}>> = ({
       };
 
       const sameProject =
-        decodeAccessToken({ token }).projectId === newProjectId;
+        decodeAccessToken({ accessToken }).projectId === newProjectId;
 
       if (sameProject && allowedProject) {
         await redirect();
@@ -164,7 +213,7 @@ export const ProjectProvider: React.FC<React.PropsWithChildren<{}>> = ({
       return false;
     }
 
-    if (cookies.values.authProviderToken && !auth.token) {
+    if (cookies.values.authProviderToken && !auth.accessToken) {
       return true;
     }
 
@@ -174,7 +223,7 @@ export const ProjectProvider: React.FC<React.PropsWithChildren<{}>> = ({
   }, [
     projectsQuery.data,
     project.id,
-    auth.token,
+    auth.accessToken,
     cookies.values.authProviderToken,
   ]);
 
diff --git a/src/providers/SessionProvider.tsx b/src/providers/SessionProvider.tsx
index ce55b8b8..260077b1 100644
--- a/src/providers/SessionProvider.tsx
+++ b/src/providers/SessionProvider.tsx
@@ -21,7 +21,7 @@ type SessionContext = {
   loading: boolean;
   error?: any;
 
-  auth: Pick<AuthContext, 'login' | 'logout' | 'token'>;
+  auth: Pick<AuthContext, 'login' | 'logout' | 'accessToken'>;
   project: ProjectContext['project'];
   permissions: PermissionsContext['permissions'];
 

From 4adda0b6f51dbf1ae287594973b9174d39273150 Mon Sep 17 00:00:00 2001
From: Helder Oliveira <heldrida@gmail.com>
Date: Sat, 7 Dec 2024 16:39:02 +0000
Subject: [PATCH 5/5] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20WIP,=20stopped?=
 =?UTF-8?q?=20at=20menu=20item=20change=20issue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Auth/index.tsx                |  28 +-
 src/components/ftw/RootLayout/RootLayout.tsx |   2 +
 src/fragments/Projects/Layout.tsx            |  13 +-
 src/hooks/useAuthProviders.ts                |   7 +-
 src/pages/_app.tsx                           |  10 +-
 src/providers/AuthProvider.tsx               |  74 ++--
 src/providers/PermissionsProvider.tsx        |   5 +
 src/providers/ProjectProvider.tsx            | 423 ++++++++++++-------
 src/providers/Providers.tsx                  |  42 +-
 src/providers/SessionProvider.tsx            |   8 +
 src/providers/UrqlProvider.tsx               |   2 +
 11 files changed, 405 insertions(+), 209 deletions(-)

diff --git a/src/components/Auth/index.tsx b/src/components/Auth/index.tsx
index 73b2b32d..272d40b9 100644
--- a/src/components/Auth/index.tsx
+++ b/src/components/Auth/index.tsx
@@ -1,3 +1,6 @@
+// TODO: This can now be deleted
+// the cookie handling should be done in AuthProvider
+// and project resolution in the ProjectProvider
 'use client';
 
 import { routes } from '@fleek-platform/utils-routes';
@@ -17,26 +20,47 @@ export const Auth: FC<AuthProps> = ({ children }) => {
   const [isChecking, setIsChecking] = useState(true);
 
   useEffect(() => {
+    console.log('[debug] Auth: useEffect: deps router: 1');
+    
     const checkAuth = () => {
+      console.log('[debug] Auth: checkAuth: 1');
+      setIsChecking(true);
+      
       const authToken = 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;
+          ?.split('=')[1];
+
+      console.log(`[debug] Auth: checkAuth: ${JSON.stringify({
+        authToken,
+        projectId,       
+      })}`);
+
       const hasAuthentication = Boolean(authToken);
       const currentPath = window.location.pathname;
 
+      console.log(`[debug] Auth: checkAuth: ${JSON.stringify({
+        hasAuthentication,
+        currentPath,
+      })}`);
+
       if (hasAuthentication && currentPath === routes.home()) {
-        router.push(routes.project.home({ projectId }));
+        console.log(`[debug] Auth: checkAuth: hasAuth and is path home`);
 
+        router.push(routes.project.home({ projectId }));
         setIsChecking(false);
+
         return;
       }
 
+      // TODO: The dashboard should not have public routes
+      // it's membership only
       const isPublicRoute = Boolean(
         constants.PUBLIC_ROUTES.find((route) =>
           matchesPathname(route, currentPath),
diff --git a/src/components/ftw/RootLayout/RootLayout.tsx b/src/components/ftw/RootLayout/RootLayout.tsx
index 721bb6ee..5fd11e98 100644
--- a/src/components/ftw/RootLayout/RootLayout.tsx
+++ b/src/components/ftw/RootLayout/RootLayout.tsx
@@ -170,6 +170,8 @@ const Sidebar: React.FC<SidebarProps> = ({
     // on the client side, show versions if not prod or user is internal
     if (
       !isServerSide() &&
+      // TODO: This shouldn't be hard-typed
+      // e.g. staging vs prd URLs
       (location.hostname !== 'app.fleek.xyz' || flags.isInternalUser)
     ) {
       setShowVersion(true);
diff --git a/src/fragments/Projects/Layout.tsx b/src/fragments/Projects/Layout.tsx
index 34bb7575..f91808dc 100644
--- a/src/fragments/Projects/Layout.tsx
+++ b/src/fragments/Projects/Layout.tsx
@@ -1,3 +1,4 @@
+import { useMemo, memo } from 'react';
 import { ProjectDropdown, RootLayout } from '@/components';
 import { useMainNavigationItems } from '@/hooks/useMainNavigationItems';
 import { useSessionContext } from '@/providers/SessionProvider';
@@ -6,9 +7,17 @@ export type Layout = React.PropsWithChildren<{
   nav?: React.ReactNode | React.ReactNode[];
 }>;
 
+// TODO: When clicking outside the menu, e.g. right side
+// content area, this component re-renders. Why?
 export const Layout: React.FC<Layout> = ({ children, nav: pageNavContent }) => {
   const session = useSessionContext(true);
-  const navigation = useMainNavigationItems();
+  const navigationItems = useMainNavigationItems();
+  // TODO: The memo won't be effective as the nav items
+  // has the URL attribute which includes diff projectid
+  // per navigation selection
+  const navigation = useMemo(() => navigationItems, [navigationItems]);
+
+  console.log('[debug] Layout: re-render: 1', JSON.stringify(navigation))
 
   return (
     <RootLayout.Container>
@@ -26,3 +35,5 @@ export const Layout: React.FC<Layout> = ({ children, nav: pageNavContent }) => {
     </RootLayout.Container>
   );
 };
+
+Layout.displayName = 'Layout';
diff --git a/src/hooks/useAuthProviders.ts b/src/hooks/useAuthProviders.ts
index 89469bbc..22799a22 100644
--- a/src/hooks/useAuthProviders.ts
+++ b/src/hooks/useAuthProviders.ts
@@ -10,7 +10,7 @@ export type AuthWith = {
   handleLogin: () => void;
   handleLogout: () => Promise<void>;
   requestAccessToken: (projectId?: string) => Promise<string>;
-  accessToken?: string;
+  authProviderToken?: string;
 };
 
 export const useAuthProviders = (): Record<AuthProviders, AuthWith> => {
@@ -34,12 +34,15 @@ const useAuthWithDynamic = (): AuthWith => {
   const requestAccessToken = async (projectId?: string): Promise<string> => {
     console.log('[debug] useAuthProvidders: requestAccessToken: 1')
     if (!dynamic.authToken) {
+      console.log('[debug] useAuthProvidders: requestAccessToken: requestAccessToken NOT')
+
       return '';
     }
 
     const { data, error } = await loginWithDynamic({
       data: { authToken: dynamic.authToken, projectId },
     });
+
     console.log(`[debug] useAuthProvidders: requestAccessToken: loginWithDynamic: response: ${JSON.stringify(data)}`)
 
     if (data && data.loginWithDynamic) {
@@ -53,7 +56,7 @@ const useAuthWithDynamic = (): AuthWith => {
     handleLogin,
     handleLogout,
     requestAccessToken,
-    accessToken: dynamic.authToken,
+    authProviderToken: dynamic.authToken,
   };
 };
 
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 09f540cf..285b0628 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -51,12 +51,10 @@ const App = ({ Component, pageProps, requestCookies }: AppProps) => {
         </Head>
       )}
       <Providers requestCookies={requestCookies} forcedTheme={forcedTheme}>
-        <Auth>
-          <h1>{noCanonical}</h1>
-          {getLayout(<Component {...pageProps} />)}
-          <ToastsContainer />
-          <FeedbackModal />
-        </Auth>
+        <h1>{noCanonical}</h1>
+        {getLayout(<Component {...pageProps} />)}
+        <ToastsContainer />
+        <FeedbackModal />
       </Providers>
     </>
   );
diff --git a/src/providers/AuthProvider.tsx b/src/providers/AuthProvider.tsx
index c840e810..972fe7d5 100644
--- a/src/providers/AuthProvider.tsx
+++ b/src/providers/AuthProvider.tsx
@@ -2,13 +2,11 @@ import { routes } from '@fleek-platform/utils-routes';
 import { useEffect, useState } from 'react';
 
 import { constants } from '@/constants';
-import { useAuthCookie } from '@/hooks/useAuthCookie';
 import {
   AuthProviders,
   AuthWith,
   useAuthProviders,
 } from '@/hooks/useAuthProviders';
-import { usePostHog } from '@/hooks/usePostHog';
 import { useRouter } from '@/hooks/useRouter';
 import { createContext } from '@/utils/createContext';
 
@@ -23,9 +21,10 @@ export type AuthContext = {
 
   login: (provider: AuthProviders, redirectUrl?: string) => void;
   logout: () => void;
-  switchProjectAuth: (projectId: string) => Promise<void>;
+  switchProjectAuth: (projectId: string) => Promise<string>;
   setRedirectUrl: React.Dispatch<React.SetStateAction<string | null>>;
   gotoProjectHome: (projectId: string) => void;
+  setAccessToken: (token: string) => void;
 };
 
 const [Provider, useContext] = createContext<AuthContext>({
@@ -37,8 +36,6 @@ const [Provider, useContext] = createContext<AuthContext>({
 export const AuthProvider: React.FC<React.PropsWithChildren<{}>> = ({
   children,
 }) => {
-  const [accessToken, setAccessToken, clearAccessToken] = useAuthCookie();
-  const posthog = usePostHog();
   const [redirectUrl, setRedirectUrl] = useState<string | null>(null);
   const cookies = useCookies();
 
@@ -47,6 +44,7 @@ export const AuthProvider: React.FC<React.PropsWithChildren<{}>> = ({
 
   const providers = useAuthProviders();
   const router = useRouter();
+  const [accessToken, setAccessToken] = useState<string>();
 
   // TODO: There's only a "provider" which is "dynamic"
   // looks like premature complexity. Change to "dynamic"
@@ -82,8 +80,6 @@ export const AuthProvider: React.FC<React.PropsWithChildren<{}>> = ({
     // which would have to be awaited for?
     await providers.dynamic.handleLogout();
 
-    posthog.reset();
-
     // TODO: Session has third-party data
     // at time of writing there's no way to know which
     // values should persist. Use of a whitelist approach
@@ -111,7 +107,7 @@ export const AuthProvider: React.FC<React.PropsWithChildren<{}>> = ({
         return;
       }
       
-      setAccessToken(accessToken);
+      return accessToken;
     } catch (requestError) {
       logout();
       setError(requestError);
@@ -121,7 +117,7 @@ export const AuthProvider: React.FC<React.PropsWithChildren<{}>> = ({
   };
 
   const switchProjectAuth = async (projectId: string) => {
-    if (!providers.dynamic.accessToken) {
+    if (!providers.dynamic.authProviderToken) {
       console.log('[debug] AuthProvider: switchProject: !providers.dynamic.hasAccessToken')
       return;
     }
@@ -137,29 +133,44 @@ export const AuthProvider: React.FC<React.PropsWithChildren<{}>> = ({
   };
 
   useEffect(() => {
-    console.log('[debug] AuthProvider: useEffect: dep authProviderToken: 1');
+    console.log('[debug] AuthProvider: useEffect: dep providers.dynamic.accessToken: 1');
     const onTokenChange = async () => {
       try {
-      console.log('[debug] AuthProvider: useEffect: dep authProviderToken: onTokenChange: 1');
-
-      // TODO: The original author was iterating over a list
-      // and picking any random accessToken. Suspicious?
-      const { accessToken } = providers.dynamic;
-
-      if (!accessToken) {
-        console.log('[debug] AuthProvider: dep authProviderToken: useEffect: !accessToken, should logout');
-        // TODO: Make sure other logout's are being awaited
-        await logout();
-        requestAccessToken(providers.dynamic);
-        return;
-      }
-
-      cookies.set('authProviderToken', accessToken);
-
-      // TODO: Move to ProjectProvider context
-      // TODO: On project id make sure the route path changes
-      // const projectId =
-      //   cookies.values.projectId || constants.DEFAULT_PROJECT_ID;
+        console.log('[debug] AuthProvider: useEffect: dep providers.dynamic.accessToken: onTokenChange: 1');
+
+        // TODO: The original author was iterating over a list
+        // and picking any random accessToken. Suspicious?
+        const { authProviderToken } = providers.dynamic;
+
+        if (!authProviderToken) {
+          console.log('[debug] AuthProvider: dep providers.dynamic.accessToken: useEffect: !accessToken, should logout');
+          // TODO: Make sure other logout's are being awaited
+          // the original author seem to not have awaited
+          // for some reason.
+          await logout();
+
+          return;
+        }
+
+        // TODO: The cookies.set authProviderToken
+        // should happen after successfull requestAccessToken
+        // e.g. as success callback
+        const accessToken = await requestAccessToken(providers.dynamic);
+
+        if (!accessToken) {
+          console.log('[debug] AuthProvider: useEffect: providers.dynamic.authProviderToken: after response of requestAccessToken: accessToken NOT')
+          return;
+        }
+        
+        console.log(`[debug] AuthProvider: useEffect: deps providers.dynamic.accessToken: cookies.set authProviderToken: authProviderToken = ${authProviderToken}, accessToken = ${accessToken}`);
+
+        // TODO: useAuthCookie.setAccessToken hook doesn't seem
+        // to update the token, so using cookies.set
+        // until investigation
+        cookies.set('authProviderToken', authProviderToken);
+        cookies.set('accessToken', accessToken);
+
+        setAccessToken(accessToken);
       } catch (err) {
         console.log('[debug] AuthProvider: useEffect: dep dynamic.accessToken: error')        
         console.error(err);
@@ -168,7 +179,7 @@ export const AuthProvider: React.FC<React.PropsWithChildren<{}>> = ({
 
     onTokenChange();
   }, [
-    providers.dynamic.accessToken,
+    providers.dynamic.authProviderToken,
   ]);
 
   const gotoProjectHome = (projectId: string) => {
@@ -202,6 +213,7 @@ export const AuthProvider: React.FC<React.PropsWithChildren<{}>> = ({
         redirectUrl,
         setRedirectUrl,
         gotoProjectHome,
+        setAccessToken,
       }}
     >
       {children}
diff --git a/src/providers/PermissionsProvider.tsx b/src/providers/PermissionsProvider.tsx
index 2ba11675..6b2165fb 100644
--- a/src/providers/PermissionsProvider.tsx
+++ b/src/providers/PermissionsProvider.tsx
@@ -17,6 +17,11 @@ const [Provider, useContext] = createContext<PermissionsContext>({
 export const PermissionsProvider: React.FC<ChildrenProps> = ({ children }) => {
   const { project: data, loading } = useProjectContext();
 
+  if (!data || loading) {
+    console.log('[debug] PermissionsProvider: !data || loading')
+    return;
+  }
+
   return (
     <Provider
       value={{
diff --git a/src/providers/ProjectProvider.tsx b/src/providers/ProjectProvider.tsx
index a1b8f924..9b474d59 100644
--- a/src/providers/ProjectProvider.tsx
+++ b/src/providers/ProjectProvider.tsx
@@ -15,9 +15,10 @@ import { Log } from '@/utils/log';
 import { useAuthContext } from './AuthProvider';
 import { useCookies } from './CookiesProvider';
 
+export type Project = ProjectList[0];
 export type ProjectContext = {
   loading: boolean;
-  project: ProjectList[0];
+  project: Project;
   error?: any;
   isCreateProjectModalOpen: boolean;
   setIsCreateProjectModalOpen: (open: boolean) => void;
@@ -29,6 +30,25 @@ const [Provider, useContext] = createContext<ProjectContext>({
   providerName: 'ProjectProvider',
 });
 
+// TODO: This should not be used
+// used at the moment just for TIAS
+// to replace the original author's
+// Located where below the <Provider>{children}</Provider>
+// is the `project` computed as it shouldn't
+// the landing page should display immediately
+// without page drilling
+const emptyProject = {
+  id: '',
+  name: 'Project',
+  currentUserMembership: {
+    permissionGroup: {
+      id: '',
+      name: '',
+      permissions: [],
+    },
+  },
+};
+
 export const ProjectProvider: React.FC<React.PropsWithChildren<{}>> = ({
   children,
 }) => {
@@ -43,195 +63,230 @@ export const ProjectProvider: React.FC<React.PropsWithChildren<{}>> = ({
   const [isCreateProjectModalOpen, setIsCreateProjectModalOpen] =
     useState(false);
   const [defaultProjectId, setDefaultProjectId] = useState('');
+  const [project, setProject] = useState<Project>(emptyProject);
 
   useEffect(() => {
-    // Before, do we already have a Project Id?
-    if (cookies.values.projectId) {
-      setDefaultProjectId(cookies.values.projectId);
+    console.log('[debug] ProjectProvider: useEffect: deps auth.accessToken, cookies.values.projecId, etc: 1');
 
-      return;
-    }
+    // TODO: Maybe move to the initProjectHandler useEffect
+    const defaultProjectIdHandler = () => {
+      console.log('[debug] ProjectProvider: useEffect: deps auth.accessToken, cookies.values.projecId, etc: defaultProjectIdHandler : 1');
     
-    console.log('[debug] useEffect: auth.accessToken: 1')
-    if (!auth.accessToken) {
-      console.log('[debug] Providers>ProjectProviders>auth.token');
-      return;
-    }
+      if (!auth.accessToken) {
+        console.log('[debug] ProjectProvider: useEffect: defaultProjectIdHandler: deps auth.accessToken, cookies.values.projecId, etc: defaultProjectIdHandler : accessToken NOT');
 
-    if (projectsQuery.fetching) {
-      console.log('[debug] Providers>ProjectsProviders>projectsQuery.fetching');
-      return;
-    }
+        return;
+      }
 
-    if (!Array.isArray(projectsQuery.data.projects.data) || !projectsQuery.data.projects.data.length) {
-      console.log('[debug] Providers>ProjectsProviders>projectsQuery.data.projects.data NOT');
-      return;
-    }
+      if (projectsQuery.fetching) {
+        console.log('[debug] ProjectProvider: useEffect: defaultProjectIdHandler: deps auth.accessToken, cookies.values.projecId, etc: defaultProjectIdHandler : projectsQuery fetching TRUE');
 
-    // TODO: Create utility to decide which project
-    // to pick when one is not known. For now default first.
-    const projectId = projectsQuery.data.projects.data[0].id;
+        return;
+      }
 
-    if (!projectId) {
-      console.log(`[debug] ProjectProvider: useEffect: deps accessToken, projectsQuery, etc: projectId NOT`)
+      // TODO: Solve the optional chain assessment
+      if (!Array.isArray(projectsQuery.data?.projects?.data) || !projectsQuery.data?.projects?.data.length) {
+        console.log('[debug] ProjectProvider: useEffect: defaultProjectIdHandler: deps auth.accessToken, cookies.values.projecId, etc: defaultProjectIdHandler : projects.data NOT');
 
-      return;
-    }
-  
-    setDefaultProjectId(projectId);
-  }, [auth.accessToken, projectsQuery.fetching, projectsQuery.data?.projects?.data, cookies.values?.projectId]);
+        return;
+      }
 
+      // TODO: Create utility to decide which project
+      // when we don't know which is the user preference
+      // we use the fallback
+      // guess this should be set as user preference
+      // in the service side
+      const projects = projectsQuery.data.projects.data;
+      const userProject = projects.find(item => item.id === cookies.values.projectId);
+
+      if (!userProject) {
+        console.log('[debug] ProjectProvider: useEffect: defaultProjectIdHandler: deps auth.accessToken, cookies.values.projecId, etc: defaultProjectIdHandler : projectId NOT; what to do in this case?', JSON.stringify(projects));
+
+        setProject(projects[0]);
+
+        return;
+      }
+
+      setProject(userProject);
+
+      // TODO: This should be removed
+      // for the moment just for TIAS
+      // as we have the setProject
+      // setDefaultProjectId(project.id);
+    };
+
+    defaultProjectIdHandler();
+  }, [auth.accessToken, projectsQuery.fetching, projectsQuery.data?.projects?.data, cookies.values?.accessToken, cookies.values?.projectId, project?.id]);
+
+  useEffect(() => {
+    console.log('[debug] ProjectProvider: useEffect: auth.accessToken triggered')
+  }, [auth.accessToken]);
+
+  // Does something when a default
+  // projectId is determined
   useEffect(() => {
-    if (!defaultProjectId) {
+    if (!project || !project.id) {
       console.log('[debug] ProjectProvider: defaultProjectId NOT');
       
       return;
     }
 
-    console.log(`[debug] ProjectProvider: defaultProjectId = ${defaultProjectId}`);
-    auth.gotoProjectHome(defaultProjectId);
-  }, [defaultProjectId]);
+    console.log(`[debug] ProjectProvider: defaultProjectId = ${project.id}`);
+    auth.gotoProjectHome(project.id);
+  }, [project]);
 
+  // Does something when the URL
+  // which includes the projectId changes
+  // e.g. main menu project selection
   useEffect(() => {
-    const { data, fetching } = projectsQuery;
-    const { accessToken } = auth;
+    console.log('[debug] ProjectProvider: useEffect: deps router.query.projectId: 1');
+
+    if (!router.query.projectId || router.query.projectId === project.id) {
+      console.log('[debug] ProjectProvider: useEffect: dep router.query.projectId: NOT projectid')
 
-    if (!data || !accessToken || fetching) {
       return;
     }
 
-    const projects = data.projects.data;
+    console.log(`[debug] ProjectProvider: useEffect dep router.query.projectId): ${router.query.projectId}`);
 
-    if (projects.length === 0) {
-      const createInitialProject = async () => {
-        try {
-          await createProject({ data: { name: constants.FIRST_PROJECT_NAME } });
-          refetchProjectsQuery({ requestPolicy: 'network-only' });
-        } catch (error) {
-          // TODO: handle error
-          Log.error('Failed to create initial project', error);
-        }
-      };
+    const onProjectChange = async () => {
+      // TODO: This should be set in a `project` change
+      // not here
+      // cookies.set('projectId', router.query.projectId);
+      await (refetchProjectsQuery({ requestPolicy: 'network-only' }) as unknown as Promise<void>);
+    }
+
+    onProjectChange();
+  }, [router.query.projectId]);
 
-      createInitialProject();
+  useEffect(() => {
+    console.log('[debug] ProjectProvider: useEffect: deps project: 1: should cookies.set project id')
+    if (!project || project.id === cookies.values.projectId) {
+      console.log('[debug] ProjectProvider: useEffect: deps project: project NOT')
 
       return;
     }
+    console.log('[debug] ProjectProvider: useEffect: deps project: 2: should cookies.set project id', JSON.stringify({
+      hasProject: !!project,
+      project,
+    }))
+    cookies.set('projectId', project.id);
+  }, [project]);
+
+  useEffect(() => {
+    const initProject = async () => {
+      const { data, fetching } = projectsQuery;
+      const { accessToken } = auth;
 
-    const changeProject = async (newProjectId: string) => {
-      const allowedProject = projects.find(
-        (project) => project.id === newProjectId,
-      );
+      if (fetching) {
+        console.log('[debug] ProjectProvider: useEffect: deps cookies.values.projectId + projectsQuery.data.projects.data, etc: fetching TRUE');
 
-      if (!allowedProject) {
-        newProjectId = projects[0].id;
+        return;
       }
 
-      const redirect = async () => {
-        const shouldRedirect = router.pathname === routes.home();
-
-        if (shouldRedirect) {
-          // keep query on redirect
-          router.push({
-            pathname: routes.project.home({ projectId: newProjectId }),
-            query: router.query,
-          });
-        }
+      if (!data || !accessToken) {
+        console.log('[debug] ProjectProvider: useEffect: deps cookies.values.projectId + projectsQuery.data.projects.data, etc: doesnt have data or accessToken');
 
-        const isProjectRoute = router.pathname.includes('[projectId]');
+        return;
+      }
 
-        if (isProjectRoute) {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { page, ...parsedProjectQueryRoute } = router.query;
+      const projects = data.projects.data;
+
+      if (!projects.length) {
+        console.log('[debug] ProjectProvider: useEffect: dps cookies.values.projectId, projectsQuery?.fetching, projectsQuery.data?.projects?.data: projects.lenght NOT')
+        // TODO: This should be awaited otherwise
+        // it'll cause concurrency. The original author
+        // failed to await, for this reason there
+        // implementation issues elsewhere due to concurrency
+        await createInitialProject({
+          name: constants.FIRST_PROJECT_NAME,
+          // TODO: Type this correctly
+          createProject: createProject as unknown as CreateProject,
+          refetchProjectsQuery: refetchProjectsQuery as RefetchProjectsQuery,
+        });
 
-          return router.replace({
-            query: { ...parsedProjectQueryRoute, projectId: newProjectId },
-          });
-        }
-      };
+        return;
+      }
 
-      const sameProject =
-        decodeAccessToken({ accessToken }).projectId === newProjectId;
+      const projectId = cookies.values.projectId;
+      const hasChangedProject = changeProject({
+        projectId,
+        projects,
+        accessToken,
+      });
 
-      if (sameProject && allowedProject) {
-        await redirect();
+      if (hasChangedProject) {
+        console.log(`[debug] ProjectProvider: hasChangedProject = ${hasChangedProject}, projectId = ${projectId}`);
 
         return;
       }
 
-      try {
-        await auth.switchProjectAuth(newProjectId);
-        await redirect();
-        cookies.set('projectId', newProjectId);
-      } catch (error) {
-        Log.error('Failed to switch project', error);
-      }
-    };
-
-    changeProject(cookies.values.projectId ?? projects[0].id);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [cookies.values.projectId, projectsQuery]);
+      console.log(`[debug] ProjectProvider: useEffect: dps cookies.values.projectId, projectsQuery?.fetching, projectsQuery.data?.projects?.data: hasChangedProject = ${hasChangedProject}`);
 
-  useEffect(() => {
-    if (router.query.projectId) {
-      cookies.set('projectId', router.query.projectId);
-    }
-    // Update cookie on first run if it is present in the url
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const project = useMemo(() => {
-    const { data } = projectsQuery;
-    const defaultProject = {
-      id: router.query.projectId || '',
-      name: 'Project',
-      currentUserMembership: {
-        permissionGroup: {
-          id: '',
-          name: '',
-          permissions: [],
-        },
-      },
+      redirect({
+        projectId,
+        router,
+      });
     };
 
-    if (!data) {
-      return defaultProject;
-    }
-
-    const projects = data.projects.data;
-
-    return (
-      projects.find((project) => project.id === cookies.values.projectId) ||
-      defaultProject
-    );
-  }, [cookies.values.projectId, projectsQuery, router]);
-
-  const isLoading = useMemo(() => {
-    if (!cookies.values.authProviderToken) {
-      delete projectsQuery.data; // this is forcing a cache clean for when it has logout
-
-      return false;
-    }
-
-    if (cookies.values.authProviderToken && !auth.accessToken) {
-      return true;
-    }
-
-    return !projectsQuery.data?.projects.data.some(
-      (listProject) => project.id === listProject.id,
-    );
-  }, [
-    projectsQuery.data,
-    project.id,
-    auth.accessToken,
-    cookies.values.authProviderToken,
-  ]);
+    initProject();
+  }, [cookies.values.projectId, projectsQuery?.fetching, projectsQuery.data?.projects?.data]);
+
+  // TODO: This is causing a concurrency issue
+  // due to setting a project id on refresh.
+  // If the user is logged in, the projectId
+  // should already exist in the cookie.
+  // // Update cookie on first run if it is present in the url
+  // useEffect(() => {
+  //   if (router.query.projectId) {
+  //     cookies.set('projectId', router.query.projectId);
+  //   }
+  // }, []);
+
+  // TODO: This should be replaced after the
+  // change for setDefaultProjectId as setProject instead
+  // const project = useMemo(() => {
+  //   const { data } = projectsQuery;
+  //   const defaultProject = {
+  //     id: router.query.projectId || '',
+  //     name: 'Project',
+  //     currentUserMembership: {
+  //       permissionGroup: {
+  //         id: '',
+  //         name: '',
+  //         permissions: [],
+  //       },
+  //     },
+  //   };
+
+  //   if (!data) {
+  //     return defaultProject;
+  //   }
+
+  //   const projects = data.projects.data;
+
+  //   return (
+  //     projects.find((project) => project.id === cookies.values.projectId) ||
+  //     defaultProject
+  //   );
+  // }, [cookies.values.projectId, projectsQuery.data?.projects?.data, router, defaultProjectId]);
+
+  const loading = projectsQuery.fetching || !project;
+
+  if (!project) {
+    console.log(`[debug] ProjectProvider: projectsQuery.fetching or !project ${JSON.stringify({
+      fetching: projectsQuery.fetching,
+      project,
+    })}`);
+
+    return;
+  }
 
   return (
     <Provider
       value={{
         project,
-        loading: isLoading,
+        loading,
         error: projectsQuery.error,
         isCreateProjectModalOpen,
         setIsCreateProjectModalOpen,
@@ -243,3 +298,87 @@ export const ProjectProvider: React.FC<React.PropsWithChildren<{}>> = ({
 };
 
 export const useProjectContext = useContext;
+
+// TODO: Move as utility
+// refactor to make it unit testable
+const changeProject = ({
+  projectId,
+  projects,
+  accessToken,
+}: {
+  projectId: string;
+  projects: ProjectList;
+  accessToken: string;
+}): boolean => {
+  const allowedProject = projects.find(
+    (project) => project.id === projectId,
+  );
+
+  if (!allowedProject) {
+    projectId = projects[0].id;
+  }
+
+  const sameProject =
+    decodeAccessToken({ token: accessToken }).projectId === projectId;
+
+  if (sameProject && allowedProject) {
+
+    return false;
+  }
+
+  return true;
+};
+
+// TODO: Move as utility should be unit testable
+const redirect = ({
+  router,
+  projectId,
+}: {
+  router: ReturnType<typeof useRouter>;
+  projectId: string;
+}) => {
+  console.log(`[debug] ProjectProvider: redirect: 1`);
+  const shouldRedirect = router.pathname === routes.home();
+  console.log(`[debug] ProjectProvider: redirect: shouldRedirect = ${shouldRedirect}`);
+  if (shouldRedirect) {
+    // keep query on redirect
+    router.push({
+      pathname: routes.project.home({ projectId }),
+      query: router.query,
+    });
+  }
+
+  const isProjectRoute = router.pathname.includes('[projectId]');
+  console.log(`[debug] ProjectProvider: redirect: isProjectRoute = ${isProjectRoute}`);
+
+  if (isProjectRoute) {
+    const { page, ...parsedProjectQueryRoute } = router.query;
+
+    return router.replace({
+      query: { ...parsedProjectQueryRoute, projectId },
+    });
+  }
+};
+
+// TODO: Type this correctly
+type CreateProject = (args: { data: { name: string; }}) => Promise<void>;
+// TODO: Type this correctly
+type RefetchProjectsQuery = (args: { requestPolicy: string }) => Promise<void>;
+
+const createInitialProject = async ({
+  name,
+  createProject,
+  refetchProjectsQuery,
+}: {
+  name: string;
+  createProject: CreateProject;
+  refetchProjectsQuery: RefetchProjectsQuery;
+}) => {
+  try {
+    await createProject({ data: { name } });
+    await refetchProjectsQuery({ requestPolicy: 'network-only' });
+  } catch (error) {
+    // TODO: handle error
+    Log.error('Failed to create initial project', error);
+  }
+};
diff --git a/src/providers/Providers.tsx b/src/providers/Providers.tsx
index fae68677..03987800 100644
--- a/src/providers/Providers.tsx
+++ b/src/providers/Providers.tsx
@@ -3,9 +3,7 @@ import { ChildrenProps } from '@/types/Props';
 import { CookiesContext, CookiesProvider } from './CookiesProvider';
 import { DynamicProvider } from './DynamicProvider';
 import { FeedbackModalProvider } from './FeedbackModalProvider';
-import { LaunchDarklyProvider } from './LaunchDarklyProvider';
 import { LogRocketProvider } from './LogRocketProvider';
-import { PHProvider } from './PHProvider';
 import { QueryClientProvider } from './QueryClientProvider';
 import { SessionProvider } from './SessionProvider';
 import { ThemeProvider } from './ThemeProvider';
@@ -25,34 +23,28 @@ export const Providers: React.FC<ProvidersProps> = ({
   forcedTheme,
 }) => {
   return (
-    <CookiesProvider requestCookies={requestCookies}>
-      <UrqlProvider>
-        <LaunchDarklyProvider>
+    <ToastProvider>
+      <CookiesProvider requestCookies={requestCookies}>
+        <UrqlProvider>
           <DynamicProvider>
             <LogRocketProvider>
               <QueryClientProvider>
-                <WagmiProvider>
-                  <ThemeProvider forcedTheme={forcedTheme}>
-                    <ToastProvider>
-                      <PHProvider>
-                        <SessionProvider>
-                          <UploadProvider>
-                            <PHProvider>
-                              <FeedbackModalProvider>
-                                {children}
-                              </FeedbackModalProvider>
-                            </PHProvider>
-                          </UploadProvider>
-                        </SessionProvider>
-                      </PHProvider>
-                    </ToastProvider>
-                  </ThemeProvider>
-                </WagmiProvider>
+                <SessionProvider>
+                  <WagmiProvider>
+                    <ThemeProvider forcedTheme={forcedTheme}>
+                      <UploadProvider>
+                        <FeedbackModalProvider>
+                          {children}
+                        </FeedbackModalProvider>
+                      </UploadProvider>
+                    </ThemeProvider>
+                  </WagmiProvider>
+                </SessionProvider>
               </QueryClientProvider>
             </LogRocketProvider>
           </DynamicProvider>
-        </LaunchDarklyProvider>
-      </UrqlProvider>
-    </CookiesProvider>
+        </UrqlProvider>
+      </CookiesProvider>
+    </ToastProvider>
   );
 };
diff --git a/src/providers/SessionProvider.tsx b/src/providers/SessionProvider.tsx
index 260077b1..fc9d943d 100644
--- a/src/providers/SessionProvider.tsx
+++ b/src/providers/SessionProvider.tsx
@@ -43,6 +43,14 @@ const InnerProvider: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
   const project = useProjectContext();
   const cookies = useCookies();
 
+  useEffect(() => {
+    console.log(`[debug] SessionProvider: 1: accessToken = ${cookies.values.accessToken}`);
+  }, [cookies.values.accessToken]);
+
+  useEffect(() => {
+    console.log(`[debug] SessionProvider: 1: authProvidertoken = ${cookies.values.authProviderToken}`)
+  }, [cookies.values.authProviderToken]);
+
   const loading = useMemo(
     () =>
       auth.loading || project.loading || permissions.loading || billing.loading,
diff --git a/src/providers/UrqlProvider.tsx b/src/providers/UrqlProvider.tsx
index 1c5e120b..3d18081f 100644
--- a/src/providers/UrqlProvider.tsx
+++ b/src/providers/UrqlProvider.tsx
@@ -9,6 +9,8 @@ export const UrqlProvider: React.FC<React.PropsWithChildren<{}>> = ({
 }) => {
   const cookies = useCookies();
 
+  console.log(`[debug] UrqlProvider: cookies.values.accessToken = ${cookies.values.accessToken}`);
+
   const urqlClient = useMemo(
     () =>
       createUrqlClient({