Migrasi autentikasi dari Bearer Token ke Sanctum Cookie-based

frontend/.env.example

@@ -1 +1,2 @@
-VITE_API_URL=http://localhost:8000/api
+VITE_API_URL=http://localhost:8000/api
+VITE_API_BASE_URL=http://localhost:8000

frontend/src/api/axiosInstance.ts

@@ -9,19 +9,11 @@ const axiosInstance = axios.create({
   withCredentials: true,
 });
 
-axiosInstance.interceptors.request.use((config) => {
-  const token = sessionStorage.getItem('__auth_token__');
-  if (token) {
-    config.headers.Authorization = `Bearer ${token}`;
-  }
-  return config;
-});
-
 axiosInstance.interceptors.response.use(
   (response) => response,
   (error: AxiosError) => {
     if (error.response?.status === 401) {
-      // Token expired / invalid — caller handles redirect
+      // Session expired — caller handles redirect
     }
     return Promise.reject(error);
   }

frontend/src/contexts/AuthContext.tsx

@@ -1,56 +1,39 @@
 import {
-    createContext,
-    useState,
-    useEffect,
-    useCallback,
-    type ReactNode,
-  } from 'react';
-  import type { AuthUser, AuthState, LoginResponseData } from '../types/auth';
-
-  interface AuthContextValue extends AuthState {
-    setAuth: (data: LoginResponseData) => void;
-    clearAuth: () => void;
-  }
-
-  export const AuthContext = createContext<AuthContextValue | null>(null);
-
-  const TOKEN_KEY = '__auth_token__';
-
-  export function AuthProvider({ children }: { children: ReactNode }) {
-    const [user, setUser] = useState<AuthUser | null>(null);
-    const [token, setToken] = useState<string | null>(
-      () => sessionStorage.getItem(TOKEN_KEY)
-    );
-
-    useEffect(() => {
-      if (token) {
-        sessionStorage.setItem(TOKEN_KEY, token);
-      } else {
-        sessionStorage.removeItem(TOKEN_KEY);
-      }
-    }, [token]);
-
-    const setAuth = useCallback((data: LoginResponseData) => {
-      setToken(data.token);
-      setUser(data.user);
-    }, []);
-
-    const clearAuth = useCallback(() => {
-      setToken(null);
-      setUser(null);
-    }, []);
-
-    return (
-      <AuthContext.Provider
-        value={{
-          user,
-          token,
-          isAuthenticated: !!token,
-          setAuth,
-          clearAuth,
-        }}
-      >
-        {children}
-      </AuthContext.Provider>
-    );
-  }
+  createContext,
+  useState,
+  useCallback,
+  type ReactNode,
+} from 'react';
+import type { AuthUser, AuthState, LoginResponseData } from '../types/auth';
+
+interface AuthContextValue extends AuthState {
+  setAuth: (data: LoginResponseData) => void;
+  clearAuth: () => void;
+}
+
+export const AuthContext = createContext<AuthContextValue | null>(null);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<AuthUser | null>(null);
+
+  const setAuth = useCallback((data: LoginResponseData) => {
+    setUser(data.user);
+  }, []);
+
+  const clearAuth = useCallback(() => {
+    setUser(null);
+  }, []);
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        isAuthenticated: !!user,
+        setAuth,
+        clearAuth,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}

frontend/src/services/authService.ts

@@ -7,10 +7,17 @@ import type {
   ApiSuccessResponse,
 } from '../types/auth';
 
