仕事が一段落して、次の仕事を探してます。オファーは沢山有るけど、9割は書類落ち。何が悪いのか分からないです。まあ、この機会に趣味の勉強をしようと思って、React＋TypeScript＋Firebase認証のテストをすることにしました。
ログイン・サインアップは通常業務で使うのですが、私のサイトだと、そんな面倒くさいことしてユーザー拘束するのは嫌だったのでやってませんでした。
で、スクラッチで作るのも面倒だったので、コピペでできないかと色々ググってみたんですよ。
そしたら難点がいくつか。
・Reactの進化スピードが速すぎてサンプルコードが古く、動かない。
・説明が足りなくて、示されたコードをどのファイル名でどこにおいて良いか分からない
まず、React Routerという機能があります。ｖ6は現時点（2022/03/04）では資料が少なすぎてうかつに使えないことに気づきました。皆さん、ｖ5を使っているようです。
auth()がエラーになる件は
import firebase from "firebase/app";
は最新バージョンでは使えなくて、
import firebase from "firebase/compat/app";
にしなければいけない。
ということで解決。
認証コード（Auth Code)をどこにおけばいいかわからない。.envに書けとか、.env.localに書けとか書いてあるが、その性質上サンプルがGitHubになく、どういう書き方が正しくて、どこにおけばいいかわからない。
結局私は日本語サイトを参考にするのを止め、
を参考にしました。2021年5月なのでまだマシです。ただ、.envに認証コード書くのではないのでどうなのかな？
途中、App.tsxの改造について細切れで説明してますが、最後にフルの完成版があるのでいいです。
<Form.Row>とblockがエラーになるのはReactの仕様が変わっているので削除で対応。これから調べながら調整します。
やっとスタートに立てました。あとは、GoogleとTwitterのシングルサインオン機能を付けようと思ってます。
Googleでサインオンする方法はこちら。ただし、JavaScriptなので、ちょっと書き換える必要あり。
例えば、
<img src ={auth.currentUser!.photoURL} alt="" />型 ‘string | null’ を型 ‘string | undefined’ に割り当てることはできません。
型 ‘null’ を型 ‘string | undefined’ に割り当てることはできません。
と、出てしまう。TypeScriptの場合、以下の様にする。
<img src ={auth.currentUser!.photoURL as string} alt="" />こんな感じです。
わたしが作ってみたReact＋TypeScript＋firebaseでのGoogleとTwitter認証のコードは次ページにあります。
コメント