인프런 커뮤니티 질문&답변

안녕하세요 강사님. 그동안 로그인 구현을 해본적이 없어서 정말 유익한 강의였습니다.

3-8 강의를 듣던 중 강의대로 했는데 로그아웃이 안 되더라구요. 혼자 해결해보려고 다양한 방법으로 해서 결국 로그인과 로그아웃이 동작은 하는데 로그아웃 버튼을 두 번 클릭해야지 AuthStackNavigator로 네비게이팅이 되는 문제가 있습니다.

https://github.com/G0MTENG/MatzipApp-project/tree/3-8

깃허브에 3-8 브랜치에 올려두었습니다. src/hooks/queries/useAuth에 이에 대한 구현이 있고 추가적으로 useAuth 코드를 올려두겠습니다. 감사합니다.

import {
  getAccessToken,
  postLogin,
  postSignUp,
  getProfile,
  logout,
} from '@/apis';
import {queryClient} from '@/apis/queryClient';
import {authQueryKeys, storageKeys, numbers} from '@/constants';
import {UseMutationCustomOptions, UseQueryCustomOptions} from '@/types';
import {
  removeEncryptStorage,
  removeHeader,
  setEncryptStorage,
  setHeader,
} from '@/utils';
import {useMutation, useQuery} from '@tanstack/react-query';
import {useEffect} from 'react';

export const useSignUp = (mutationOptions?: UseMutationCustomOptions) => {
  return useMutation({
    mutationFn: postSignUp,
    ...mutationOptions,
  });
};

export const useLogin = (mutationOptions?: UseMutationCustomOptions) => {
  return useMutation({
    mutationFn: postLogin,
    onSuccess: ({accessToken, refreshToken}) => {
      setEncryptStorage('refreshToken', refreshToken);
      setHeader('Authorization', `Bearer ${accessToken}`);
    },
    onSettled: () => {
      queryClient.refetchQueries({
        queryKey: [authQueryKeys.AUTH, authQueryKeys.GET_ACCESS_TOKEN],
      });
      queryClient.invalidateQueries({
        queryKey: [authQueryKeys.AUTH, authQueryKeys.GET_PROFILE],
      });
    },
    ...mutationOptions,
  });
};

export const useGetRefreshToken = () => {
  const {data, isSuccess, isError} = useQuery({
    queryKey: [authQueryKeys.AUTH, authQueryKeys.GET_ACCESS_TOKEN],
    queryFn: getAccessToken,
    staleTime: numbers.ACCESS_TOKEN_REFRESH_TIME,
    refetchInterval: numbers.ACCESS_TOKEN_REFRESH_TIME,
    refetchOnReconnect: true,
    refetchIntervalInBackground: true,
  });

  useEffect(() => {
    if (isSuccess) {
      setHeader('Authorization', `Bearer ${data.accessToken}`);
      setEncryptStorage(storageKeys.REFRESH_TOKEN, data.refreshToken);
    }
  }, [isSuccess, data]);

  useEffect(() => {
    if (isError) {
      removeEncryptStorage(storageKeys.REFRESH_TOKEN);
      removeHeader('Authorization');
    }
  }, [isError]);

  return {isSuccess, isError};
};

export const useGetProfile = (quryOptions?: UseQueryCustomOptions) => {
  return useQuery({
    queryKey: [authQueryKeys.AUTH, authQueryKeys.GET_PROFILE],
    queryFn: getProfile,
    ...quryOptions,
  });
};

export const useLogout = (mutationOptions?: UseMutationCustomOptions) => {
  return useMutation({
    mutationFn: logout,
    onSuccess: async () => {
      await removeEncryptStorage(storageKeys.REFRESH_TOKEN);
      removeHeader('Authorization');
    },
    onSettled: () => {
      queryClient.resetQueries({queryKey: [authQueryKeys.AUTH]});
      queryClient.invalidateQueries({queryKey: [authQueryKeys.AUTH]});
    },
    ...mutationOptions,
  });
};

export const useAuth = () => {
  const signupMutation = useSignUp();
  const refreshTokenQuery = useGetRefreshToken();
  const getProfileQuery = useGetProfile({
    enabled: refreshTokenQuery.isSuccess,
  });
  const isLogin = getProfileQuery.isSuccess;
  const loginMutation = useLogin();
  const logoutMuatation = useLogout();

  return {
    signupMutation,
    loginMutation,
    isLogin,
    getProfileQuery,
    logoutMuatation,
  };
};