From 8c5b0496da668ea3d240d53dd9c44f2ad494a943 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Mon, 22 Apr 2024 19:46:45 +0800
Subject: [PATCH] Refactor authentication listener to be a hook

The previous authentication listener component was transformed into a `useAuthChangeListener` hook. All relevant functionality was preserved in this transition. The purpose of this change was to improve flexibility and code reusability by enabling the auth listener to be integrated in various parts of the application as needed. The old component was also removed from the exported packages in the `package.json`.
---
 apps/web/components/root-providers.tsx        | 15 ++++--
 packages/shared/src/logger/impl/pino.ts       |  5 ++
 packages/supabase/package.json                |  1 -
 .../use-auth-change-listener.ts}              | 50 ++++++-------------
 4 files changed, 32 insertions(+), 39 deletions(-)
 rename packages/supabase/src/{components/auth-change-listener.tsx => hooks/use-auth-change-listener.ts} (68%)

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>
-  );
 }
 
 /**