いままでのまとめ。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のテナントは削除すると同じドメイン名で再作成できない。
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のユーザデータは nickname name 共に同じ値なのでscreen_name がない。欲しい場合はrulesで設定してKIAIで取って来る(上のrepoではそうなっている)
- https://community.auth0.com/t/twitter-nickname-is-not-the-same-as-screen-name/17297/8