fix: refactor direct SWR calls to useAuth to prevent 401 loops

src/app/dashboard/settings/SettingsClient.tsx

@@ -44,12 +44,14 @@ import PageLoader from "@/components/ui/PageLoader";
 import { useTranslations } from "next-intl";
 import { useI18n } from "@/components/providers/I18nProvider";
 
+import { useAuth } from "@/hooks/useAuth";
+
 const fetcher = (url: string) => axios.get(url).then((res) => res.data);
 
 export default function SettingsClient() {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const { data: user, mutate: mutateUser } = useSWR("/api/user", fetcher);
+  const { user, mutate: mutateUser } = useAuth();
   const { data: loginHistory, isLoading: historyLoading } = useSWR("/api/profile/login-history", fetcher);
   const { data: sessions, isLoading: sessionsLoading } = useSWR("/api/profile/sessions", fetcher);
   const { data: apiKeys } = useSWR("/api/api-keys", fetcher);

src/components/providers/I18nProvider.tsx

@@ -2,7 +2,7 @@
 
 import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react';
 import { NextIntlClientProvider, AbstractIntlMessages } from 'next-intl';
-import useSWR from 'swr';
+import { useAuth } from '@/hooks/useAuth';
 import axios from '@/lib/axios';
 
 type Locale = 'en' | 'id';
@@ -16,7 +16,7 @@ interface I18nContextType {
 const I18nContext = createContext<I18nContextType | undefined>(undefined);
 
 export const I18nProvider = ({ children }: { children: ReactNode }) => {
-    const { data: user } = useSWR('/api/user', (url) => axios.get(url).then(res => res.data));
+    const { user } = useAuth();
     const [locale, setLocaleState] = useState<Locale>('en');
     const [messages, setMessages] = useState<AbstractIntlMessages | null>(null);
     const [isLoading, setIsLoading] = useState(true);

src/components/user-profile/UserMetaCard.tsx

@@ -13,11 +13,12 @@ import Label from "../form/Label";
 import Image from "next/image";
 import { getUserAvatar } from "@/lib/utils";
 import { useTranslations } from "next-intl";
+import { useAuth } from "@/hooks/useAuth";
 
 const fetcher = (url: string) => axios.get(url).then((res) => res.data);
 
 export default function UserMetaCard() {
-  const { data: user, isLoading: userLoading } = useSWR("/api/user", fetcher);
+  const { user, isLoading: userLoading } = useAuth();
   const { isOpen, openModal, closeModal } = useModal();
   const { addToast } = useToast();
   const t = useTranslations("Profile");

src/hooks/useAuth.ts

@@ -6,7 +6,7 @@ import { useRouter } from 'next/navigation';
 export const useAuth = ({ middleware, redirectIfAuthenticated }: { middleware?: string, redirectIfAuthenticated?: string } = {}) => {
     const router = useRouter();
 
-    const { data: user, error, mutate } = useSWR('/api/user', () =>
+    const { data: user, error, mutate, isLoading } = useSWR('/api/user', () =>
         axios
             .get('/api/user')
             .then(res => res.data)
@@ -130,6 +130,8 @@ export const useAuth = ({ middleware, redirectIfAuthenticated }: { middleware?:
 
     return {
         user,
+        isLoading,
+        error,
         mutate,
         register,
         login,