diff --git a/apps/web/components/root-providers.tsx b/apps/web/components/root-providers.tsx
index 223d83a1f..a3ae1bccd 100644
--- a/apps/web/components/root-providers.tsx
+++ b/apps/web/components/root-providers.tsx
@@ -9,7 +9,7 @@ import { ThemeProvider } from 'next-themes';
 import { CaptchaProvider } from '@kit/auth/captcha/client';
 import { I18nProvider } from '@kit/i18n/provider';
 import { MonitoringProvider } from '@kit/monitoring/components';
-import { AuthChangeListener } from '@kit/supabase/components/auth-change-listener';
+import { useAuthChangeListener } from '@kit/supabase/hooks/use-auth-change-listener';
 
 import appConfig from '~/config/app.config';
 import authConfig from '~/config/auth.config';
@@ -50,7 +50,7 @@ export function RootProviders({
             <CaptchaProvider>
               <CaptchaTokenSetter siteKey={captchaSiteKey} />
 
-              <AuthChangeListener appHomePath={pathsConfig.app.home}>
+              <AuthProvider>
                 <ThemeProvider
                   attribute="class"
                   enableSystem
@@ -60,7 +60,7 @@ export function RootProviders({
                 >
                   {children}
                 </ThemeProvider>
-              </AuthChangeListener>
+              </AuthProvider>
             </CaptchaProvider>
           </I18nProvider>
         </ReactQueryStreamedHydration>
@@ -68,3 +68,12 @@ export function RootProviders({
     </MonitoringProvider>
   );
 }
+
+// we place this below React Query since it uses the QueryClient
+function AuthProvider(props: React.PropsWithChildren) {
+  useAuthChangeListener({
+    appHomePath: pathsConfig.app.home,
+  });
+
+  return props.children;
+}
diff --git a/packages/shared/src/logger/impl/pino.ts b/packages/shared/src/logger/impl/pino.ts
index 075c2c5a0..5fec395a5 100644
--- a/packages/shared/src/logger/impl/pino.ts
+++ b/packages/shared/src/logger/impl/pino.ts
@@ -1,5 +1,9 @@
 import { pino } from 'pino';
 
+/**
+ * @name Logger
+ * @description A logger implementation using Pino
+ */
 const Logger = pino({
   browser: {
     asObject: true,
@@ -8,6 +12,7 @@ const Logger = pino({
   base: {
     env: process.env.NODE_ENV,
   },
+  errorKey: 'error',
 });
 
 export { Logger };
diff --git a/packages/supabase/package.json b/packages/supabase/package.json
index 959ba30a5..00aed0e70 100644
--- a/packages/supabase/package.json
+++ b/packages/supabase/package.json
@@ -18,7 +18,6 @@
     "./check-requires-mfa": "./src/check-requires-mfa.ts",
     "./require-user": "./src/require-user.ts",
     "./hooks/*": "./src/hooks/*.ts",
-    "./components/*": "./src/components/*.tsx",
     "./database": "./src/database.types.ts"
   },
   "devDependencies": {
diff --git a/packages/supabase/src/components/auth-change-listener.tsx b/packages/supabase/src/hooks/use-auth-change-listener.ts
similarity index 68%
rename from packages/supabase/src/components/auth-change-listener.tsx
rename to packages/supabase/src/hooks/use-auth-change-listener.ts
index 6a7e7fe90..fde562103 100644
--- a/packages/supabase/src/components/auth-change-listener.tsx
+++ b/packages/supabase/src/hooks/use-auth-change-listener.ts
@@ -4,24 +4,28 @@ import { useEffect } from 'react';
 
 import { usePathname, useRouter } from 'next/navigation';
 
-import { isBrowser } from '@supabase/ssr';
-
-import { useSupabase } from '../hooks/use-supabase';
-import {
-  useRevalidateUserSession,
-  useUserSession,
-} from '../hooks/use-user-session';
+import { useSupabase } from './use-supabase';
+import { useRevalidateUserSession, useUserSession } from './use-user-session';
 
+/**
+ * @name PRIVATE_PATH_PREFIXES
+ * @description A list of private path prefixes
+ */
 const PRIVATE_PATH_PREFIXES = ['/home', '/admin', '/join', '/update-password'];
 
-function AuthRedirectListener({
-  children,
+/**
+ * @name AuthRedirectListener
+ * @description A component that listens to auth state changes and redirects users
+ * @param privatePathPrefixes
+ * @param appHomePath
+ */
+export function useAuthChangeListener({
   privatePathPrefixes = PRIVATE_PATH_PREFIXES,
   appHomePath,
-}: React.PropsWithChildren<{
+}: {
   appHomePath: string;
   privatePathPrefixes?: string[];
-}>) {
+}) {
   const client = useSupabase();
   const pathName = usePathname();
   const router = useRouter();
@@ -63,30 +67,6 @@ function AuthRedirectListener({
     pathName,
     appHomePath,
   ]);
-
-  return <>{children}</>;
-}
-
-export function AuthChangeListener({
-  children,
-  appHomePath,
-}: React.PropsWithChildren<{
-  appHomePath: string;
-  privateRoutes?: string[];
-}>) {
-  const shouldActivateListener = isBrowser();
-
-  // we only activate the listener if
-  // we are rendering in the browser
-  if (!shouldActivateListener) {
-    return <>{children}</>;
-  }
-
-  return (
-    <AuthRedirectListener appHomePath={appHomePath}>
-      {children}
-    </AuthRedirectListener>
-  );
 }
 
 /**