Skip to content

Commit 8c712ca

Browse files
Chiman2937Chiman2937
authored
Merge pull request #294 from WeGo-Together/chiyoung-fix/auth-provider
[Fix] Auth Provider / 프로필 페이지 redirect 로직 개선
2 parents e666dfa + 33f5f9e commit 8c712ca

File tree

6 files changed

+33
-11
lines changed

6 files changed

+33
-11
lines changed

‎src/api/core/index.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,10 +50,18 @@ baseAPI.interceptors.response.use(
5050
const isServer = typeof window === 'undefined';
5151
const originalRequest = error.config;
5252

53+
// skipAuthRedirect flag가 지정되어있지 않으면 항상 redirect 되도록
54+
if (originalRequest.skipAuthRedirect === undefined) {
55+
originalRequest.skipAuthRedirect = true;
56+
}
57+
5358
if (status === 401 && !originalRequest._retry) {
5459
originalRequest._retry = true;
5560
try {
56-
await API.authService.refresh(originalRequest.skipAuthRedirect);
61+
// refresh - set cookie는 클라이언트 요청만 동작함
62+
if (!isServer) {
63+
await API.authService.refresh(originalRequest.skipAuthRedirect);
64+
}
5765
return baseAPI(originalRequest);
5866
} catch (refreshError) {
5967
if (!originalRequest.skipAuthRedirect) throw refreshError;

‎src/app/(user)/profile/[userId]/page.test.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { formatISO } from '@/lib/formatDateTime';
66
import { server } from '@/mock/server';
77
import { createMockSuccessResponse } from '@/mock/service/common/common-mock';
88
import { mockUserItems } from '@/mock/service/user/user-mock';
9+
import { AuthProvider } from '@/providers';
910

1011
import ProfilePage from './page';
1112

@@ -33,7 +34,9 @@ const renderWithQueryClient = async (component: React.ReactElement) => {
3334
let renderResult;
3435
await act(async () => {
3536
renderResult = render(
36-
<QueryClientProvider client={testQueryClient}>{component}</QueryClientProvider>,
37+
<QueryClientProvider client={testQueryClient}>
38+
<AuthProvider hasRefreshToken={false}>{component}</AuthProvider>
39+
</QueryClientProvider>,
3740
);
3841
});
3942

‎src/app/layout.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,19 @@ export const metadata: Metadata = {
1616

1717
initMocks();
1818

19-
export default function RootLayout({
19+
export default async function RootLayout({
2020
children,
2121
}: Readonly<{
2222
children: React.ReactNode;
2323
}>) {
24+
const { cookies } = await import('next/headers');
25+
const cookieStore = await cookies();
26+
const hasRefreshToken = !!cookieStore.get('refreshToken')?.value;
27+
2428
return (
2529
<html lang='ko'>
2630
<body className={`${pretendard.className} ${pretendard.variable} antialiased`}>
27-
<Providers>
31+
<Providers hasRefreshToken={hasRefreshToken}>
2832
<div id='root'>
2933
<LayoutWrapper>{children}</LayoutWrapper>
3034
</div>

‎src/app/providers.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,14 @@ import {
1111

1212
interface Props {
1313
children: React.ReactNode;
14+
hasRefreshToken: boolean;
1415
}
1516

16-
export const Providers = ({ children }: Props) => {
17+
export const Providers = ({ children, hasRefreshToken }: Props) => {
1718
return (
1819
<QueryProvider>
1920
<MSWProvider>
20-
<AuthProvider>
21+
<AuthProvider hasRefreshToken={hasRefreshToken}>
2122
<NotificationProvider>
2223
<LazyMotionProvider>
2324
<ToastProvider>

‎src/hooks/use-user/use-user-get-me/index.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useQuery } from '@tanstack/react-query';
22

33
import { API } from '@/api';
44
import { userKeys } from '@/lib/query-key/query-key-user';
5+
import { useAuth } from '@/providers';
56

67
export const useUserGetMe = () => {
78
const query = useQuery({
@@ -18,6 +19,8 @@ export const useUserGetMe = () => {
1819
};
1920

2021
export const useUserGetMeSkipRedirect = () => {
22+
const { isAuthenticated } = useAuth();
23+
2124
const query = useQuery({
2225
queryKey: userKeys.me(),
2326
queryFn: () => API.userService.getMeSkipRedirect(),
@@ -27,6 +30,8 @@ export const useUserGetMeSkipRedirect = () => {
2730
profileMessage: data.profileMessage ?? '',
2831
mbti: data.mbti ?? '',
2932
}),
33+
retry: false,
34+
enabled: isAuthenticated,
3035
});
3136
return query;
3237
};

‎src/providers/provider-auth/index.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,29 +19,30 @@ export const useAuth = () => {
1919

2020
interface Props {
2121
children: React.ReactNode;
22+
hasRefreshToken: boolean;
2223
}
2324

24-
export const AuthProvider = ({ children }: Props) => {
25+
export const AuthProvider = ({ children, hasRefreshToken }: Props) => {
2526
const [isAuthenticated, setIsAuthenticated] = useState(false);
2627

2728
// 초기값 설정
2829
// 페이지가 새로고침 될 때 accessToken이 없으면 refresh 시도, state update 실행
2930
useEffect(() => {
3031
const updateAuthenticated = async () => {
31-
const accessToken = Cookies.get('accessToken');
32-
if (!accessToken) {
32+
const hasAccessToken = !!Cookies.get('accessToken');
33+
if (!hasAccessToken && hasRefreshToken) {
3334
try {
3435
await API.authService.refresh();
3536
setIsAuthenticated(true);
3637
} catch {
3738
setIsAuthenticated(false);
3839
}
39-
} else {
40+
} else if (hasAccessToken) {
4041
setIsAuthenticated(true);
4142
}
4243
};
4344
updateAuthenticated();
44-
}, []);
45+
}, [hasRefreshToken]);
4546

4647
return (
4748
<AuthContext.Provider value={{ isAuthenticated, setIsAuthenticated }}>

0 commit comments

Comments
 (0)