I’m creating a new account in Signup.tsx and redirecting to the dashboard after success, this way
try {
await auth.createUserWithEmailAndPassword(
emailRef.current!.value,
passwordRef.current!.value,
);
const user = firebase.auth().currentUser;
await user?.updateProfile({
displayName: nameRef.current?.value
})
navigate('/dashboard')
} catch (error) {
console.error(error);
}
}
And google auth is managed this way, googleAuth.tsx
import { auth, provider } from "../../../firebaseSetup";
import { NavigateFunction, useNavigate } from "react-router-dom"
const GoogleAuth = async(navigate: NavigateFunction) => {
auth.signInWithPopup(provider).then(() => {
if (auth.currentUser?.metadata?.creationTime !== auth.currentUser?.metadata?.lastSignInTime)
{
navigate('/dashboard');
}
else{
navigate('/welcome')
}
}).catch((error) => {
console.log(error.message)
})
}
export default GoogleAuth
And in my dashboard’s navbar, I’m displaying the current user’s display name and profile pic if logged in via google this way
sidebar.tsx
import { auth } from "../../firebaseSetup";
export default sidebar(){
const pic = auth.currentUser?.photoURL
return(
<Text>{auth.currentUser?.displayName}</Text>
<Avatar size={'sm'} src={pic}/>
)
}
All this works perfectly fine when users sign-in/up for the first time i.e that is when they are redirected from the landing page, but if the user refreshes or moves to another route, both text and avatar go blank.
I tried printing using
console.log(auth.currentUser?.displayName)
It returns the correct name the first time, but on refreshing it prints undefined
.
I looked up and figured I need to be using useState
and useEffect
to manage current users, which I tried and failed. Can anyone tell me how do I retain the users name even on refreshing