feat: implement login with sso

package.json

@@ -14,6 +14,7 @@
     "@ant-design/icons": "^5.4.0",
     "@sentry/react": "^8.26.0",
     "antd": "^5.20.2",
+    "js-cookie": "^3.0.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.1"
@@ -22,6 +23,7 @@
     "@eslint/js": "^9.9.1",
     "@sentry/vite-plugin": "^2.22.2",
     "@types/bun": "^1.1.6",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^22.5.0",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
@@ -35,6 +37,7 @@
     "tailwindcss": "^3.4.10",
     "typescript": "^5.5.4",
     "typescript-eslint": "^8.2.0",
-    "vite": "^5.4.2"
+    "vite": "^5.4.2",
+    "vite-plugin-svgr": "^4.2.0"
   }
 }

src/api/Auth.ts

@@ -14,3 +14,16 @@ export const login = async (email: string, password: string) => {
 
   return await handleResponse(response);
 };
+
+export const logout = async () => {
+  const response = await fetch(`${API_BASE_URL}/v1/auth/logout`, {
+    method: "POST",
+    credentials: "include",
+    headers: {
+      "X-App-Type": "web",
+      "Content-Type": "application/json",
+    },
+  });
+
+  await handleResponse(response);
+};

src/contexts/AuthContext.tsx

@@ -5,14 +5,16 @@ import React, {
   useEffect,
   useCallback,
 } from "react";
-import { login as loginApi } from "@/api/Auth";
+import { login as loginApi, logout as logoutApi } from "@/api/Auth";
 import { User } from "@/types/User";
 import { me } from "@/api/User";
+import Cookies from "js-cookie";
 
 interface AuthContextType {
   isAuthenticated: boolean;
   user: User | null;
   login: (email: string, password: string) => Promise<void>;
+  loginSso: () => Promise<void>;
   logout: () => void;
   isLoading: boolean;
 }
@@ -84,15 +86,34 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     }
   }, []);
 
-  const logout = useCallback(() => {
+  const loginSso = useCallback(async () => {
+    try {
+      const data = await me();
+      setIsAuthenticated(true);
+      setUser(data);
+    } catch (error) {
+      console.error(
+        "Login failed:",
+        error instanceof Error ? error.message : "Unknown error"
+      );
+      setIsAuthenticated(false);
+      setUser(null);
+      throw error;
+    } finally {
+      Cookies.remove("useSso");
+    }
+  }, []);
+
+  const logout = useCallback(async () => {
+    await logoutApi();
     setIsAuthenticated(false);
     setUser(null);
     localStorage.removeItem("isAuthenticated");
   }, []);
 
   return (
     <AuthContext.Provider
-      value={{ isAuthenticated, user, login, logout, isLoading }}
+      value={{ isAuthenticated, user, login, loginSso, logout, isLoading }}
     >
       {children}
     </AuthContext.Provider>

src/pages/LoginPage.tsx

@@ -3,7 +3,9 @@ import { Button, Form, Input, App, Divider } from "antd";
 import { useAuth } from "@/hooks/useAuth";
 import { Navigate } from "react-router-dom";
 import { useEffect, useState } from "react";
-import { APP_NAME } from "@/configs/Constant";
+import { API_BASE_URL, APP_NAME } from "@/configs/Constant";
+import LogoBPS from "../../public/bps.svg?react";
+import Cookies from "js-cookie";
 
 interface FormLogin {
   email: string;
@@ -24,10 +26,21 @@ const LoginPage = () => {
     return () => clearInterval(interval);
   }, []);
 
+  useEffect(() => {
+    if (Cookies.get("useSso") == "true") {
+      auth.loginSso();
+    }
+  }, [auth]);
+
   if (auth.isAuthenticated) {
     return <Navigate to="/" />;
   }
 
+  const handleClickSSO = () => {
+    Cookies.set("useSso", "true", { expires: 3 / 1440 });
+    window.location.href = `${API_BASE_URL}/v1/auth/sso`;
+  };
+
   const onFinish = async (values: FormLogin) => {
     try {
       setIsLoading(true);
@@ -98,6 +111,14 @@ const LoginPage = () => {
               </Button>
             </Form.Item>
           </Form>
+          <Divider />
+          <Button
+            block
+            icon={<LogoBPS className="h-5 w-5" />}
+            onClick={handleClickSSO}
+          >
+            Masuk dengan SSO BPS
+          </Button>
         </div>
       </div>
       <div

src/vite-env.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />
 
 declare const APP_VERSION: string;

vite.config.ts

@@ -1,11 +1,13 @@
 import { sentryVitePlugin } from "@sentry/vite-plugin";
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
+import svgr from "vite-plugin-svgr";
 import path from "path";
 
 export default defineConfig({
   plugins: [
     react(),
+    svgr({ svgrOptions: { icon: true } }),
     sentryVitePlugin({
       org: process.env.SENTRY_ORG,
       project: process.env.SENTRY_PROJECT,