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

퀴즈를 해결하려고 해당 코드를 작성했는데 로그인을 하려고 하면 Context creation failed: 토큰 만료라는 400 오류가 뜹니다. (새로 가입해서도 해봤는데 똑같은 오류가 떴습니다.)

또한 useAuth를 사용했는데도 로그인 없이 성공페이지로 바로 접속됩니다. 뭐가 문제일까요?

useAuth

export const useAuth = ():void => {
  const router = useRouter()
  useEffect(()=>{
    if(localStorage.getItem("accessToken")===null){
      alert("로그인 ㄱ")
      void router.push("/z_quiz/section46/02")
    }},[])
}

완료 코드

import { gql, useQuery } from "@apollo/client"
import type { IQuery } from "../../../../src/commons/types/generated/types"
import { useAuth } from "../../../../src/components/commons/hooks/useAuth"
const FETCH_USER_LOGGED_IN = gql`
  query {
    fetchUserLoggedIn {
      email
      name
    }
  }
`
export default function LoginSuccessPage():JSX.Element {
  const { data } = useQuery<Pick<IQuery,"fetchUserLoggedIn">>(FETCH_USER_LOGGED_IN)
  useAuth()
  return <>{data?.fetchUserLoggedIn.name}님 환영합니다.</>
}

로그인 코드

/* eslint-disable @typescript-eslint/no-misused-promises */
import { gql, useMutation } from "@apollo/client"
import { type ChangeEvent, useState } from "react"
import type { IMutation, IMutationLoginUserArgs } from "../../../../src/commons/types/generated/types"
import { useRecoilState } from "recoil"
import { accessTokenState } from "../../../../src/commons/stores"
import { useRouter } from "next/router"
const LOGIN_USER =gql`
  mutation loginUser($email:String!, $password:String!){
    loginUser(email:$email,password:$password){
      accessToken
    }
  }
`
export default function LoginPage():JSX.Element {
  const router = useRouter()
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [loginUser] = useMutation<Pick<IMutation,"loginUser">,IMutationLoginUserArgs>(LOGIN_USER)
  const [, setAccessToken] = useRecoilState(accessTokenState)
  const onChangeEmail = (event: ChangeEvent<HTMLInputElement>):void => {
    setEmail(event.currentTarget.value)
  }
  const onChangePassword = (event: ChangeEvent<HTMLInputElement>):void => {
    setPassword(event.currentTarget.value)
  }
  const onClickLogin = async ():Promise<void> => {
    try {
      const result = await loginUser({variables: { email, password }}) 
      const accessToken = result.data?.loginUser.accessToken

      if (accessToken=== undefined) {
        alert("로그인 실패")
        return ;}
      setAccessToken(accessToken)
      localStorage.setItem("accessToken", accessToken)
      void router.push("./success.tsx")
    } catch(error) {
      if (error instanceof Error ) alert(error.message)
    }
  }
  return (
    <>
    이메일: <input type="text" onChange={onChangeEmail} />
    비밀번호: <input type="password" onChange={onChangePassword} />
    <button onClick={onClickLogin}>로그인</button>
    </>
  )
}