//tips
初心忘れるべからず
//smart contract
Authによる初期登録を見直す。
Signupのフォームにusernameの登録も追加。
const [uname,setUname]=useState('')
Name
<TextField
onChange={(e)=>setName(e.target.value)}
variant="outlined"
color="secondary"
fullWidth
required
/>
その上でフォーム送信の際のhandleOnAuth(e)関数を確認。
const name=unameを追加。
createUserWithEmailAndPassword(auth,email,password)ではauthの方のデータベースに対応するので、
const docRef = await addDoc(colRef,{
userid:Maxid+1,
username:name,
date:Date.now(),
mail:email
})
こちらに追加するだけで良さそう。
Loginページに対しても同様の処理を行う。
きちんとサインアップができるようになったか確認。
const colRef= collection(firebaseApp, "mydata")
colRefが足りないとエラーが出たので追加。
keiyaku@gmail.com
keiyaku666
Uncaught (in promise) FirebaseError: Firebase: Error (auth/invalid-email).とエラーができたが、先の登録の際にauthへの登録は完了し、firestoreのデータベース登録はエラーで完了していなかったのが問題となったよう。
データベースを確認するとなぜかmail部分が取得できていない。
const docRef = await addDoc(colRef,{
userid:Maxid+1,
username:name,
date:Date.now(),
mail:email
})
Auth、storeデータベースの登録情報を削除し、再度登録し直す。
双方の問題をなくすと無事に登録が完了できた。
続いてloginページの登録を確認する。
きちんと対応できた。
サインアップ後にはHOMEページに遷移させるようにする。
router.push(‘/‘)を追加。
indexページにはlogin nameをHi,~で表示させる。
useeffectに下記を追加。
if(localStorage.getItem('username')){
setShowname(localStorage.getItem('username'))
}
下記の形で表示できた。
<Typography variant="h4" component="h1" style={{color: '#99ccff'}} gutterBottom>
{showname&&
<div>Hi,{showname}</div>
}
<br />
Welocome to ItsmE
<br />
Recreate yourselves and Connect the world
<br /> <br />
</Typography>
Board内の[id]に戻り、const [showname,setShowname]=useState(‘’)とuseeffectでの読み込み設定を行う。
handleOnAddcomments(e)の名前の追加部分をこちらで保管。
await updateDoc(Ref, {
text: arrayUnion({chat:details,username:showname})
})
