fix: handle proper authentication

src/app/[locale]/(dashboard)/layout.tsx

@@ -1,22 +1,12 @@
 'use client';
 
 import { Spinner } from '@heroui/react';
-import { useEffect } from 'react';
 
-import { ROUTES } from '@/config/routes';
 import { Sidebar } from '@/features/side-bar/sidebar';
-import { useRouter } from '@/i18n/navigation';
 import { useAuth } from '@/stores/auth-context/use-auth';
 
 export default function DashboardLayout({ children, welcome }: LayoutProps<'/[locale]'>) {
   const { user, loading } = useAuth();
-  const router = useRouter();
-
-  useEffect(() => {
-    if (!loading && !user) {
-      router.push(ROUTES.LOGIN);
-    }
-  }, [user, loading, router]);
 
   if (loading) {
     return (

src/app/actions/auth.ts

@@ -24,14 +24,17 @@ export async function signUp(formData: FormData) {
 
   const data = createCredentials(formData);
 
-  const { error } = await supabase.auth.signUp(data);
+  const { data: authData, error } = await supabase.auth.signUp(data);
 
   if (error) {
     redirect({ href: '/sign-up?error=' + encodeURIComponent(error.message), locale });
   }
 
-  revalidatePath('/', 'layout');
-  redirect({ href: '/', locale });
+  if (authData.user) {
+    revalidatePath('/', 'layout');
+    revalidatePath('/', 'page');
+    redirect({ href: '/', locale });
+  }
 }
 
 export async function signIn(formData: FormData) {
@@ -40,21 +43,15 @@ export async function signIn(formData: FormData) {
 
   const data = createCredentials(formData);
 
-  const { error } = await supabase.auth.signInWithPassword(data);
+  const { data: authData, error } = await supabase.auth.signInWithPassword(data);
 
   if (error) {
     redirect({ href: '/login?error=' + encodeURIComponent(error.message), locale });
   }
 
-  revalidatePath('/', 'layout');
-  redirect({ href: '/', locale });
-}
-
-export async function signOut() {
-  const supabase = await createClient();
-  const locale = await getLocale();
-
-  await supabase.auth.signOut();
-  revalidatePath('/', 'layout');
-  redirect({ href: '/login', locale });
+  if (authData.session) {
+    revalidatePath('/', 'layout');
+    revalidatePath('/', 'page');
+    redirect({ href: '/', locale });
+  }
 }

src/components/header/ui/header-nav.tsx

@@ -2,11 +2,11 @@ import { NavbarContent, NavbarItem, NavbarMenu, NavbarMenuItem, NavbarMenuToggle
 import { Button, cn } from '@heroui/react';
 import { useTranslations } from 'next-intl';
 
-import { signOut } from '@/app/actions/auth';
 import { HeaderLink } from '@/components/header/ui/header-link';
 import { LangToggle } from '@/components/header/ui/lang-toggle';
 import { ROUTES } from '@/config/routes';
 import { useAuth } from '@/stores/auth-context/use-auth';
+import { clientLogout } from '@/utils/auth/client-logout';
 
 const navLinks = {
   base: [{ href: ROUTES.MAIN, key: 'home' }],
@@ -46,7 +46,7 @@ export function HeaderNav({ isMenuOpen, checkIsActive }: HeaderNavProps) {
         {user && (
           <Button
             onPress={() => {
-              void signOut();
+              void clientLogout();
             }}
             variant="flat"
             className={cn('text-foreground-700 hidden sm:flex', isMobile && 'flex p-6')}

src/features/auth-form/components/auth-form.tsx

@@ -47,7 +47,7 @@ export const AuthForm = ({ heading, secondaryAction }: Props) => {
   });
   const t = useTranslations('AuthForm');
 
-  const isSignUp = heading === 'Sign up';
+  const isSignUp = secondaryAction.link.includes('login');
   const action = isSignUp ? signUp : signIn;
 
   const passwordValue = watch(PASSWORD_NAME);

src/features/side-bar/sidebar.tsx

@@ -4,12 +4,12 @@ import { Button, cn } from '@heroui/react';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 
-import { signOut } from '@/app/actions/auth';
 import { links } from '@/features/side-bar/ui/links-list';
 import { SidebarHeader } from '@/features/side-bar/ui/sidebar-header';
 import { SidebarLink } from '@/features/side-bar/ui/sidebar-link';
 import { SidebarList } from '@/features/side-bar/ui/sidebar-list';
 import { SidebarTrigger } from '@/features/side-bar/ui/sidebar-trigger';
+import { clientLogout } from '@/utils/auth/client-logout';
 
 export function Sidebar() {
   const [isOpen, setIsOpen] = useState(false);
@@ -44,7 +44,7 @@ export function Sidebar() {
         itemData={[...links]}
         renderItem={({ href, Icon, key }) => <SidebarLink href={href} Icon={Icon} title={t(`navigation.${key}`)} />}
         appendItems={[
-          <form action={signOut} key="logoutForm">
+          <form action={clientLogout} key="logoutForm">
             <Button
               type="submit"
               className="w-full group-data-[closed=true]:invisible group-data-[closed=true]:opacity-0"

src/middleware.ts

@@ -13,5 +13,5 @@ export async function middleware(request: NextRequest) {
 }
 
 export const config = {
-  matcher: ['/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)'],
+  matcher: ['/((?!api|_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)'],
 };

src/stores/auth-context/auth-provider.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 
 import type { UserData } from '@/stores/auth-context/types';
 
+import { useRouter } from '@/i18n/navigation';
 import { AuthContext } from '@/stores/auth-context/context';
 import { createClient } from '@/utils/supabase/client';
 
@@ -13,6 +14,7 @@ type AuthProviderProps = {
 };
 
 export const AuthProvider = ({ children }: AuthProviderProps) => {
+  const router = useRouter();
   const [user, setUser] = useState<UserData | undefined>();
   const [loading, setLoading] = useState(true);
 
@@ -31,22 +33,26 @@ export const AuthProvider = ({ children }: AuthProviderProps) => {
 
     const {
       data: { subscription },
-    } = supabase.auth.onAuthStateChange((_event: AuthChangeEvent, session: Session | null) => {
+    } = supabase.auth.onAuthStateChange((event: AuthChangeEvent, session: Session | null) => {
       if (session?.user.email) {
         setUser({
           id: session.user.id,
           email: session.user.email,
         });
       } else {
         setUser(undefined);
+        if (event === 'SIGNED_OUT') {
+          router.push('/');
+        }
       }
       setLoading(false);
+      router.refresh();
     });
 
     return () => {
       subscription.unsubscribe();
     };
-  }, []);
+  }, [router]);
 
   return <AuthContext value={{ user, loading }}>{children}</AuthContext>;
 };

src/utils/auth/client-logout.ts

@@ -0,0 +1,9 @@
+'use client';
+
+import { createClient } from '@/utils/supabase/client';
+
+export async function clientLogout() {
+  const supabase = createClient();
+
+  await supabase.auth.signOut();
+}