[Next.js] AWS Amplify withSSRContext the user is not authenticated 이슈 해결방법

[Next.js] AWS Amplify withSSRContext the user is not authenticated 이슈 해결방법

Next.js 프로젝트에서 인증 라이브러리로 AWS Cognito Amplify를 활용하고 있는데, 서버사이드에서 인증 체크를 위해 withSSRContext에서 쿠키 기반으로 체크할 때 계속 the user is not authenticated 에러를 뱉어내는 이슈가 생겼습니다. 클라이언트 사이드에서 체크하는 useAuth hook에서는 정상적으로 잘 작동하는데 이상하게 서버에서만..

Dependencies

• "aws-amplify": "^4.3.21"
• "next": "^12.1.6"

원인

저의 경우 이메일 기반으로 유저이름을 세팅하였고, 이메일 계정 ruden91@naver.com로 로그인을 할 경우 아래와 같이 쿠키 키가 세팅되었습니다. 

CognitoIdentityServiceProvider.{userPoolWebClientId}.LastAuthUser
CognitoIdentityServiceProvider.{userPoolWebClientId}.ruden91%40naver.com.accessToken
CognitoIdentityServiceProvider.{userPoolWebClientId}.ruden91%40naver.com.clockDrift
CognitoIdentityServiceProvider.{userPoolWebClientId}.ruden91%40naver.com.idToken
CognitoIdentityServiceProvider.{userPoolWebClientId}.ruden91%40naver.com.refreshToken
CognitoIdentityServiceProvider.{userPoolWebClientId}.ruden91%40naver.com.userData

문제는 withSSRContext에서 해당 쿠키값을 기반으로 유저를 체크하게 되는데 ruden91@naver.com의 이름으로 로그인을 했지만 세팅된 코그니토 키를 자세히 보면 ruden91%40naver.com로 되어있는 것을 알 수 있습니다. 자체적으로 유저네임을 인코딩 시켜버렸네요.

# mismatch!
ruden91@naver.com !== ruden9140%naver.com

해결

이러한 이슈로 인해 서버사이드에서 체크할 때 the user is not authenticated 에러가 발생했고, 이를 해결하기 위해 아래와 같이 코드를 변경했습니다.

/**
 * SSR 로그인 가드 HOC
 * 서버사이드에서 인증여부를 확인하고, 인증되지 않은 사용자는 로그인 페이지로 리디렉션 처리
 */
export function ensureAuth(gssp: GetServerSideProps) {
  return async (ctx: GetServerSidePropsContext) => {
    try {
      ctx.req.headers.cookie = decodeURIComponent(ctx.req.headers.cookie);
      const { Auth } = withSSRContext(ctx);
      await Auth.currentAuthenticatedUser();
      return gssp(ctx);
    } catch (err) {
      const redirect = encodeURIComponent(ctx.resolvedUrl);
      ctx.res.writeHead(302, {
        Location: `/auth/signin?redirect=${redirect}`,
      });
    }
  };
}