## XGen 인증 시스템 개발기 사내 툴에서 시작한 XGen이 외부 사용자도 접근할 수 있게 되면서, 제대로 된 인증 시스템이 필요해졌다. 이메일 로그인에 Google, GitHub OAuth까지 통합한 과정을 기록한다. ### 인증 전략 선택 NextAuth.js(현 Auth.js)를 사용할지, 직접 구현할지 고민했다. 결국 백엔드 API가 FastAPI로 되어 있어 JWT 기반으로 직접 구현하는 방향을 택했다. 프론트엔드에서는 토큰 관리와 인증 상태 관리에 집중했다. ### Auth Store 설계 ```typescript // stores/authStore.ts interface AuthState { user: User | null; accessToken: string | null; isAuthenticated: boolean; isLoading: boolean; login: (email: string, password: string) => Promise; socialLogin: (provider: 'google' | 'github') => Promise; signup: (data: SignupData) => Promise; logout: () => void; refreshToken: () => Promise; } export const useAuthStore = create()( persist( (set, get) => ({ user: null, accessToken: null, isAuthenticated: false, isLoading: false, login: async (email, password) => { set({ isLoading: true }); try { const { data } = await api.post('/auth/login', { email, password }); set({ user: data.user, accessToken: data.access_token, isAuthenticated: true, }); } finally { set({ isLoading: false }); } }, // ... }), { name: 'auth-storage', partialize: (state) => ({ accessToken: state.accessToken }) } ) ); ``` ### 로그인 페이지 UI ```tsx const LoginPage = () => { const { login, socialLogin, isLoading } = useAuthStore(); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); return (

XGen Login

socialLogin('google')}> Google로 로그인 socialLogin('github')}> GitHub로 로그인

); }; ``` ### API 인터셉터로 토큰 관리 Axios 인터셉터를 활용해 요청마다 자동으로 토큰을 붙이고, 401 응답 시 토큰 갱신을 시도한다. 갱신 실패 시 로그아웃 처리까지 자동화했다. ### 미들웨어로 라우트 보호 Next.js 미들웨어를 활용해 인증이 필요한 페이지에 접근하면 로그인 페이지로 리다이렉트한다. ```typescript // middleware.ts export function middleware(request: NextRequest) { const token = request.cookies.get('access_token')?.value; const protectedPaths = ['/workspace', '/management', '/training']; if (protectedPaths.some((p) => request.nextUrl.pathname.startsWith(p))) { if (!token) { return NextResponse.redirect(new URL('/login', request.url)); } } } ``` OAuth 플로우에서 가장 까다로웠던 건 팝업 창과 메인 창 간의 통신이었다. `postMessage` API를 사용해서 해결했다.