Dart/Flutter | flutter_secure_storage 사용 중 Error: OperationError 에러 해결하기

Flutter로 모바일 앱 개발을 하면서 flutter_secure_storage를 로그인했을 때 서버에서 받은 토큰을 저장하는 용도로 사용하고 있다.  그런데 웹으로 실행한 후 로그인을 시도하고 새로고침을 하면 Error: OperationError가 발생하는 것이다. 안드로이드, iOS, macOS에서 실행할 때는 특이사항이 없었던 것 같다. 

<그림1> 브라우저에서 발생한 에러

 

맨 처음 이 에러를 접했을 때 당연하게도 "웹 지원X"인 줄 알았다. 그래서 pub.dev에 flutter_secure_storage에서 README 항목을 유심히 살펴보았다.

flutter_secure_storage | Flutter package

어머나! 웹도 지원된다?

<그림2> 웹 플랫폼 지원 여부 확인

 

그러면 좀 더 내려보면 웹 버전에 대한 설명이 있을 것 같아 스크롤을 좀 더 내려보았다. 예상대로 있었다. flutter_secure_storage는 브라우저에 내장된 WebCrypto를 사용한다고 시험적으로 사용할 수 있다는 내용과 함께 "HTTP Strict Transport Security"를 헤더를 활성화 해야 한다고 한다.

<그림2> WebCrypto를 사용해서 HTTP Strict Transport Security 활성화 문구

 

그래서 HTTP Strict Transport Security를 서버 헤더에서 추가하였다. 지난번에는 어찌어찌 같은데 이번에는 같은 에러가 계속 발생하였다.

 

https://github.com/juliansteenbakker/flutter_secure_storage/issues/381

OperationError when calling `read()` on web · Issue #381 · juliansteenbakker/flutter_secure_storage

원인은 "apetroaeiandrei" 댓글에서 힌트를 얻을 수 있었다. 좀 이해가 안되지만 스토리지에 동시에 write를 해서 문제가 생겼다는 것이다.  그러나 작성된 코드는 동시에 write 하지 않았다. 댓글 중 "thinkingatoms"은  아래와 같이 synchronized 패키지를 설치해서 해결했다는 이야기를 볼 수 있었다.

await _lock.synchronized(() async {
  // ... 코드 ...
});

 

https://pub.dev/packages/synchronized

synchronized | Dart package

 

다행히도 synchronized 패키지를 사용하여 코드를 변경한 후 Error: OperationError 에러는 보이지 않는다. 해결된 것 같다.