//tips
//smart contract
Authでの登録後のログアウト、そしてログインの実装を行なっていく。
まずはsignoutから。importでsignout機能も加え、イベント機能を実装。
import {
getAuth,
createUserWithEmailAndPassword,
signOut
} from "firebase/auth"
async function handleOnAuthOut(e) {
e.preventDefault();
console.log('out')
signOut(auth)
.then(()=>{
console.log('signed out')
})
}
Logout
<Box textAlign="center">
<Button
type="submit"
varient="contained"
onClick={handleOnAuthOut}
>
submit
</Button>
</Box>
こちらできちんとボタンクリック後にログアウトできた。
続けてsignInWithEmailAndPasswordをimport。
先の登録と同様に下記のように作成。
async function handleOnAuthIn(e) {
e.preventDefault();
console.log('aiu')
const email=umail
const password=upass
signInWithEmailAndPassword(auth,email,password)
.then((cred)=>{
console.log('user loged in:',cred.user)
setUmail('')
setUpass('')
})
Login
<form noValidate autoComplete="off" onSubmit={handleOnAuthIn}>
Mail
<TextField
onChange={(e)=>setUmail(e.target.value)}
variant="outlined"
color="secondary"
fullWidth
required
/>
Pass
<TextField
onChange={(e)=>setUpass(e.target.value)}
variant="outlined"
color="secondary"
fullWidth
required
/>
<Box textAlign="center">
<Button
type="submit"
varient="contained"
onClick={()=>console.log('aa')}
>
submit
</Button>
</Box>
</form>
この内容でログインし直す。
下記で登録したものにログインし直す。
naki@gmail.com
naki123
無事に入ることができた。
ただ不思議なのはcreateUserWithEmailAndPasswordで登録された情報はどこに保存されるのかということ。
これは見事にfirebaseのAuthenticationのusersリストの中に情報が入っていた。
認証中であれば自身のeditページへ遷移可能にする。
その場合には登録emailと同じ登録emailページを探して表示するようにする。とするとデータベースの方へのmailの設定はマストになるか。
また、この場合emailで検索したuseridを取得し、http://localhost:3000/ID/[id]/editの[id]部分に代入させる必要がある。
その前にこのauthでCORS エラーが解消されるようになったかを確認する。
https://zenn.dev/ryo_kawamata/articles/cors-on-firebase-functions
https://stackoverflow.com/questions/42755131/enabling-cors-in-cloud-functions-for-firebase
https://firebase.google.com/docs/functions/http-events
下記が一番わかりやすそう。
https://github.com/firebase/functions-samples/tree/main/authorized-https-endpoint
const cors = require("cors")({ origin: true });
export const foo = functions.https.onRequest((req, res) => {
res.set("Access-Control-Allow-Origin", "*");
res.send({
data: "foo"
});
});
もしかしたらproviderなどを使う必要があるかもしれないのでこちらも目を通した。
https://zenn.dev/wattanx/articles/1b8d4b7b92a237
ログイン状態でhttp://localhost:3000/ID/1/editの中に入り、カードのhandleDeleteのボタンをクリックするも動作せず。
クリックしたところNoteCard内での受け渡しは問題なくできているようで、<IconButton onClick={()=>console.log('hi1'+note.id)}>ではきちんとhi110と表示された。note.idの番号もきちんと抜き出せている。
deleteDoc(docRef).then(()=>{console.log("deleteDoc(docRef)”)})としたところdeleteDoc(docRef)はログとして吐き出された。にもかかわらずデータベースから削除はされていない。
const handleDelete=async(id)=>{
//e.preventDefault()
console.log('Delete')
console.log(id)
const docRef=doc(firebaseApp,"mydata",id.toString())
//const docRef=doc(firebaseApp,"mydata",id)
console.log(docRef)
deleteDoc(docRef).then(()=>{console.log(deleteDoc(docRef))})
もしかしたらドキュメントの中のidではなくドキュメント番号そのものなのかもしれないと思い、
const docRef=doc(firebaseApp,"mydata","4")
で実行。
見事に消滅した。
ドキュメント番号のことだったか。
ドキュメント番号の取得仕方を確認する。
const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
});
このような表記を見ているとdoc.idで取得できそうなので、getstaticpropsにconsole.log('doc.id',doc.id)を追加して確認。
きちんと取得できていた。なのでdoc.idを取得する。
pile.docid = doc.id ?doc.id:null
また、カードでそちらの変数を受け取れるように設定。
action={
<IconButton onClick={()=>handleDelete(note.docid)}>
これできちんとクリックしたら消せるようになった。
ただ、更新ボタンを押さないといけないので再度リダイレクトさせて更新させる。
リアルタイム表示もできるが重くなりそうなので、router.reload()での再表示を代用する。
deleteDoc(docRef).then(()=>{router.reload()})
