Nwe OAuth Protocol

- 커스텀 헤더(X-CLab-Auth)를 통해 데이터를 반환 받도록 로직 변경
- 반환 받은 데이터는 역직렬화 후 핸들링하도록 수정

apps/auth/app/api/auth.ts

@@ -1,45 +1,60 @@
-import { ServerResponse } from '@type/server';
-import { END_POINTS } from '../constants/api';
-import { server } from './server';
+import { API_BASE_URL, END_POINTS } from '../constants/api';
 
 interface PostLoginBody {
   [key: string]: string;
   id: string;
   password: string;
 }
 
-interface PostLoginResponse extends ServerResponse {
-  data: string | null;
-}
-
-interface PostTwoFactorLoginResponse extends ServerResponse {
-  data: {
-    accessToken: string;
-    refreshToken: string;
-  };
-}
-
 interface PostTwoFactorLoginBody {
   [key: string]: string;
   memberId: string;
   totp: string;
 }
 
 export const postLogin = async (body: PostLoginBody) => {
-  const response = await server.post<PostLoginBody, PostLoginResponse>({
-    url: END_POINTS.LOGIN,
-    body,
+  const url = API_BASE_URL + END_POINTS.LOGIN;
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(body),
   });
 
+  if (!response.ok) {
+    throw new Error('Network response was not ok');
+  }
+
+  const authHeader = response.headers.get('X-Clab-Auth');
+  const responseBody = await response.json();
+
   return {
-    ...response,
+    success: responseBody.success,
+    authHeader: authHeader,
     id: body.id,
   };
 };
 
 export const postTwoFactorLogin = async (body: PostTwoFactorLoginBody) => {
-  return await server.post<PostTwoFactorLoginBody, PostTwoFactorLoginResponse>({
-    url: END_POINTS.TWO_FACTOR_LOGIN,
-    body,
+  const url = API_BASE_URL + END_POINTS.TWO_FACTOR_LOGIN;
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(body),
   });
+
+  if (!response.ok) {
+    throw new Error('Network response was not ok');
+  }
+
+  const authHeader = response.headers.get('X-Clab-Auth');
+  const responseBody = await response.json();
+
+  return {
+    success: responseBody.success,
+    authHeader: authHeader,
+  };
 };

apps/auth/app/constants/api.ts

@@ -1,3 +1,5 @@
+export const API_BASE_URL = 'https://api.clab.page';
+
 export const END_POINTS = {
   LOGIN: '/login',
   TWO_FACTOR_LOGIN: '/login/authenticator',

apps/auth/app/hooks/queries/useLoginMutation.ts

@@ -12,20 +12,23 @@ export const useLoginMutation = () => {
 
   const logInMutation = useMutation({
     mutationFn: postLogin,
-    onSuccess: ({ success, data, id }) => {
-      if (success && data === null) {
+    onSuccess: ({ success, authHeader, id }) => {
+      if (!authHeader) return;
+
+      const parsedAuthHeader = JSON.parse(authHeader);
+      if (success && parsedAuthHeader.secretKey === null) {
         // 최초 로그인이 아닐 경우, Two Factor 인증으로 넘어감
         setAuth({
           step: AUTH_ATOM_STATE.TWO_FACTOR,
           id,
           secretKey: '',
         });
-      } else if (success && data) {
+      } else if (success && parsedAuthHeader.secretKey !== null) {
         // 최초 로그인, secretKey를 저장합니다
         setAuth({
           step: AUTH_ATOM_STATE.FIRST_LOGIN,
           id,
-          secretKey: data,
+          secretKey: parsedAuthHeader.secretKey,
         });
       }
     },

apps/auth/app/hooks/queries/useTwoFactorLoginMutation.ts

@@ -10,8 +10,11 @@ export const useTwoFactorLoginMutation = () => {
 
   const twoFactorLoginMutation = useMutation({
     mutationFn: postTwoFactorLogin,
-    onSuccess: ({ success, data }) => {
-      const { accessToken, refreshToken } = data;
+    onSuccess: ({ success, authHeader }) => {
+      if (!authHeader) return;
+
+      const parsedAuthHeader = JSON.parse(authHeader);
+      const { accessToken, refreshToken } = parsedAuthHeader;
 
       if (!code || !success) {
         alert(ERROR_MESSAGE.AUTH);
@@ -21,7 +24,9 @@ export const useTwoFactorLoginMutation = () => {
       if (accessToken && refreshToken) {
         // 로그인 성공, 서비스로 리다이렉트 합니다
         alert(SUCCESS_MESSAGE.AUTH);
-        window.location.href = `${REDIRECT(code)}/?a=${accessToken}&r=${refreshToken}`;
+        window.location.href = `${REDIRECT(
+          code,
+        )}/?a=${accessToken}&r=${refreshToken}`;
       } else {
         alert(ERROR_MESSAGE.AUTH);
       }