fix(admin): 로그인 라이프사이클 정비 및 사이드바 정리 #501
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,19 @@ | ||
| import axios, { type AxiosResponse } from "axios"; | ||
| import type { AdminSignInResponse, ReissueAccessTokenResponse } from "@/types/auth"; | ||
|
|
||
| const API_SERVER_URL = import.meta.env.VITE_API_SERVER_URL?.trim(); | ||
|
|
||
| if (!API_SERVER_URL) { | ||
| throw new Error("[admin] VITE_API_SERVER_URL is required. Configure it in your environment."); | ||
| } | ||
|
|
||
| const authAxiosInstance = axios.create({ | ||
| baseURL: API_SERVER_URL, | ||
| withCredentials: true, | ||
| }); | ||
|
|
||
| export const adminSignInApi = (email: string, password: string): Promise<AxiosResponse<AdminSignInResponse>> => | ||
| authAxiosInstance.post("/auth/email/sign-in", { email, password }); | ||
|
|
||
| export const reissueAccessTokenApi = (): Promise<AxiosResponse<ReissueAccessTokenResponse>> => | ||
| authAxiosInstance.post("/auth/reissue"); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import { redirect } from "@tanstack/react-router"; | ||
| import { reissueAccessTokenApi } from "@/lib/api/auth"; | ||
| import { isTokenExpired } from "@/lib/utils/jwtUtils"; | ||
| import { loadAccessToken, removeAccessToken, saveAccessToken } from "@/lib/utils/localStorage"; | ||
|
|
||
| let reissuePromise: Promise<string | null> | null = null; | ||
|
|
||
| const getValidAccessToken = (): string | null => { | ||
| const accessToken = loadAccessToken(); | ||
| if (!accessToken) { | ||
| return null; | ||
| } | ||
|
|
||
| if (isTokenExpired(accessToken)) { | ||
| removeAccessToken(); | ||
| return null; | ||
| } | ||
|
|
||
| return accessToken; | ||
| }; | ||
|
|
||
| export const clearSession = () => { | ||
| removeAccessToken(); | ||
| }; | ||
|
Comment on lines
+22
to
+24
There was a problem hiding this comment. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
# 설명: 로그아웃 경로가 refresh 쿠키를 서버에서 무효화하는지, clearSession 이후 reissue가 다시 저장될 수 있는지 확인합니다.
# 기대 결과: 로그아웃 성공 시 서버 refresh 쿠키 만료 API가 호출되고, 진행 중이던 reissue 결과는 저장되지 않아야 합니다.
rg -n -C3 --type=ts --type=tsx '\b(clearSession|redirectIfAuthenticated|reissueAccessTokenIfPossible|reissueAccessTokenApi|logout|Logout)\b'Repository: solid-connection/solid-connect-web Length of output: 105 🏁 Script executed: rg -n -C3 'clearSession|redirectIfAuthenticated|reissueAccessTokenIfPossible|reissueAccessTokenApi|logout|Logout' apps/admin/src/lib/auth/Repository: solid-connection/solid-connect-web Length of output: 3060 🏁 Script executed: # Read the session.ts file to understand current implementation
head -100 apps/admin/src/lib/auth/session.tsRepository: solid-connection/solid-connect-web Length of output: 1795 🏁 Script executed: # Find logout-related endpoints and handlers
fd -e ts -e tsx . apps/admin/src | head -30Repository: solid-connection/solid-connect-web Length of output: 1310 🏁 Script executed: cat apps/admin/src/components/layout/AdminLayout.tsxRepository: solid-connection/solid-connect-web Length of output: 2519 🏁 Script executed: cat apps/admin/src/lib/api/auth.tsRepository: solid-connection/solid-connect-web Length of output: 820 🏁 Script executed: # Search for logout endpoint or auth routes
rg -n 'logout|Logout|clearSession' apps/admin/src/ --type-list | head -20Repository: solid-connection/solid-connect-web Length of output: 467 🏁 Script executed: # Check auth routes if they exist
find apps -name '*auth*' -o -name '*logout*' | grep -E '\.(ts|tsx)$'Repository: solid-connection/solid-connect-web Length of output: 234 🏁 Script executed: # Search for logout-related endpoints
rg -n 'sign-out|logout|/auth' apps/ --type ts --max-count 30 | grep -E '(logout|sign-out|endpoint|route)'Repository: solid-connection/solid-connect-web Length of output: 2081 🏁 Script executed: # Check if there's a logout endpoint in the API or routes
find apps -name '*.ts' -o -name '*.tsx' | xargs grep -l 'sign-out\|logout.*endpoint\|auth.*logout' 2>/dev/null | head -10Repository: solid-connection/solid-connect-web Length of output: 107 🏁 Script executed: # Check the actual auth route configuration
cat apps/admin/src/routes/auth/login.tsxRepository: solid-connection/solid-connect-web Length of output: 3636 로그아웃 후 refresh 쿠키로 인한 즉시 재인증 방지 필요합니다.
아래 두 가지가 필요합니다.
구현 예시: session generation guard let reissuePromise: Promise<string | null> | null = null;
+let sessionGeneration = 0;
@@
export const clearSession = () => {
+ sessionGeneration += 1;
removeAccessToken();
};
@@
export const reissueAccessTokenIfPossible = async (): Promise<string | null> => {
if (reissuePromise) {
return reissuePromise;
}
+ const generationAtStart = sessionGeneration;
reissuePromise = (async () => {
try {
const response = await reissueAccessTokenApi();
const nextAccessToken = response.data.accessToken;
@@
if (!nextAccessToken) {
clearSession();
return null;
}
+ if (generationAtStart !== sessionGeneration) {
+ return null;
+ }
+
saveAccessToken(nextAccessToken);
return nextAccessToken;🤖 Prompt for AI Agents |
||
|
|
||
| export const reissueAccessTokenIfPossible = async (): Promise<string | null> => { | ||
| if (reissuePromise) { | ||
| return reissuePromise; | ||
| } | ||
|
|
||
| reissuePromise = (async () => { | ||
| try { | ||
| const response = await reissueAccessTokenApi(); | ||
| const nextAccessToken = response.data.accessToken; | ||
|
|
||
| if (!nextAccessToken) { | ||
| clearSession(); | ||
| return null; | ||
| } | ||
|
|
||
| saveAccessToken(nextAccessToken); | ||
| return nextAccessToken; | ||
| } catch { | ||
| clearSession(); | ||
| return null; | ||
| } finally { | ||
| reissuePromise = null; | ||
| } | ||
| })(); | ||
|
|
||
| return reissuePromise; | ||
| }; | ||
|
|
||
| export const ensureSessionToken = async (): Promise<string | null> => { | ||
| const validAccessToken = getValidAccessToken(); | ||
| if (validAccessToken) { | ||
| return validAccessToken; | ||
| } | ||
|
|
||
| return reissueAccessTokenIfPossible(); | ||
|
Comment on lines
+58
to
+60
There was a problem hiding this comment.
Useful? React with 👍 / 👎. |
||
| }; | ||
|
|
||
| export const requireAdminSession = async (): Promise<string> => { | ||
| const token = await ensureSessionToken(); | ||
| if (!token) { | ||
| throw redirect({ to: "/auth/login" }); | ||
| } | ||
|
|
||
| return token; | ||
| }; | ||
|
|
||
| export const redirectIfAuthenticated = async () => { | ||
| const token = await ensureSessionToken(); | ||
| if (token) { | ||
| throw redirect({ to: "/scores" }); | ||
| } | ||
| }; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,3 @@ | ||
| export const loadAccessToken = () => { | ||
| try { | ||
| return localStorage.getItem("accessToken"); | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
handleLogoutonly removes the access token from localStorage and immediately navigates to/auth/login, but the refresh cookie is left intact. Because/auth/loginnow runsredirectIfAuthenticated, users with a still-valid refresh cookie will get a new access token via/auth/reissueand be redirected back to/scores, so logout does not actually terminate the session in normal authenticated flows.Useful? React with 👍 / 👎.