JWT와 쿠키 그리고 인증 시스템 구현

const jwt = header.payload.signature;

import { useForm, SubmitHandler } from 'react-hook-form';
export default function LoginSection({ toggleForm }: LoginSectionProps) {
  const { register, handleSubmit, setValue, formState: { errors: loginErrors } } = useForm<IFormInput>({ mode: 'onBlur' });

  const onSubmit: SubmitHandler<IFormInput> = async (data) => {
    setLoading(true);
    setError(null);

    if (data.rememberMe) {
      setCookie({ name: 'rememberEmail', value: data.email, days: 7 });
    } else {
      deleteCookie('rememberEmail');
    }

    try {
      const response = await loginApi({
        email: data.email,
        password: data.password,
      });

      if (response.response) {
        const accessToken = response.result.accessToken;
        const user = jwtDecode(accessToken);
        if (user) {
          setCookie({ name: 'accessToken', value: accessToken, hours: 2, secure: true });
          setUser(user);
        }
        router.back();
      } else {
        setError(`Error: ${response.errorCode} - ${response.message}`);
        console.error('Login failed:', response.message);
      }
    } catch (error: unknown) {
      if (error instanceof Error) {
        console.error('There was a problem with the fetch operation:', error.message);
        setError(error.message);
      } else {
        console.error('Unexpected error', error);
        setError('An unexpected error occurred');
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    ...
    <form onSubmit={handleSubmit(onSubmit)}>
    ...
  )
}

'use client';
import React, { createContext, useContext, useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { setCookie } from '@/libs/cookie';
import { useUserStore } from '@/store/userStore';
import { useQuery } from '@tanstack/react-query';
import { jwtDecode } from '@/libs/utils';
import { hasRefreshToken, newAccessToken } from '@/services/fetch-auth';

interface AuthContextType {
  token: string | null;
  setToken: React.Dispatch<React.SetStateAction<string | null>>;
  tokenExpiry: number | null;
  setTokenExpiry: React.Dispatch<React.SetStateAction<number | null>>;
}

const AuthContext = createContext<AuthContextType | undefined>(undefined);

const fetchUserData = async () => {
  const response = await newAccessToken();
  if (response.response) {
    const newAccessToken = response.result.accessToken;
    const expiresIn = 2 * 60 * 60 * 1000; // 2 hours
    setCookie({ name: 'accessToken', value: newAccessToken, hours: 2, secure: true });
    const user = jwtDecode(newAccessToken);
    return {
      token: newAccessToken,
      tokenExpiry: Date.now() + expiresIn,
      user: user,
    };
  } else {
    throw new Error('Failed to refresh token');
  }
};

export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
  const [token, setToken] = useState<string | null>(null);
  const [tokenExpiry, setTokenExpiry] = useState<number | null>(null);
  const setUser = useUserStore((state) => state.setUser);
  const clearUser = useUserStore((state) => state.clearUser);
  const router = useRouter();

  useEffect(() => {
    const checkAuth = async () => {
      if (await hasRefreshToken()) {
        refetch();

      } else {
        clearUser();
        router.push('/auth');
      }
    };

    checkAuth();
  }, [setUser, clearUser, router]);

  const { refetch } = useQuery({
    queryKey: ['refreshToken'],
    queryFn: fetchUserData,
    enabled: false,
  });

  useEffect(() => {
    const refreshUserData = async () => {
      try {
        const data = await refetch();
        if (data.data) {
          setToken(data.data.token);
          setTokenExpiry(data.data.tokenExpiry);
          if (data.data.user) {
            setUser(data.data.user);
          } else {
            clearUser();
            router.push('/auth');
          }
        } else {
          clearUser();
          router.push('/auth');
        }
      } catch (error) {
        console.error('Error fetching user data:', error);
        clearUser();
        router.push('/auth');
      }
    };

    refreshUserData();
  }, [refetch, setUser, clearUser, router]);

  useEffect(() => {
    if (tokenExpiry) {
      const timeout = setTimeout(() => {
        refetch();
      }, tokenExpiry - Date.now() - 60 * 1000);

      return () => clearTimeout(timeout);
    }
  }, [tokenExpiry, refetch]);

  return (
    <AuthContext.Provider value={{ token, setToken, tokenExpiry, setTokenExpiry }}>
      {children}
    </AuthContext.Provider>
  );
};