前回は、プロフィール画面を作成し、Firestore Storage にアバター画像を保存しました。

今回は、プロフィール画面で作成したユーザー情報を、Firestore Database に保存します。

前回作成した、handleSubmituploadBytesの後、画像の URL を取得するコードを作成します。

画像の URL を取得するために、firebase/storageからgetDownloadURLをインポートします。

import { ref, uploadBytes, getDownloadURL } from "firebase/storage"

getDownloadURLに前回設定したimageRefを指定します。

const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault()
  try {
    if (image) {
      const imageRef = ref(firestorage, image.name)

      uploadBytes(imageRef, image).then(() => {
        getDownloadURL(imageRef).then(url => {
          console.log(url)
        })
      })
    }
  } catch (err) {
    console.log(err)
    setError(true)
  }
}

画像を選択して、『保存』をクリックすると、

image2

画像の URL を取得できました。

次に、ユーザー情報と FIrebase Authentication を紐づけたいので、Authentication で uid を取得します。

hooks フォルダにユーザー情報を取得するフックを作成しましょう。

認証情報を取得するには、getAuthを使用します。

firebase/authからgetAuthをインポートしましょう。

import { getAuth } from "firebase/auth"

useAuth.js でuseUser関数を作成します。

getAuthで認証情報を取得しましょう。

export const useUser = () => {
  const auth = getAuth()
}

認証プロフィールを取得するために、authcurrentUserを指定します。

export const useUser = () => {
  const auth = getAuth()
  const user = auth.currentUser
}

userが存在する場合、emailaccessTokenを取得し、返します。

user存在しない場合、そのままuserを返しましょう。

export const useUser = () => {
  const auth = getAuth()
  const user = auth.currentUser

  if (user !== null) {
    const email = user.email
    const accessToken = user.accessToken

    const userInfo = {
      email,
      uid,
    }

    return { user: userInfo }
  } else {
    return { user }
  }
}

Profile.tsx で、useUserをインポートします。

const { user } = useUser()

userを console.log で確認すると、

image3

uidを取得することができました。

userからuidを取得しましょう。

const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault()
  try {
    const uid = user.user!.uid

    if (image) {
      const imageRef = ref(firestorage, image.name)

      uploadBytes(imageRef, image).then(() => {
        getDownloadURL(imageRef).then(url => {
          console.log(url)
        })
      })
    }
  } catch (err) {
    console.log(err)
    setError(true)
  }
}

最後に、Firebase Database へユーザー情報を保存するようにします。

以前作成した firebaseAppk の firestore を使用します。

const firestore = firebaseApp.firestore

どの Firebase Database に設定するため、firebase/firestoreからcollectionをインポートします。

import { collection } from "firebase/firestore"

collection に先程作成した firestore と Firebase Database に保存したい場所、今回は『users』を指定します。

try {
  const uid = user.user!.uid;
  const docRef = collection(firestore, "users");

  if (image) {
    const imageRef = ref(firestorage, image.name);

    uploadBytes(imageRef, image).then(() => {
      getDownloadURL(imageRef).then(url) => {
        console.log(url);
      });
    });
  }
} catch (err) {
  console.log(err);
  setError(true);
}

Firebase Database に保存する内容を設定するため、firebase/firestoreからaddDocをインポートします。

import { addDoc, collection } from "firebase/firestore"

addDocの第一引数に先程作成したdocRef、第二引数にnameimageuidを指定します。

imageには、urlを指定しましょう。

if (image) {
  const imageRef = ref(firestorage, image.name)

  uploadBytes(imageRef, image).then(() => {
    getDownloadURL(imageRef).then(async url => {
      await addDoc(docRef, {
        name,
        image: url,
        uid,
      })
    })
  })
}

image がない場合も、設定しておきましょう。

if (image) {
  const imageRef = ref(firestorage, image.name)

  uploadBytes(imageRef, image).then(() => {
    getDownloadURL(imageRef).then(async url => {
      await addDoc(docRef, {
        name,
        image: url,
        uid,
      })
    })
  })
} else {
  await addDoc(docRef, { name, image: "", uid })
}

では、動作確認してみましょう。

image4

『保存』をクリックすると、

image5

成功したメッセージが表示されました。

Firebase Database を確認すると、

image6

ユーザー情報を保存することができました。

次回は、プロフィール画面にデフォルトでユーザー情報を表示します。

ブログ一覧