auth0-reactを利用してauth0連携してみた
作ってみようとおもったきっかけ
auth0を利用するにあたって忘備録を残しておきたいなと思いました。
必要最低限の構成
今回は最低限の枠組みを作る程度にとどめています。理由としては、auth0-reactを利用する際にどのPJでも流用できるようにと考えています。そのため認可制御は特に行っていません。※認可制御は別記事で出そうかなとか思ってますがもしかしたら追記するかもしれません。
auth0側の設定
公式を参考にauth0にログインしてアプリケーションをたてる
今回はSPAによる実装を参考にしています。
next.jsによる構築や、javaアプリケーションなどはRegular Web Applicationになります。
SPAにあたっては以下項目にドメイン設定してあげればOK
- Allowed Callback URLs
- Allowed Logout URLs
- Allowed Web Origins
異なる言語のアプリケーションから呼ぶ場合はそれに応じてカンマ区切りで設定することも可能です。
なお認可制御を行いたい場合は別途設定する必要があります。
react側の設定
こちらも公式を参考に実装していますが、以下の動きを担保するのみとしています。
- 認証されていない場合はかならずauth0認証画面にとばす。
- ログイン後の遷移先は/（場合に応じて変更可）
- ログアウト後は1の動き
viteで構築しています。構成はそのままでルーティングと認証制御のみ加えてます。
コンポーネント構成は以下。
- 認証制御用コンポーネント
- ルーティング用コンポーネント
- 非認証時にauth0認証画面にとばす用のコンポーネント
特定のルーティング先だけは認証外としたいとかであれば、リダイレクト制御におけるコンポーネント対象を分離すればよいかなと思います。
最後に
SPAに沿うととても簡単に実装できますが、ネットワークの動きを確認するとcookie情報をもとにauth0に毎度GETリクエストを飛ばしています。商用利用するにあたって従量課金制とかだったらその負荷とか考慮する必要がある気がしてます。回避策としてはcookieとセッションの仕組みを利用して有効期間が切れたら～なよくある制御をするだと思いますが、そうするとそもそもの構築をRegular Web Applicationに沿って行わないといけない訳で。。。そうなるとnext.js等を利用したクライアントーサーバを構築するしかないのかな。。。？
Discussion