いままでのまとめ。auth0をterraformでコード化し、auth0-spa-js でSPAで使うことができたので、そこにAPI Gatewayを追加して自分のアプリで使う。
https://qiita.com/celeron1ghz/items/2e901694859940615307
https://qiita.com/celeron1ghz/items/430bdf46de4936e310a2
完成したrepositoryは以下の通り。
手順
1. auth0のテナント作成
auth0でテナント作成。tfファイルは server/terraform/ にある。
トークンを取得後、環境変数を設定し、tfファイル内の application_domain を書き換え、 で terraform apply
詳しくは https://qiita.com/celeron1ghz/items/2e901694859940615307 を参照。
2. API Gatewayを作成
ファイルは server/ にある。
handler.js 内の AUTH0_DOMAIN を自分のauth0のドメインに書き換え、serverless deploy
3. clientのreactを作成
ファイルは client/ にある。
src/App.tsx にある AUTH0っぽい変数を自分のauth0のものに合わせて yarn start
はまりどころや気づきなど
- 散々悩んだ挙句に、大体ドキュメントやクラメソさんの記事に正解が書いてある。よく読め。
- Reactで
localhostで開発するとauth0でどうにもできないエラーが出るっぽいので、最初からngrokでhttpsにしたほうが良い。 - ngrokは
Ctrl-Cで落とした後に再度起動するとURLが変わるが、auth0ログイン時に指定するcallback URLと、auth0 applicationの設定にあるallow originの設定を合わせるのを忘れがち。- 開発を始める際にURL書き換えを忘れないように。
- 通常auth0でログインすると明示的にログアウトするまではログイン状態が維持されるが、おそらくドメインを変えるとログインは出来るが再読み込みするとログインが維持されていない状況になる模様。
- 基本はドメインを変えないほうがいいっぽい。
- 開発の時にドメイン変わっちゃう場合はauth0のuserタブでログインしたユーザを消すと直る。
- 今回は普通のlambda functionにcustom authorizerをつける形にしているが
serverless.ymlに指定するarnは文字列にしないといけない-
Fn::GetAtt: [AuthorizerLambdaFunction, Arn]みたいに指定すればいけるはずだがdeploy時にエラーになる。のでarn:aws:lambda:ap-northeast-1:0000000000:function:aws-auth0-test-dev-authorizerのように文字列で指定しないとダメな模様。 - https://forum.serverless.com/t/dynamic-arn-to-cognito-authorizer/2161
-
-
auth0のテナントは削除すると同じドメイン名で再作成できない。
- 開発用だから良かったけど本番用だったら泣いていた
- まっさら状態に戻すツールがあるので必要な場合は使おう（自分は未検証）
- https://auth0.com/docs/support/delete-reset-tenant#delete-vs-reset
-
custom authorizerで後段に渡す時、データ構造はフラットじゃないとダメ。
- https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/api-gateway-lambda-authorizer-output.html
- 自分で作ってなくても、auth0から取得した情報にarrayが入ってたりするので注意。
- めんどくさいのでJSON serializeしてbase64にするのが良い(上のrepoではそうなってる)
-
auth0から取得するtwitterのユーザデータは
nicknamename共に 同じ値なのでscreen_nameがない。欲しい場合はrulesで設定してKIAIで取って来る(上のrepoではそうなっている)