'Adding new user information from Firebase v8 to v9

I have a code to create user with image and username to Firebase v8 and I can't replace it to Firebase v9.

Can someone help me? Thank you!

    import { useState, useEffect } from 'react'
    import { projectAuth, projectStorage, projectFirestore } from '../firebase/config'
    import { useAuthContext } from './useAuthContext'
    
    export const useSignup = () => {
      const [isCancelled, setIsCancelled] = useState(false)
      const [error, setError] = useState(null)
      const [isPending, setIsPending] = useState(f`enter code here`alse)
      const { dispatch } = useAuthContext()
    
    
          // upload user thumbnail
          const uploadPath = `thumbnails/${res.user.uid}/${thumbnail.name}`
          const img = await projectStorage.ref(uploadPath).put(thumbnail)
          const imgUrl = await img.ref.getDownloadURL()
    
          // add display AND PHOTO_URL name to user
          await res.user.updateProfile({ displayName, photoURL: imgUrl })

Solution 1:^[1]

import {st, db} from '../firebase/config'
import { getDownloadURL, ref, uploadBytesResumable } from 'firebase/storage';
import { doc, setDoc } from 'firebase/firestore';

const _storageRef = ref(st, "thumbnails/" + res.user.uid + "/" + thumbnail.name)
const _uploadTask = uploadBytesResumable(_storageRef, file);

_uploadTask.on("state_changed", (snapshot) => {
    console.log((snapshot.bytesTransferred/snapshot.totalBytes) * 100)
},(error) => {
    console.error(error)
}, async () => {
    await getDownloadURL(_storageRef)
          .then((url) => {
               //update database with the new image url
               console.log(url)
               //setDoc(doc(db, "users", uid), {
               //      photoURL: url
               //   }, {merge: true}) <- to not erase the rest of the values like displayName
          })
           .catch(error => console.error(error))
})

Solution 2:^[2]

The documentation has examples of both V8 (namespaced) and V9 (Modular) syntax. You can just switch to modular tab for reference. For this case, try refactoring the code as shown below:

import { ref, uploadBytes } from "firebase/storage"
import { updateProfile } from "firebase/auth"

const storageRef = ref(projectStorage, `thumbnails/${res.user.uid}/${thumbnail.name}`);

// 'file' comes from the Blob or File API
// uploadBytes() instead of .put()
uploadBytes(storageRef, file).then(async (snapshot) => {
  console.log('Uploaded a blob or file!');

  // updateProfile() is now a top-level function
  // and not a method on User object
  await updateProfile(res.user, {
    displayName: name
  });
  console.log("User profile updated")
});

Also do ensure that you've initialized auth and storage using getAuth() and getStorage() respectively.

Checkout:

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2

'Adding new user information from Firebase v8 to v9

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]