+const CSRF_COOKIE_URL = `${import.meta.env.VITE_API_BASE_URL}/sanctum/csrf-cookie`;
+
+async function initCsrf(): Promise<void> {
+  await axiosInstance.get(CSRF_COOKIE_URL, { baseURL: '' });
+}
+
 export const authService = {
   async register(
     payload: RegisterPayload
   ): Promise<ApiSuccessResponse<AuthUser>> {
+    await initCsrf();
     const response = await axiosInstance.post<ApiSuccessResponse<AuthUser>>(
       '/auth/register',
       payload
@@ -21,9 +28,11 @@ export const authService = {
   async login(
     payload: LoginPayload
   ): Promise<ApiSuccessResponse<LoginResponseData>> {
-    const response = await axiosInstance.post<
-ApiSuccessResponse<LoginResponseData>
->('/auth/login', payload);
+    await initCsrf();
+    const response = await axiosInstance.post<ApiSuccessResponse<LoginResponseData>>(
+      '/auth/login',
+      payload
+    );
     return response.data;
   },
 

frontend/src/tests/pages/LoginPage.test.tsx

@@ -18,15 +18,14 @@ const mockSetAuth = vi.fn<(data: LoginResponseData) => void>();
 const mockClearAuth = vi.fn<() => void>();
 
 const mockAuthContextValue = {
-    user: null,
-    token: null,
-    isAuthenticated: false,
-    setAuth: mockSetAuth,
-    clearAuth: mockClearAuth,
-  } satisfies AuthState & {
-    setAuth: (data: LoginResponseData) => void;
-    clearAuth: () => void;
-  };
+  user: null,
+  isAuthenticated: false,
+  setAuth: mockSetAuth,
+  clearAuth: mockClearAuth,
+} satisfies AuthState & {
+  setAuth: (data: LoginResponseData) => void;
+  clearAuth: () => void;
+};
 
 function renderLoginPage() {
   return render(
@@ -39,10 +38,8 @@ function renderLoginPage() {
 }
 
 const mockLoginResponse: { message: string; data: LoginResponseData } = {
-  message: 'Login successful.',
+  message: 'Login berhasil.',
   data: {
-    token: 'test-token-123',
-    token_type: 'Bearer',
     user: {
       user_id: 10,
       email: 'ucok@example.com',
@@ -108,7 +105,9 @@ describe('LoginPage', () => {
 
     await waitFor(() => {
       expect(mockSetAuth).toHaveBeenCalledWith(mockLoginResponse.data);
-      expect(mockNavigate).toHaveBeenCalledWith('/dashboard', { replace: true });
+      expect(mockNavigate).toHaveBeenCalledWith('/dashboard', {
+        replace: true,
+      });
     });
   });
 
@@ -164,15 +163,20 @@ describe('LoginPage', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Login' }));
 
     await waitFor(() => {
-      expect(screen.getByRole('button', { name: 'Logging in...' })).toBeDisabled();
+      expect(
+        screen.getByRole('button', { name: 'Logging in...' })
+      ).toBeDisabled();
     });
   });
 
   it('renders success message passed via location state', () => {
     render(
       <MemoryRouter
         initialEntries={[
-          { pathname: '/login', state: { successMessage: 'Registrasi berhasil. Silakan login.' } },
+          {
+            pathname: '/login',
+            state: { successMessage: 'Registrasi berhasil. Silakan login.' },
+          },
         ]}
       >
         <AuthContext.Provider value={mockAuthContextValue}>

frontend/src/tests/pages/RegisterPage.test.tsx

@@ -19,7 +19,6 @@ const mockClearAuth = vi.fn<() => void>();
 
 const mockAuthContextValue = {
   user: null,
-  token: null,
   isAuthenticated: false,
   setAuth: mockSetAuth,
   clearAuth: mockClearAuth,
@@ -128,7 +127,9 @@ describe('RegisterPage', () => {
   });
 
   it('displays generic error on network failure', async () => {
-    vi.mocked(authService.register).mockRejectedValueOnce(new Error('Network Error'));
+    vi.mocked(authService.register).mockRejectedValueOnce(
+      new Error('Network Error')
+    );
 
     renderRegisterPage();
     fireEvent.click(screen.getByRole('button', { name: 'Register' }));
@@ -149,7 +150,9 @@ describe('RegisterPage', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Register' }));
 
     await waitFor(() => {
-      expect(screen.getByRole('button', { name: 'Register...' })).toBeDisabled();
+      expect(
+        screen.getByRole('button', { name: 'Register...' })
+      ).toBeDisabled();
     });
   });
 });

frontend/src/types/auth.ts

@@ -1,54 +1,50 @@
 export interface PatientProfile {
-    patient_id: number;
-    name: string;
-    phone: string;
-    bpjs_number: string | null;
-    birth_place: string | null;
-    birth_date: string | null;
-    gender: string | null;
-  }
-
-  export type UserRole = 'patient' | 'doctor' | 'nurse' | 'admin';
-
-  export interface AuthUser {
-    user_id: number;
-    email: string;
-    role: UserRole;
-    status: string;
-    profile: PatientProfile;
-  }
-
-  export interface AuthState {
-    user: AuthUser | null;
-    token: string | null;
-    isAuthenticated: boolean;
-  }
-
-  export interface RegisterPayload {
-    name: string;
-    email: string;
-    password: string;
-    password_confirmation: string;
-    // phone: string;
-  }
-
-  export interface LoginPayload {
-    email: string;
-    password: string;
-  }
-
-  export interface LoginResponseData {
-    token: string;
-    token_type: string;
-    user: AuthUser;
-  }
-
-  export interface ApiSuccessResponse<T> {
-    message: string;
-    data: T;
-  }
-
-  export interface ApiValidationError {
-    message: string;
-    errors: Record<string, string[]>;
-  }
+  patient_id: number;
+  name: string;
+  phone: string;
+  bpjs_number: string | null;
+  birth_place: string | null;
+  birth_date: string | null;
+  gender: string | null;
+}
+
+export type UserRole = 'patient' | 'doctor' | 'nurse' | 'admin';
+
+export interface AuthUser {
+  user_id: number;
+  email: string;
+  role: UserRole;
+  status: string;
+  profile: PatientProfile;
+}
+
+export interface AuthState {
+  user: AuthUser | null;
+  isAuthenticated: boolean;
+}
+
+export interface RegisterPayload {
+  name: string;
+  email: string;
+  password: string;
+  password_confirmation: string;
+}
+
+export interface LoginPayload {
+  email: string;
+  password: string;
+}
+
+export interface LoginResponseData {
+  user: AuthUser;
+}
+
+export interface ApiSuccessResponse<T> {
+  message: string;
+  data: T;
+}
+
+export interface ApiValidationError {
+  message: string;
+  errors: Record<string, string[]>;
+}