はじめに
Azure Static Web Apps登場以降、細々と勉強しています。その中で、Azure Static Web Appsの認証と承認という以下の記事が気になりました。
ちょっとやってみようかなと思ったのですが、その前にReactでの認証機能ってどうやって実装するんだろうと思ってしまいました。そのため、まずはReactの理解を含めるために簡単な認証付きのアプリを作ってみることにしました。
やってみる
何かいいサンプルないかなと思って探してみたら、以下のQiitaの記事が良さそうだったのでまずはこの記事をベースに進めていくことにしました。
サクサクと進めていくことができたのですが、Reactの部分でTypeScriptのエラーなどが出てきてどうにもこうにも前に進みませんでした。
よくよく調べてみると、使われているライブラリのバージョンアップが数多くあり、その影響でうまく動かないことがわかりました。
とりあえず動かすには以下のライブラリを更新することで対応しました。
js-cookie
を^2.2.6
に(作業時点では^3.0.1
になっていた)axios
を^0.21.1
に(作業時点では^0.26.0
になっていた)react-router-dom
を^5.2.0
に(作業時点では^6.2.1
になっていた)react-scripts
を4.0.3
に(作業時点では5.0.0
になっていた)web-vitals
を^1.0.1
に(作業時点では^2.1.4
になっていた)
本当はバージョン変更に伴う仕様変更を調べて対応すべきなんでしょうが、まずは動くものを作るところから...
とりあえず動く版は以下のものです。