로그인 상태 새로고침 시 유지하기를 `Supabase Auth`와 `Zustand`로 해결한 트러블 슈팅에 대해서 정리해 봤습니다.
발생한 오류 🔥
사용자가 로그인 후 마이페이지와 로그아웃 버튼이 정상적으로 보이지만, 페이지를 새로고침 하면 다시 로그인 버튼이 나타나는 문제가 있었습니다.
즉, 사용자의 로그인 상태가 새로고침 후에도 유지되지 않는 문제가 생겼습니다.
해결 과정 🔎
문제 분석
새로고침 시 클라이언트 측에서 전역 상태가 초기화 돼 상태가 유지되지 않는 것을 발견했습니다.
Supabase의 `auth.getUser()`를 사용해 서버 측에서 유저 정보를 가져올 수 있다는 점을 고려해 이 정보를 전역 상태로 관리해 새로고침 후에도 상태가 유지되도록 해야 했습니다.
Supabase와 Zustand 연동
Supabase와 `auth.getUser()`메서드를 이용해 Layout 파일에서 사용자 로그인 여부를 판별 후 `UserStoreProvider`로 전달해 로그인 상태를 전역적으로 관리되도록 설정했습니다
해결 방법 ✨
Supabase에서 유저 정보 받아오기
Layout.tsx에서 `auth.getUser()`를 호출해 유저 정보를 받아와 `UserStoreProvider`에 `isUser`속성으로 값을 넘겨줍니다.
export default async function RootLayout({
children
}: Readonly<{
children: React.ReactNode;
}>) {
const {
data: { user }
} = await createClient().auth.getUser();
return (
<html lang="en">
<body className={`${pretendard.variable} antialiased`}>
<UserStoreProvider isUser={!!user}>
<Header />
<Providers>
<div className="min-h-screen pt-[50px]">{children}</div>
</Providers>
<Footer />
</UserStoreProvider>
</body>
</html>
);
}
Zustand로 상태 관리
`UserStoreProvider`는 `isUser` 값을 Zustand 스토어로 전달해 상태를 초기화합니다.
export const UserStoreProvider = ({ children, isUser }: UserStoreProviderProps) => {
const storeRef = useRef<UserStoreApi>();
if (!storeRef.current) {
storeRef.current = createUserStore({ isUser: isUser });
}
return <UserStoreContext.Provider value={storeRef.current}>{children}</UserStoreContext.Provider>;
};
Zustand에서 전역 상태 관리
`createUserStore`에서 초기값을 받아 상태를 유지하도록 설정했습니다.
export const initUserState: UserState = {
isUser: false
};
export const createUserStore = (initState: UserState = initUserState) => {
return createStore<UserStore>()((set) => ({
...initState,
userLogin: () => set(() => ({ isUser: true })),
userLogout: () => set(() => ({ isUser: false }))
}));
};
느낀 점 ❕
새로고침 시 로그인 상태를 유지하지 못하는 부분에서 불편함을 느꼈는데 Supabase와 Zustand를 사용해 문제를 해결하면서 서버 측 유저 정보 활용의 중요성을 느끼게 되었습니다.
'공부 > 트러블 슈팅' 카테고리의 다른 글
| [트러블 슈팅] 스와이퍼가 메인 -> 지도 -> 메인 이동 시 사라지는 이슈 해결 (0) | 2024.11.14 |
|---|---|
| [트러블 슈팅] Next.js에서 이미지 최적화로 FCP 및 LCP 성능 개선하기: 이미지 압축을 통한 로딩 속도 향상 (0) | 2024.11.14 |
| [트러블 슈팅] SVG 속성 오류 해결하기 - <svg> Height 속성에서 Expected length, "auto" 오류를 수정하는 방법 (1) | 2024.11.14 |
| [트러블 슈팅] Next Vercel 배포 환경 개선 - Dev 환경 최신화 문제 해결 (0) | 2024.10.25 |
| [트러블 슈팅] supabase에서 Google, Kakao 로그인 시 신규 사용자 저장 오류 (2) | 2024.10.14 |
| [트러블 슈팅] Next.js generateStaticParams 정적 경로 생성의 오해와 해결 과정 (0) | 2024.10.07 |
| [트러블 슈팅] 카카오맵 API를 활용한 캠핑장 데이터 렌더링 최적화 (0) | 2024.09.19 |
| [트러블 슈팅] SVG 컴포넌트 재사용 시 발생한 이미지 중복 문제 해결하기 (0) | 2024.09.15 |
