I need assistance with retrieving the username of the user during authentication using Firebase Github Auth. I am able to access all user information except for the username. Below is the code snippet:
import React, { useState, useContext, createContext, useEffect } from "react"
import { auth, createUserProfileDocument } from "../config/fbConfig"
const AuthContext = createContext()
export const useAuth = () => {
return useContext(AuthContext)
}
export const AuthProvider = ({ children }) => {
const [currentUser, setCurrentUser] = useState(null)
const provider = new auth.GithubAuthProvider()
provider.addScope("read:user")
const githubSignIn = () => {
return auth().signInWithRedirect(provider)
}
const githubSignOut = () => {
return auth().signOut()
}
useEffect(() => {
const unsubscribe = auth().onAuthStateChanged(async (userAuth) => {
// setCurrentUser(user);
if (userAuth) {
const useRef = await createUserProfileDocument(userAuth)
useRef.onSnapshot((snapShot) => {
console.log(snapShot)
setCurrentUser({
id: snapShot.id,
...snapShot.data(),
})
})
} else {
setCurrentUser(userAuth)
}
})
return unsubscribe
}, [])
const value = {
currentUser,
githubSignIn,
githubSignOut,
}
return <AuthContext.Provider value={value}> {children} </AuthContext.Provider>
}
Code snippet from fbConfig.js file:
export const createUserProfileDocument = async (userAuth) => {
if (!userAuth) return
const userRef = firestore.doc(`users/${userAuth.uid}`)
const snapShot = await userRef.get()
if (!snapShot.exists) {
const { email, photoURL, providerData } = userAuth
const createdAt = new Date()
getGitHubUserData(providerData[0].uid)
.then(async (gitHubUserData) => {
const username = gitHubUserData.login
try {
await userRef.set({
email,
photoURL,
createdAt,
displayName: providerData[0].displayName,
username,
})
} catch (error) {
console.log(error.message)
}
})
.catch((err) => console.error("Don't forget error handling: ", err))
}
return userRef
}
Requesting assistance from anyone who can help me resolve this issue.