RefreshToken 을 이용해 AccessToken을 갱신해보자.
(참고) cognito accessToken payload
- auth_time : 인증이 발생한 시간. 토큰이 발행된 시간이 아님.
- iat : 토큰 발행 시간. (issued at)
- exp : 토큰 만료 시간. (expiration time)
- iss : 토큰 발행 주체 식별. (issuer)
- jti : JWT에 대한 고유 식별자. 재생 방지 목적 사용. (JWT ID)
Auth.currentSession() data 로그 확인
- 버튼 생성 후 onClick 이벤트에
Auth.currentSession()를 실행시켜 로그 확인. - 코드
import { Auth } from 'aws-amplify';
...
<div>
<Button
style={{ color: 'white' }}
onClick={() =>
Auth.currentSession()
.then((data) => {
console.log(data);
console.log(
'auth_time :',
new Date(data.getAccessToken().payload.auth_time * 1000)
);
console.log(
'exp :',
new Date(data.getAccessToken().payload.exp * 1000)
);
console.log(
'iat :',
new Date(data.getAccessToken().payload.iat * 1000)
);
})
.catch((e) => console.log(e))
}
>
Session Test
</Button>
</div>- 결과 : 갱신 안됨. 버튼을 이런 저런 시간 주기로 눌러 갱신 시도를 해 보았으나 로그에 찍힌 시간의 변화가 없슴.
cognitoUser.refreshSession(refreshToken, callback{}) 로그 확인
- 만들어놓은 버튼에 onClick 이벤트만 변경
- 코드
const [previousAccessToken, setPreviousAccessToken] = useState();
const comparing - (pre, cur) => {
pre === cur ? ture : false
}
...
try {
const cognitoUser = await Auth.currentAuthenticatedUser();
const currentSession = await Auth.currentSession();
setPreviousAccessToken(currentSession.getAccessToken().getJwtToken());
console.log(
'auth_time',
new Date(currentSession.getAccessToken().payload.auth_time * 1000)
);
console.log(
'iat',
new Date(currentSession.getAccessToken().payload.iat * 1000)
);
console.log(
'exp',
new Date(currentSession.getAccessToken().payload.exp * 1000)
);
cognitoUser.refreshSession(
currentSession.refreshToken,
(err, session) => {
const currentAccessToken = session.getAccessToken().getJwtToken();
console.log(
'Comparing AccessToken',
comparing(previousAccessToken, currentAccessToken)
);
console.log(
'auth_time in callback',
new Date(session.getAccessToken().payload.auth_time * 1000)
);
console.log(
'iat in callback',
new Date(session.getAccessToken().payload.iat * 1000)
);
console.log(
'exp in callback',
new Date(session.getAccessToken().payload.exp * 1000)
);
}
);
} catch (e) {
console.log('Unable to refresh Token', e);
}-
결과 : cognitoUser.refreshSession 실행 전, 후 accessToken, idToken, iat, exp 변동 발생. auth_time, refreshToken 변동 없슴.
-
현상 : 찍힌 로그상 accessToken이 갱신되고 토큰 발행시간 만료시간도 같이 갱신된다. 하지만 auth_time으로부터 AWS cognito 설정에서 정해놓은 액세스 토큰 만료 시간이 지난 후 페이지 이동시 자동 로그아웃.
Auth.currentAuthenticatedUser() 및 Auth.currentSession() 가 refreshSession() 실행 후 바뀐값을 반영하는가?
- iat, exp는 토큰의 payload 변수이므로 refreshSession() 이후 로그에 변경된 값이 찍힌다면 위 두 함수는 바뀐값을 반영한다고 볼 수 있을것같다.
localStorage에 저장된 token을 강제로 갱신시켜보자.
-
발급받은 jwt를 localStorage에 저장해놓고 사용중인데 refreshSesstion()은 토큰을 새로 발급받아주기만 할 뿐 localStorage에 저장된 토큰을 갱신시켜주지 않기때문에 새로 발급받은 accessToken을 기존 token을 저장하고있던 localStorage에 강제로 갱신해보기로 마음먹었다.
-
결과 : 생각대로 잘 작동한다! (매우기쁨) 왜 이 당연한 과정이 생각안났을까... (자괴감) 정말 당연하겠지만 localStorage가 아닌곳에 token을 저장해두고 사용한다면 그곳을 갱신시켜주는 과정이 필요할것같다.
-
삽질(어마어마함) : 생각대로 잘 작동해서 기쁜 마음에 예전에 만들어두었던 exp가 지나면 나오게 만든 못생긴 경고창을 (겁도없이) 잠금해제한것이 문제가 되었다. 이때부터 잘 동작하던녀석이 삐뚤어지기 시작하는데 이것이 경고창이 문제라는것을 너무 늦게 깨달았다. 잠금해제한 경고창은 강제로 갱신된 localStorage에 accessToken에 담긴 정보가 아닌 갱신해주지 않은 다른 저장소를 참조하고 있었기 때문이다. 아~ 내 소중한 시간... 오늘 또한번 느낀점이지만 개발이 서툴땐 step by step!!! 한단계씩 가자... 조금 느리더라도.
발생한 오류
A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://reactjs.org/link/crossorigin-error for more information.
- localStorage에 token관련 JSON문자열을 저장하거나 참조하다보면 발생하는 오류인데 JSON.parse()를 잘못 다뤘을때 발생한다.(물론 다른경우도 있을 수 있다) 예를들면 setItem할때 (실수로!!) JSON.stringify() 미적용 상태로 setItem한것을 getItem시 JSON.parse()를 씌운다던가 하는... 그렇다! 그게 나다...
마무리
- 해결 방법을 찾아보고 수행하는 과정에서 올바른 방법을 찾는것도 중요하지만 올바른 과정 수행도 중요하다는 것을 깨닫게 된 과제(?)였다. 그간 기계처럼 확인하던 log들을 좀 더 유의미한 상태로 분석해야겠다는 생각을 하게된 계기도 되었고... 이제 아까 잘못된 경고창 작업을 하러 가봐야겠다.
