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

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

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

https://qiita.com/ikegam1/items/860f56ed81cac86f5f68

## 前提

- 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してみる

```vue: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,
    },
};
```

![vuetop.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308709/c2aa51c2-359b-72dc-438f-94a007dff2fe.png)

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

## リソース削除

```
$ amplify remove auth
$ amplify push
$ amplify delete
```

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