로컬 스토리지에서 쿠키로 로그인 로직 변경 (#117)

* fix: gitignore 수정

* feat: 관리자 로그인 페이지 만들기

* feat: 로그인 기능 구현

* feat: guard를 통한 어드민 엔드포인트 보호

* feat: 평문 비교가 아닌 해시로 비교 하도록 변경

* feat: ProtectedRoutes로 라우트 접근 보호 컴포넌트 추가

* fix: Bearer 토큰에 관한 설정 진행

* feat: axios interceptor로 어드민 api 요청에 관한 액세스에 토큰 추가 기능 구현

* feat: 서버에서 쿠키 생성 로직 추가

* feat: admin guard에 쿠키 파싱 진행

* feat: 클라이언트에서 쿠키를 이용한 로그인 방법으로 리팩토링 진행

Author: yoonseo-han

.gitignore

@@ -18,6 +18,8 @@ server/.yarn
 
 server/music*
 
+package-lock.json
+
 # Runtime data
 pids
 *.pid

client/src/components/ProtectedRoute.tsx

@@ -1,10 +1,34 @@
 import { Navigate, useLocation } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import axios from 'axios';
 
 export function ProtectedRoute({ children }: { children: React.ReactNode }) {
-  const token = localStorage.getItem('authorization');
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
   const location = useLocation();
 
-  if (!token) {
+  useEffect(() => {
+    const checkAuth = async () => {
+      try {
+        await axios.get(
+          `${import.meta.env.VITE_API_URL}/api/admin/verify-token`,
+          {
+            withCredentials: true,
+          },
+        );
+        setIsAuthenticated(true);
+      } catch (error) {
+        setIsAuthenticated(false);
+      }
+    };
+
+    checkAuth();
+  }, []);
+
+  if (isAuthenticated === null) {
+    return <div>Loading...</div>;
+  }
+
+  if (!isAuthenticated) {
     return <Navigate to="/admin/login" state={{ from: location }} replace />;
   }
 

client/src/pages/AdminLoginPage/ui/AdminLoginPage.tsx

@@ -12,8 +12,11 @@ export function AdminLoginPage() {
     e.preventDefault();
 
     try {
-      const { data } = await axios.post('/api/admin/login', { adminKey });
-      localStorage.setItem('authorization', `Bearer ${data.token}`);
+      await axios.post(
+        `${import.meta.env.VITE_API_URL}/api/admin/login`,
+        { adminKey },
+        { withCredentials: true },
+      );
       navigate('/admin');
     } catch (error) {
       console.error('Login error:', error);

client/src/shared/api/axios.ts

@@ -1,17 +1,8 @@
 import axios from 'axios';
 
 const adminApi = axios.create({
-  baseURL: '/api',
-});
-
-adminApi.interceptors.request.use((config) => {
-  const token = localStorage.getItem('authorization');
-  if (token) {
-    config.headers.Authorization = token.startsWith('Bearer ')
-      ? token
-      : `Bearer ${token}`;
-  }
-  return config;
+  baseURL: `${import.meta.env.VITE_API_URL}/api`,
+  withCredentials: true,
 });
 
 export const albumAPI = {

server/package.json

@@ -42,6 +42,7 @@
     "cache-manager": "5.2.3",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.1",
+    "cookie-parser": "^1.4.7",
     "express": "^4.21.1",
     "fluent-ffmpeg": "^2.1.3",
     "hls-server": "^1.5.0",
@@ -65,6 +66,7 @@
     "@nestjs/testing": "^10.0.0",
     "@types/bcrypt": "^5",
     "@types/cache-manager": "^4.0.6",
+    "@types/cookie-parser": "^1.4.8",
     "@types/express": "^5.0.0",
     "@types/multer": "^1.4.12",
     "@types/node": "^22.9.0",

server/src/admin/admin.controller.ts

@@ -1,7 +1,9 @@
 import {
   Body,
   Controller,
+  Get,
   Post,
+  Res,
   UploadedFiles,
   UseGuards,
   UseInterceptors,
@@ -18,6 +20,8 @@ import { RoomService } from '@/room/room.service';
 import { AdminGuard } from './admin.guard';
 import { plainToInstance } from 'class-transformer';
 import { MissingSongFiles } from '@/common/exceptions/domain/song/missing-song-files.exception';
+import { Response } from 'express';
+import { ConfigService } from '@nestjs/config';
 
 export interface UploadedFiles {
   albumCover?: Express.Multer.File;
@@ -28,19 +32,32 @@ export interface UploadedFiles {
 @Controller('admin')
 export class AdminController {
   constructor(
+    private configService: ConfigService,
     private readonly adminService: AdminService,
     private readonly musicProcessingService: MusicProcessingSevice,
     private readonly albumRepository: AlbumRepository,
     private readonly roomService: RoomService,
   ) {}
 
   @Post('login')
-  async login(@Body() body: { adminKey: string }) {
-    return this.adminService.login(body.adminKey);
+  async login(
+    @Body() body: { adminKey: string },
+    @Res({ passthrough: true }) response: Response,
+  ) {
+    const result = await this.adminService.login(body.adminKey);
+
+    response.cookie('admin_token', result.token, {
+      httpOnly: true,
+      secure: true,
+      sameSite: 'strict',
+      maxAge: parseInt(this.configService.get('TOKEN_EXPIRATION')) * 1000,
+    });
+
+    return { message: 'Login successful' };
   }
 
   @UseGuards(AdminGuard)
-  @Post('verify-token')
+  @Get('verify-token')
   async verifyAdminToken() {
     return { valid: true };
   }

server/src/admin/admin.guard.ts

@@ -5,17 +5,15 @@ import {
   UnauthorizedException,
 } from '@nestjs/common';
 import { JwtService } from '@nestjs/jwt';
-import { Observable } from 'rxjs';
-import { Request } from 'express';
 
 @Injectable()
 export class AdminGuard implements CanActivate {
   constructor(private jwtService: JwtService) {}
 
   async canActivate(context: ExecutionContext): Promise<boolean> {
     const request = context.switchToHttp().getRequest();
+    const token = request.cookies['admin_token'];
 
-    const token = this.extractTokenFromHeader(request);
     if (!token) {
       throw new UnauthorizedException('Client does not have token');
     }
@@ -32,12 +30,4 @@ export class AdminGuard implements CanActivate {
       throw new UnauthorizedException('Invalid token');
     }
   }
-
-  private extractTokenFromHeader(request: Request): string {
-    if (!request.headers.authorization) {
-      return undefined;
-    }
-    const [check, token] = request.headers.authorization.split(' ');
-    return check === 'Bearer' ? token : undefined;
-  }
 }

server/src/admin/admin.service.ts

@@ -23,8 +23,8 @@ export class AdminService {
     private jwtService: JwtService,
   ) {
     this.s3 = new AWS.S3({
-      endpoint: new AWS.Endpoint('https://kr.object.ncloudstorage.com'),
-      region: 'kr-standard',
+      endpoint: this.configService.get<string>('S3_END_POINT'),
+      region: this.configService.get<string>('S3_REGION'),
       credentials: {
         accessKeyId: this.configService.get<string>('S3_ACCESS_KEY'),
         secretAccessKey: this.configService.get<string>('S3_SECRET_KEY'),
@@ -39,16 +39,18 @@ export class AdminService {
     if (!isValid) {
       throw new UnauthorizedException('Invalid admin key');
     }
+    const expiration = parseInt(this.configService.get('TOKEN_EXPIRATION'));
+    const now = Math.floor(Date.now() / 1000);
 
     const payload = {
       role: 'admin',
-      iat: Math.floor(Date.now() / 1000),
-      exp: Math.floor(Date.now() / 1000) + 60 * 60,
+      iat: now,
+      exp: now + expiration,
     };
 
     return {
       token: await this.jwtService.signAsync(payload),
-      expiresIn: 3600,
+      expiresIn: expiration,
     };
   }
 

server/src/main.ts

@@ -6,6 +6,7 @@ import { NestExpressApplication } from '@nestjs/platform-express';
 import { join } from 'path';
 import { ValidationPipe } from '@nestjs/common';
 import { GlobalExceptionFilter } from '@/common/exceptions/global-exception.filter';
+import cookieParser from 'cookie-parser';
 
 async function bootstrap() {
   const app = await NestFactory.create<NestExpressApplication>(AppModule, {
@@ -15,6 +16,7 @@ async function bootstrap() {
   app.useLogger(app.get(WINSTON_MODULE_NEST_PROVIDER));
   app.setGlobalPrefix('api');
   app.useGlobalPipes(new ValidationPipe());
+  app.use(cookieParser());
 
   const config = new DocumentBuilder()
     .setTitle('inear')