todo-app つくった (auth 編)

https://user-images.githubusercontent.com/1157309/60028163-ce04c700-96d9-11e9-936f-2ce6ba79944c.png

  • 全ページ(まだ1ページしかないけど...)、ログインしていないとみれないようにした。 Amazon Cognito の UserPools を用いて、ここからのみユーザ登録は可能という設定

API

  • JWTの署名をチェックして、直接API を叩かれるのをはじく
  • JWK (JSON Web Key) は https://cognito-idp.{region}.amazonaws.com/{userPoolId}/.well-known/jwks.json に置かれている

クライアント側

  • aws-amplify のSDKを用いれば数行でおわり
  • Typescript 用に、declare module "aws-amplify-react"; などしてあげればエラー消せる
  • User Poolが発行するJWT (id_token が localStorage に保存されている) を Authorizationヘッダに入れて、APIをよぶ

ログイン後の画面

https://user-images.githubusercontent.com/1157309/60028199-e1b02d80-96d9-11e9-8dd4-73db98c12bf5.png

diff

merge なし

github.com

これから

  • current_user のみのコンテンツ出すとかやる
  • UserPools で Google とのヒモ付もできるっぽいのでやってみる
  • react-router などで、public・private のページを分けれるようにしたい
  • ユーザ情報をどこでも使えるようにするには redux なども使った方がいいのか?も
  • firebase の方がいいのかな?