Merge pull request #50 from DevKor-github/api/signUp

feat: AuthProvider

app/layout.tsx

@@ -4,6 +4,7 @@ import StyledComponentsRegistry from '@/libs/design-system/styled-components/reg
 import ThemeClient from '@/libs/design-system/styled-components/ThemeClient';
 import { OverlayProvider } from '@/libs/design-system/overlay';
 import QueryProvider from '@/libs/queries/QueryProvider';
+import { AuthProvider } from '@/libs/clients/AuthProvider';
 
 export const metadata: Metadata = {
   title: '신나는 정기전 승부예측, TOKY',
@@ -20,6 +21,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <ThemeClient>
             <OverlayProvider>
               <QueryProvider>
+                <AuthProvider />
                 <main>{children}</main>
               </QueryProvider>
             </OverlayProvider>

libs/clients/AuthProvider.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { refresh } from '@/libs/clients/refresh';
+import { useAuthStore } from '@/libs/store/useAuthStore';
+import { useCallback, useEffect } from 'react';
+
+export function AuthProvider() {
+  const { accessToken, refreshToken, clearTokens, setTokens } = useAuthStore();
+
+  const setTokenFromCookie = useCallback(() => {
+    let accessToken = null,
+      refreshToken = null;
+
+    document.cookie.split(';').forEach((c) => {
+      if (c.trim().startsWith('access-token=')) accessToken = c.split('=')[1];
+      if (c.trim().startsWith('refresh-token=')) refreshToken = c.split('=')[1];
+    });
+    if (!accessToken || !refreshToken) {
+      clearTokens();
+      return false;
+    }
+
+    document.cookie = 'access-token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+    document.cookie = 'refresh-token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+
+    setTokens(accessToken, refreshToken);
+
+    return true;
+  }, [clearTokens, setTokens]);
+
+  const checkAuth = useCallback(async () => {
+    if (refreshToken) {
+      await refresh(process.env.NEXT_PUBLIC_API_URL ?? '');
+    } else {
+      setTokenFromCookie();
+    }
+  }, [refreshToken, setTokenFromCookie]);
+
+  useEffect(() => {
+    if (accessToken === null) checkAuth();
+  }, [accessToken, checkAuth]);
+
+  return <></>;
+}

libs/store/useAuthStore.ts

@@ -0,0 +1,21 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+interface AuthStore {
+  accessToken: string | null;
+  refreshToken: string | null;
+  setTokens: (accessToken: string, refreshToken: string) => void;
+  clearTokens: () => void;
+}
+
+export const useAuthStore = create<AuthStore>()(
+  persist(
+    (set) => ({
+      accessToken: null,
+      refreshToken: null,
+      setTokens: (accessToken, refreshToken) => set({ accessToken, refreshToken }),
+      clearTokens: () => set({ accessToken: null, refreshToken: null }),
+    }),
+    { name: 'user auth' },
+  ),
+);