amplify x Cognito(Auth)するときのlocalStorageのあたりを調べる #amplify

タイトルそのままです。
AmplifyでCognito使ってsign inしたときってデフォでlocalStorage使ってるみたいだけど、どんなタイミングで保存されてたりしてんのかとかを確認したいなと。

Amplifyのセットアップのあたりは下記の記事とか、他の方の記事とか、awsのチュートリアルとかをご覧くださいませ。

前提

amplifyがcliで設定されている
amplify add auth されていてCognitoが設定されている
amplifyのUIなどで認証の仕組みが導入されている

環境

Windows10Home
Windows Teminal + ubuntu18.04
node v14.1.0
npm 6.14.5
amplify cli 4.24.3

localStorage

こんな感じでwatchしてみる

App.vue

<script>
export default {
  name: 'App',
  created() {
    console.log('created')
    window.addEventListener('storage', this.storageEvent, false)
  },
  methods: {
    storageEvent(e){
      console.log('storage event')
      console.log(e)
    }
  }
}
</script>

SignIn時(cognitoのIDとかtokenとか丸出しだけど公開時には消すので平気）

storage event cjs.js:23:15
storage { target: Window, isTrusted: true, key: "CognitoIdentityServiceProvider.68ui1eqi4rvfk1659inn63uvbm.TestUser.idToken", newValue: "eyJraWQiOiJHa3BFb21xxx", url: "http://localhost:8080/", storageArea: Storage, srcElement: Window, currentTarget: Window, eventPhase: 2, bubbles: false, … }
cjs.js:24:15
storage { target: Window, isTrusted: true, key: "CognitoIdentityServiceProvider.68ui1eqi4rvfk1659inn63uvbm.TestUser.idToken", newValue: "eyJraWQiOiJHa3Bxxx", url: "http://localhost:8080/", storageArea: Storage, srcElement: Window, currentTarget: Window, eventPhase: 2, bubbles: false, … }
cjs.js:17:15
storage event App.vue:22
storage { target: Window, isTrusted: true, key: "CognitoIdentityServiceProvider.68ui1eqi4rvfk1659inn63uvbm.TestUser.idToken", newValue: "eyJraWxxx", url: "http://localhost:8080/", storageArea: Storage, srcElement: Window, currentTarget: Window, eventPhase: 2, bubbles: false, … }
App.vue:23
storage event

SignOut時

storage event cjs.js:23:15
storage { target: Window, isTrusted: true, key: "CognitoIdentityServiceProvider.68ui1eqi4rvfk1659inn63uvbm.TestUser.idToken", oldValue: "eyJraxxx", url: "http://localhost:8080/", storageArea: Storage, srcElement: Window, currentTarget: Window, eventPhase: 2, bubbles: false, … }
cjs.js:24:15
storage { target: Window, isTrusted: true, key: "CognitoIdentityServiceProvider.68ui1eqi4rvfk1659inn63uvbm.TestUser.idToken", oldValue: "eyJraxxx", url: "http://localhost:8080/", storageArea: Storage, srcElement: Window, currentTarget: Window, eventPhase: 2, bubbles: false, … }
cjs.js:17:15
storage event

だからどうしたって感じだなー。
当たり前だけどサインイン時に作られてアウト時に削除される。

SessionStorage

なお、aws-exports.js をこんな感じにするとsessionStorageに切り替えることもできた。

const awsmobile = {
    "aws_project_region": "ap-northeast-1",
    "aws_cognito_identity_pool_id": "xxxx",
    "aws_cognito_region": "ap-northeast-1",
    "aws_user_pools_id": "xxxx",
    "aws_user_pools_web_client_id": "xxxx",
    "oauth": {},
    "Auth": {
      storage: window.sessionStorage,
    },
};

しかし、localStorageに入れとく情報としてはけっこう危険な情報な気もしなくもない。
Amplify使ってgraphQL使ったりとかは、token漏れても情報的には痛くないような用途で使うのがいいんでしょうね。
あと閲覧可能な範囲をgraphQL+Cognitoでうまくフィルターする。
まあ、気を付けて使っていきましょう。

リソース削除

$ amplify remove auth
$ amplify push
$ amplify delete

deleteだけで全部消えるのかもしんない。