From 377994c56cbbee27ffc3d50a5207c5c95f188a58 Mon Sep 17 00:00:00 2001
From: dyzulk <66510723+dyzulk@users.noreply.github.com>
Date: Tue, 6 Jan 2026 03:11:01 +0700
Subject: [PATCH] fix: refactor direct SWR calls to useAuth to prevent 401
 loops

---
 src/app/dashboard/settings/SettingsClient.tsx | 4 +++-
 src/components/providers/I18nProvider.tsx     | 4 ++--
 src/components/user-profile/UserMetaCard.tsx  | 3 ++-
 src/hooks/useAuth.ts                          | 4 +++-
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/app/dashboard/settings/SettingsClient.tsx b/src/app/dashboard/settings/SettingsClient.tsx
index 0ce8ead..0475293 100644
--- a/src/app/dashboard/settings/SettingsClient.tsx
+++ b/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);
diff --git a/src/components/providers/I18nProvider.tsx b/src/components/providers/I18nProvider.tsx
index bd823f3..e0237da 100644
--- a/src/components/providers/I18nProvider.tsx
+++ b/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);
diff --git a/src/components/user-profile/UserMetaCard.tsx b/src/components/user-profile/UserMetaCard.tsx
index 213c9a2..4821668 100644
--- a/src/components/user-profile/UserMetaCard.tsx
+++ b/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");
diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
index 3aa466c..c52aab0 100644
--- a/src/hooks/useAuth.ts
+++ b/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,