My current project involves using React js in combination with Firebase authentication to verify users on a web application. I am utilizing the createUserWithEmailAndPassword and signInWithEmailAndPassword functions for user creation/sign-in, as well as the onAuthStateChanged function to retrieve the current user's information.
Everything works smoothly when a user creates an account or signs in and then refreshes the browser page while online. However, if the user has created an account but goes offline before refreshing the page, the app encounters an error like this:https://i.stack.imgur.com/D9l98.jpg
I attempted to handle this error by implementing the following code, but it did not yield any results:
useEffect(() => {
let unsubscribe
try{
unsubscribe = firebaseApp.auth().onAuthStateChanged( userInfo => {
if(userInfo){
const {uid:userId,email,displayName}=userInfo.multiFactor.user
dispatch( setUser({userId,email,displayName}))
}
})
}catch(err){
console.log(err);
setError('You may are offline or have bad internet')
}
return unsubscribe
}, [])
I also tried the recommended approach for handling errors as stated in the Firebase documentation, but unfortunately, it did not work either:
useEffect(() => {
const unsubscribe = firebaseApp.auth().onAuthStateChanged( userInfo => {
if(userInfo){
const {uid:userId,email,displayName}=userInfo.multiFactor.user
dispatch( setUser({userId,email,displayName}))
}
},err=>console.log(err))
return unsubscribe
}, [])
Although I reviewed the Firebase documentation regarding (auth/internal-error), I found the explanation unclear on how to properly catch and manage this type of error. Can anyone provide assistance?