API

Add: - hooks/ - ios.build.device : untuk mendownload di ios Fix: - service/api.t : mengatur api - context/AuthContext.tsx: Provider untuk access token ### No Issue
2025-08-21 15:22:14 +08:00
parent 7a7bfd3ab9
commit 21c6460220
12 changed files with 380 additions and 142 deletions
--- a/app/(application)/(user)/profile/[id]/index.tsx
+++ b/app/(application)/(user)/profile/[id]/index.tsx
@@ -3,6 +3,7 @@ import AlertCustom from "@/components/Alert/AlertCustom";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import DrawerCustom from "@/components/Drawer/DrawerCustom";
 import { MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
 import { drawerItemsProfile } from "@/screens/Profile/ListPage";
 import Profile_MenuDrawerSection from "@/screens/Profile/menuDrawerSection";
 import ProfileSection from "@/screens/Profile/ProfileSection";
@@ -17,6 +18,8 @@ export default function Profile() {
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const [showLogoutAlert, setShowLogoutAlert] = useState(false);

+  const { logout } = useAuth();
+
  const openDrawer = () => {
    setIsDrawerOpen(true);
  };
@@ -65,6 +68,7 @@ export default function Profile() {
          drawerItems={drawerItemsProfile({ id: id as string })}
          setShowLogoutAlert={setShowLogoutAlert}
          setIsDrawerOpen={setIsDrawerOpen}
+          logout={logout}
        />
      </DrawerCustom>

--- a/app/(application)/(user)/waiting-room.tsx
+++ b/app/(application)/(user)/waiting-room.tsx
@@ -1,12 +1,87 @@
-import { InformationBox, ViewWrapper } from "@/components";
+import {
+  AlertDefaultSystem,
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  StackCustom,
+  ViewWrapper,
+} from "@/components";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { useAuth } from "@/hooks/use-auth";
+import { Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import Toast from "react-native-toast-message";

 export default function WaitingRoom() {
+  const { token, userData, isLoading, logout } = useAuth();
+
+  async function handleCheck() {
+    try {
+      const response = await userData(token as string);
+      console.log("response check", JSON.stringify(response, null, 2));
+      if (response.active) {
+        Toast.show({
+          type: "success",
+          text1: "Akun anda telah aktif", // text2: "Anda berhasil login",
+        });
+        router.replace("/(application)/(user)/home");
+      } else {
+        Toast.show({
+          type: "error",
+          text1: "Akun anda belum aktif",
+          text2: "Silahkan hubungi admin",
+        });
+      }
+    } catch (error) {
+      console.log("Error check", error);
+    }
+  }
+
+  const logoutButton = () => {
+    return (
+      <>
+        <BoxButtonOnFooter>
+          <ButtonCustom
+            backgroundColor="red"
+            textColor="white"
+            iconLeft={
+              <Ionicons name="log-out" size={ICON_SIZE_BUTTON} color="white" />
+            }
+            onPress={() => {
+              AlertDefaultSystem({
+                title: "Keluar",
+                message: "Apakah anda yakin ingin keluar?",
+                textLeft: "Batal",
+                textRight: "Ya",
+                onPressRight: () => {
+                  logout();
+                },
+              })
+            }}
+          >
+            Keluar
+          </ButtonCustom>
+        </BoxButtonOnFooter>
+      </>
+    );
+  };
+
  return (
    <>
-      <ViewWrapper>
-        <InformationBox
-          text="Permohonan akses Anda sedang dalam proses verifikasi oleh admin. Harap tunggu, Anda akan menerima pemberitahuan melalui Whatsapp setelah disetujui."
-        />
+      <ViewWrapper footerComponent={logoutButton()}>
+        <StackCustom>
+          <InformationBox text="Permohonan akses Anda sedang dalam proses verifikasi oleh admin. Harap tunggu, Anda akan menerima pemberitahuan melalui Whatsapp setelah disetujui." />
+          <ButtonCenteredOnly
+            isLoading={isLoading}
+            onPress={() => {
+              handleCheck();
+            }}
+            icon="refresh-ccw"
+          >
+            Check
+          </ButtonCenteredOnly>
+        </StackCustom>
      </ViewWrapper>
    </>
  );
--- a/app/(application)/admin/_layout.tsx
+++ b/app/(application)/admin/_layout.tsx
@@ -9,7 +9,12 @@ import {
 import DrawerAdmin from "@/components/Drawer/DrawerAdmin";
 import NavbarMenu from "@/components/Drawer/NavbarMenu";
 import { AccentColor, MainColor } from "@/constants/color-palet";
-import { ICON_SIZE_MEDIUM, ICON_SIZE_SMALL, ICON_SIZE_XLARGE } from "@/constants/constans-value";
+import {
+  ICON_SIZE_MEDIUM,
+  ICON_SIZE_SMALL,
+  ICON_SIZE_XLARGE,
+} from "@/constants/constans-value";
+import { useAuth } from "@/hooks/use-auth";
 import { adminListMenu } from "@/screens/Admin/listPageAdmin";
 import { GStyles } from "@/styles/global-styles";
 import { FontAwesome6, Ionicons } from "@expo/vector-icons";
@@ -19,6 +24,9 @@ import { useState } from "react";
 export default function AdminLayout() {
  const [openDrawerNavbar, setOpenDrawerNavbar] = useState(false);
  const [openDrawerUser, setOpenDrawerUser] = useState(false);
+
+  const { logout } = useAuth();
+
  return (
    <>
      <Stack
@@ -74,32 +82,32 @@ export default function AdminLayout() {
        <Stack.Screen name="collaboration/publish" />
        <Stack.Screen name="collaboration/group" />
        <Stack.Screen name="collaboration/reject" />
-        <Stack.Screen name="collaboration/[id]/[status]"/>
-        <Stack.Screen name="collaboration/[id]/group"/>
+        <Stack.Screen name="collaboration/[id]/[status]" />
+        <Stack.Screen name="collaboration/[id]/group" />
        {/* ================== Collaboration End ================== */}

        {/* ================== Forum Start ================== */}
        <Stack.Screen name="forum/index" />
        <Stack.Screen name="forum/[id]/index" />
-        <Stack.Screen name="forum/report-comment"/>
-        <Stack.Screen name="forum/report-posting"/>
+        <Stack.Screen name="forum/report-comment" />
+        <Stack.Screen name="forum/report-posting" />
        <Stack.Screen name="forum/[id]/list-report-posting" />
-        <Stack.Screen name="forum/[id]/list-report-comment"/>
+        <Stack.Screen name="forum/[id]/list-report-comment" />
        {/* ================== Forum End ================== */}

        {/* ================== Voting Start ================== */}
        <Stack.Screen name="voting/index" />
        <Stack.Screen name="voting/[status]/status" />
        <Stack.Screen name="voting/[id]/[status]/index" />
-        <Stack.Screen name="voting/[id]/reject-input"/>
+        <Stack.Screen name="voting/[id]/reject-input" />
        {/* ================== Voting End ================== */}

        {/* ================== Event Start ================== */}
        <Stack.Screen name="event/index" />
        <Stack.Screen name="event/[status]/status" />
-        <Stack.Screen name="event/type-of-event"/>
-        <Stack.Screen name="event/type-create"/>
-        <Stack.Screen name="event/type-update"/>
+        <Stack.Screen name="event/type-of-event" />
+        <Stack.Screen name="event/type-create" />
+        <Stack.Screen name="event/type-update" />
        {/* <Stack.Screen name="event/[id]/[status]/index" />
        <Stack.Screen name="event/[id]/reject-input"/> */}
        {/* ================== Event End ================== */}
@@ -223,7 +231,7 @@ export default function AdminLayout() {
                  textLeft: "Batal",
                  textRight: "Keluar",
                  onPressRight: () => {
-                    router.replace("/");
+                    logout();
                  },
                });
              }
--- a/components/Button/ButtonCenteredOnly.tsx
+++ b/components/Button/ButtonCenteredOnly.tsx
@@ -9,17 +9,24 @@ interface ButtonCenteredOnlyProps {
  children?: React.ReactNode;
  icon?: "plus" | "upload" | string;
  onPress: () => void;
+  isLoading?: boolean;
 }
 export default function ButtonCenteredOnly({
  onPress,
  children,
-  icon = "plus"
+  icon = "plus",
+  isLoading = false,
 }: ButtonCenteredOnlyProps) {
  return (
    <ButtonCustom
+      isLoading={isLoading}
      onPress={onPress}
      iconLeft={
-        <Feather name={icon as any} size={ICON_SIZE_BUTTON} color={MainColor.black} />
+        <Feather
+          name={icon as any}
+          size={ICON_SIZE_BUTTON}
+          color={MainColor.black}
+        />
      }
      style={[GStyles.buttonCentered50Percent]}
    >
--- a/context/AuthContext.tsx
+++ b/context/AuthContext.tsx
@@ -1,8 +1,14 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+  apiClient,
+  apiLogin,
+  apiRegister,
+  apiValidationCode,
+} from "@/service/api";
 import { IUser } from "@/types/User";
-import { createContext, useEffect, useState } from "react";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { apiClient, apiLogin } from "@/service/api";
+import { router } from "expo-router";
+import { createContext, useEffect, useState } from "react";
+import Toast from "react-native-toast-message";

 // --- Types ---
 type AuthContextType = {
@@ -13,12 +19,13 @@ type AuthContextType = {
  isAdmin: boolean;
  isUserActive: boolean;
  loginWithNomor: (nomor: string) => Promise<void>;
-  // validateOtp: (nomor: string, otp: string) => Promise<void>;
-  // logout: () => Promise<void>;
-  // registerUser: (userData: {
-  //   username: string;
-  //   nomor: string;
-  // }) => Promise<void>;
+  validateOtp: (nomor: string) => Promise<any>;
+  logout: () => Promise<void>;
+  registerUser: (userData: {
+    username: string;
+    nomor: string;
+  }) => Promise<void>;
+  userData: (token: string) => Promise<any>;
 };

 // --- Create Context ---
@@ -32,7 +39,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
  const [isLoading, setIsLoading] = useState<boolean>(true);

  const isAuthenticated = !!user;
-  const isAdmin = user?.MasterUserRole?.name === "Admin";
+  const isAdmin = user?.masterUserRoleId !== "1";
  const isUserActive = user?.active === true;

  // --- Load session from AsyncStorage on app start ---
@@ -42,6 +49,10 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
        const storedToken = await AsyncStorage.getItem("authToken");
        const storedUser = await AsyncStorage.getItem("userData");

+        if (storedToken) {
+          setToken(storedToken);
+        }
+
        if (storedToken && storedUser) {
          setToken(storedToken);
          setUser(JSON.parse(storedUser));
@@ -61,7 +72,8 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
    setIsLoading(true);
    try {
      const response = await apiLogin({ nomor: nomor });
-      console.log("Response provider login", response);
+      console.log("Success login api", JSON.stringify(response, null, 2));
+      await AsyncStorage.setItem("kode_otp", response.kodeId);
    } catch (error: any) {
      throw new Error(error.response?.data?.message || "Gagal kirim OTP");
    } finally {
@@ -69,6 +81,143 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
    }
  };

+  // --- 2. Validasi OTP & cek user ---
+  const validateOtp = async (nomor: string) => {
+    try {
+      setIsLoading(true);
+      const response = await apiValidationCode({ nomor: nomor });
+
+      const { token } = response;
+      if (response.success) {
+        setToken(token);
+        await AsyncStorage.setItem("authToken", token);
+
+        const responseUser = await apiClient.get(
+          `/mobile/user?token=${token}`,
+          {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          }
+        );
+        const dataUser = responseUser.data.data;
+        console.log("res validasi user :", JSON.stringify(dataUser, null, 2));
+
+        setUser(dataUser);
+        await AsyncStorage.setItem("userData", JSON.stringify(dataUser));
+
+        if (response.active) {
+          if (response.roleId === "1") {
+            return "/(application)/(user)/home";
+          } else {
+            return "/(application)/admin/dashboard";
+          }
+        } else {
+          return "/(application)/(user)/waiting-room";
+        }
+      } else {
+        Toast.show({
+          type: "info",
+          text1: "Anda belum terdaftar",
+          text2: "Silahkan daftar terlebih dahulu",
+        });
+        return `/register?nomor=${nomor}`;
+      }
+    } catch (error: any) {
+      console.log("Error validasi otp >>", (error as Error).message || error);
+      throw new Error(
+        error.response?.data?.message || "OTP salah atau user tidak ditemukan"
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // --- 3. Ambil data user ---
+  const userData = async (token: string) => {
+    try {
+      setIsLoading(true);
+      const response = await apiClient.get(`/mobile/user?token=${token}`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      const dataUser = response.data.data;
+      console.log("res validasi user :", JSON.stringify(dataUser, null, 2));
+
+      setUser(dataUser);
+      await AsyncStorage.setItem("userData", JSON.stringify(dataUser));
+      return dataUser;
+    } catch (error: any) {
+      throw new Error(
+        error.response?.data?.message || "Gagal mengambil data user"
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // --- 4. Register jika user belum ada ---
+  const registerUser = async (userData: {
+    username: string;
+    nomor: string;
+  }) => {
+    setIsLoading(true);
+    try {
+      const response = await apiRegister({ data: userData });
+      console.log("Success register api", JSON.stringify(response, null, 2));
+
+      const { token } = response;
+      if (!response.success) {
+        Toast.show({
+          type: "info",
+          text1: "Info",
+          text2: response.message,
+        });
+
+        return;
+      }
+
+      setToken(token);
+      await AsyncStorage.setItem("authToken", token);
+      Toast.show({
+        type: "success",
+        text1: "Sukses",
+        text2: "Anda berhasil terdaftar",
+      });
+      router.replace("/(application)/(user)/waiting-room");
+      return;
+    } catch (error: any) {
+      console.log("Error register", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // --- 5. Logout ---
+  const logout = async () => {
+    try {
+      setIsLoading(true);
+      setToken(null);
+      setUser(null);
+      await AsyncStorage.removeItem("authToken");
+      await AsyncStorage.removeItem("userData");
+      setIsLoading(false);
+
+      Toast.show({
+        type: "success",
+        text1: "Logout berhasil",
+        text2: "Anda berhasil keluar dari akun.",
+      });
+      router.replace("/");
+    } catch (error) {
+      console.log("Logout error (optional):", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
  return (
    <>
      <AuthContext.Provider
@@ -80,9 +229,10 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
          isAdmin,
          isUserActive,
          loginWithNomor,
-          // validateOtp,
-          // logout,
-          // registerUser,
+          validateOtp,
+          logout,
+          registerUser,
+          userData,
        }}
      >
        {children}
--- a/hooks/use-auth.ts
+++ b/hooks/use-auth.ts
--- a/ios.build.device
+++ b/ios.build.device
@@ -0,0 +1 @@
+npx expo run:ios --device
--- a/screens/Authentication/LoginView.tsx
+++ b/screens/Authentication/LoginView.tsx
@@ -2,10 +2,10 @@ import ButtonCustom from "@/components/Button/ButtonCustom";
 import Spacing from "@/components/_ShareComponent/Spacing";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { MainColor } from "@/constants/color-palet";
-import { useAuth } from "@/hook/use-auth";
-import { apiVersion } from "@/service/api";
+import { useAuth } from "@/hooks/use-auth";
+import { apiClient, apiVersion } from "@/service/api";
 import { GStyles } from "@/styles/global-styles";
-import { router } from "expo-router";
+import { Redirect, router } from "expo-router";
 import { useEffect, useState } from "react";
 import { Text, View } from "react-native";
 import PhoneInput, { ICountry } from "react-native-international-phone-number";
@@ -17,16 +17,25 @@ export default function LoginView() {
  const [inputValue, setInputValue] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(false);

-  const { loginWithNomor } = useAuth();
+  const { loginWithNomor, token, isAdmin, isUserActive } = useAuth();
+
+  // console.log("Token state:", token ? "AVAILABLE" : "NOT AVAILABLE");
+  // console.log("isAdmin state:", isAdmin);
+  // console.log("isUserActive state:", isUserActive);
+  // console.log("isAuthenticated state:", isAuthenticated);

  useEffect(() => {
    onLoadVersion();
  }, []);

  async function onLoadVersion() {
+    // const token = await AsyncStorage.getItem("authToken");
+    // console.log("Token Version:", token);
    const res = await apiVersion();
-    console.log("Version", res.data);
    setVersion(res.data);
+
+    const seasonKey = await apiClient.get("/mobile/season-key");
+    console.log("seasonKey", seasonKey.data);
  }

  function handleInputValue(phoneNumber: string) {
@@ -94,6 +103,18 @@ export default function LoginView() {
    }
  }

+  if (token && !isUserActive) {
+    return <Redirect href={"/(application)/(user)/waiting-room"} />;
+  }
+
+  if (token && !isAdmin) {
+    return <Redirect href={"/(application)/(user)/home"} />;
+  }
+
+  if (token && isAdmin) {
+    return <Redirect href={"/(application)/admin/dashboard"} />;
+  }
+
  return (
    <ViewWrapper withBackground>
      <View style={GStyles.authContainer}>
--- a/screens/Authentication/RegisterView.tsx
+++ b/screens/Authentication/RegisterView.tsx
@@ -3,18 +3,20 @@ import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import ButtonCustom from "@/components/Button/ButtonCustom";
 import TextInputCustom from "@/components/TextInput/TextInputCustom";
 import { MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
 import { GStyles } from "@/styles/global-styles";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
-import { router, useLocalSearchParams } from "expo-router";
-import { Text, View } from "react-native";
+import { useLocalSearchParams } from "expo-router";
 import { useState } from "react";
-import { apiRegister } from "@/service/api";
+import { Text, View } from "react-native";
 import Toast from "react-native-toast-message";

 export default function RegisterView() {
  const { nomor } = useLocalSearchParams();
  const [username, setUsername] = useState("");
-  const [loading, setLoading] = useState(false);
+  // const [loading, setLoading] = useState(false);
+
+  const { registerUser, isLoading } = useAuth();

  const validasiData = () => {
    if (!nomor) {
@@ -39,35 +41,13 @@ export default function RegisterView() {
  async function handleRegister() {
    const isValid = validasiData();
    if (!isValid) return;
-    const data = {
+
+    const response = await registerUser({
      nomor: nomor as string,
      username: username,
-    };
+    });

-    try {
-      setLoading(true);
-      const response = await apiRegister({ data });
-      console.log("Success register", JSON.stringify(response, null, 2));
-
-      if (response.success) {
-        Toast.show({
-          type: "success",
-          text1: "Sukses",
-          text2: "Anda berhasil terdaftar",
-        });
-        router.replace("/(application)/(user)/waiting-room");
-      }
-
-      Toast.show({
-        type: "info",
-        text1: "Info",
-        text2: response.message,
-      });
-    } catch (error: any) {
-      console.log("Error register", error);
-    } finally {
-      setLoading(false);
-    }
+    console.log("Success register page", JSON.stringify(response, null, 2));
  }

  return (
@@ -97,7 +77,7 @@ export default function RegisterView() {
              onChangeText={(text) => setUsername(text)}
            />

-            <ButtonCustom isLoading={loading} onPress={handleRegister}>
+            <ButtonCustom isLoading={isLoading} onPress={handleRegister}>
              Daftar
            </ButtonCustom>
          </View>
--- a/screens/Authentication/VerificationView.tsx
+++ b/screens/Authentication/VerificationView.tsx
@@ -2,8 +2,10 @@ import Spacing from "@/components/_ShareComponent/Spacing";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import ButtonCustom from "@/components/Button/ButtonCustom";
 import { MainColor } from "@/constants/color-palet";
-import { apiCheckCodeOtp, apiValidationCode } from "@/service/api";
+import { useAuth } from "@/hooks/use-auth";
+import { apiCheckCodeOtp } from "@/service/api";
 import { GStyles } from "@/styles/global-styles";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { Text, View } from "react-native";
@@ -11,21 +13,23 @@ import { OtpInput } from "react-native-otp-entry";
 import Toast from "react-native-toast-message";

 export default function VerificationView() {
-  const { kodeId, nomor } = useLocalSearchParams();
-  console.log("nomor", nomor);
+  const { nomor } = useLocalSearchParams();

  const [codeOtp, setCodeOtp] = useState<string>("");
  const [inputOtp, setInputOtp] = useState<string>("");
  const [userNumber, setUserNumber] = useState<string>("");
-  const [loading, setLoading] = useState<boolean>(false);
+
+  // --- Context ---
+  const { validateOtp, isLoading } = useAuth();

  useEffect(() => {
-    onLoadCheckCodeOtp(kodeId as string);
-  }, [kodeId]);
+    onLoadCheckCodeOtp();
+  }, []);

-  async function onLoadCheckCodeOtp(kodeId: string) {
-    const response = await apiCheckCodeOtp({ kodeId: kodeId });
-    console.log("response ", JSON.stringify(response, null, 2));
+  async function onLoadCheckCodeOtp() {
+    const kodeId = await AsyncStorage.getItem("kode_otp");
+    const response = await apiCheckCodeOtp({ kodeId: kodeId as string });
+    console.log("response kode otp :", JSON.stringify(response.otp, null, 2));
    setCodeOtp(response.otp);
    setUserNumber(response.nomor);
  }
@@ -34,41 +38,41 @@ export default function VerificationView() {
    const codeOtpNumber = parseInt(codeOtp);
    const inputOtpNumber = parseInt(inputOtp);

-    console.log("codeOtpNumber ", codeOtpNumber, typeof codeOtpNumber);
-    console.log("inputOtpNumber ", inputOtpNumber, typeof inputOtpNumber);
-
    if (inputOtpNumber !== codeOtpNumber) {
      Toast.show({
        type: "error",
-        text1: "Gagal",
-        text2: "Kode OTP tidak sesuai",
+        text1: "Kode OTP tidak sesuai",
      });

      return;
    }

    try {
-      setLoading(true);
-      const response = await apiValidationCode({ nomor: userNumber });
-      console.log("response ", JSON.stringify(response, null, 2));
+      const response = await validateOtp(nomor as string);
+      return router.replace(response);

-      if (response.success) {
-        if (response.active) {
-          if (response.roleId === "1") {
-            router.replace("/(application)/(user)/home");
-          } else {
-            router.replace("/(application)/admin/dashboard");
-          }
-        } else {
-          router.replace("/(application)/(user)/waiting-room");
-        }
-      } else {
-        router.replace(`/register?nomor=${userNumber}`);
-      }
+      // if (response.success) {
+      //   await userData(response.token);
+
+      //   if (response.active) {
+      //     if (response.roleId === "1") {
+      //       return "/(application)/(user)/home";
+      //     } else {
+      //       return "/(application)/admin/dashboard";
+      //     }
+      //   } else {
+      //     return "/(application)/(user)/waiting-room";
+      //   }
+      // } else {
+      //   Toast.show({
+      //     type: "info",
+      //     text1: "Anda belum terdaftar",
+      //     text2: "Silahkan daftar terlebih dahulu",
+      //   });
+      //   return `/register?nomor=${nomor}`;
+      // }
    } catch (error) {
      console.log("Error verification", error);
-    } finally {
-      setLoading(false);
    }
  };

@@ -114,7 +118,7 @@ export default function VerificationView() {
          </View>

          <ButtonCustom
-            isLoading={loading}
+            isLoading={isLoading}
            disabled={codeOtp === ""}
            backgroundColor={MainColor.yellow}
            textColor={MainColor.black}
--- a/screens/Profile/menuDrawerSection.tsx
+++ b/screens/Profile/menuDrawerSection.tsx
@@ -1,3 +1,4 @@
+import { AlertDefaultSystem } from "@/components";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import MenuDrawerDynamicGrid from "@/components/Drawer/MenuDrawerDynamicGird";
 import { router } from "expo-router";
@@ -6,15 +7,28 @@ export default function Profile_MenuDrawerSection({
  drawerItems,
  setShowLogoutAlert,
  setIsDrawerOpen,
+  logout,
 }: {
  drawerItems: IMenuDrawerItem[];
  setShowLogoutAlert: (value: boolean) => void;
  setIsDrawerOpen: (value: boolean) => void;
+  logout: () => Promise<void>;
 }) {
  const handlePress = (item: IMenuDrawerItem) => {
    if (item.label === "Keluar") {
      //   console.log("Logout clicked");
-      setShowLogoutAlert(true);
+      // setShowLogoutAlert(true);
+      AlertDefaultSystem({
+        title: "Apakah anda yakin ingin keluar?",
+        message: "Anda akan keluar dari akun ini",
+        textLeft: "Batal",
+        textRight: "Keluar",
+        onPressRight: () => {
+          logout();
+          setIsDrawerOpen(false);
+        },
+        onPressLeft: () => setIsDrawerOpen(false),
+      });
    } else {
      console.log("PATH >> ", item.path);
      router.push(item.path as any);
--- a/service/api.ts
+++ b/service/api.ts
@@ -3,55 +3,29 @@ import axios, { AxiosInstance } from "axios";
 import Constants from "expo-constants";
 const API_BASE_URL = Constants.expoConfig?.extra?.API_BASE_URL;

-// const API_BASE_URL = process.env.API_BASE_URL
-
 export const apiClient: AxiosInstance = axios.create({
  baseURL: API_BASE_URL,
-  timeout: 10000,
-  headers: {
-    "Content-Type": "application/json",
-  },
 });

 // Endpoint yang TIDAK butuh token
-const PUBLIC_ROUTES = [
-  // "/version",
-  "/auth/send-otp",
-  "/auth/verify-otp",
-  "/auth/register",
-  "/auth/logout", // opsional, tergantung kebutuhan
-];
-
-// apiClient.interceptors.request.use(
-//   (config) => {
-//     const token = AsyncStorage.getItem("authToken");
-//     if (token) {
-//       config.headers.Authorization = `Bearer ${token}`;
-//     }
-//     return config;
-//   },
-//   (error) => {
-//     return Promise.reject(error);
-//   }
-// );
+// const PUBLIC_ROUTES = [
+//   // "/version",
+//   "/auth/send-otp",
+//   "/auth/verify-otp",
+//   "/auth/register",
+//   "/auth/logout", // opsional, tergantung kebutuhan
+// ];

 apiClient.interceptors.request.use(
-  (config) => {
-    const token = AsyncStorage.getItem("authToken");
+  async (config) => {
+    const token = await AsyncStorage.getItem("authToken");
    if (token) {
+      // config.timeout = 10000;
+      config.headers["Content-Type"] = "application/json";
      config.headers.Authorization = `Bearer ${token}`;
    }

-    // const isPublic = PUBLIC_ROUTES.some((route) => config.url?.includes(route));
-
-    // if (!isPublic) {
-    //   const token = AsyncStorage.getItem("authToken");
-    //   if (token) {
-    //     config.headers.Authorization = `Bearer ${token}`;
-    //   } else {
-    //     console.warn(`Token tidak ditemukan untuk endpoint: ${config.url}`);
-    //   }
-    // }
+    // console.log("config", JSON.stringify(config, null, 2));
    return config;
  },
  (error) => {
@@ -60,9 +34,9 @@ apiClient.interceptors.request.use(
 );

 export async function apiVersion() {
-  console.log("API_BASE_URL", API_BASE_URL);
+  // console.log("API_BASE_URL", API_BASE_URL);
  const response = await apiClient.get("/version");
-  console.log("Response version", response.data);
+  // console.log("Response version", JSON.stringify(response.data, null, 2));
  return response.data;
 }