In the process of developing a private route component that restricts unauthenticated users and redirects them to the homepage, we encountered an issue upon page refresh. The problem arises when the current user variable momentarily becomes null after a refresh, triggering a redirect back to the main page. Consequently, every time a user refreshes the page, they are redirected to the main page and have to sign in again, despite being previously signed in.
// Authentication context
const history = useHistory();
const location = useLocation();
const [currentUser, setCurrentUser] = useState<null | any>(null);
const [currentClient, setCurrentClient] = useState<null | any>(null);
const [loading, setLoading] = useState<boolean>(false);
const context = useContext(exercisesContext);
const _miscContext = useContext(miscContext);
console.log(_miscContext);
useEffect(() => {
setLoading(true);
// with unsubscribe logic !!
//const unsubscribe =
onAuthStateChanged(auth, (user: any) => {
console.log(user, 'test................................');
// if (!user?.email_verified) {
// _miscContext.SetSnackBarMsg(true, 'Please verify your email');
// return;
// }
setCurrentUser(user);
setLoading(false);
});
//return unsubscribe();
}, []);
const Signin = (email: string, password: string) => {
signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
const { user } = userCredential;
console.log(userCredential.user.emailVerified, 'pppppppp');
if (!user.emailVerified) {
_miscContext.SetSnackBarMsg(true, 'Please verify your email');
return;
}
// Signed in
//const user = userCredential.user;
//if (user) {
history.push('/createtraining');
// }
})
.catch((error) => {
const errorCode = error.code;
console.log(errorCode);
});
};
const Signup = async (email: string, password: string, userType: string) => {
await createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
//email_verified;
setDoc(doc(db, 'Data', userCredential.user.uid), {
createdAt: Timestamp.now(),
});
sendEmailVerification(userCredential.user);
_miscContext.SetSnackBarMsg(true, 'Please check your email');
})
.catch((error) => {
const errorCode = error.code;
//const errorMessage = error.message;
console.log(errorCode);
if (errorCode === 'auth/weak-password') {
_miscContext.SetSnackBarMsg(true, 'Password must be at least 6 charechters.');
history.push('/');
}
if (errorCode === 'auth/email-already-in-use') {
_miscContext.SetSnackBarMsg(true, 'Email already exists.');
history.push('/');
}
});
_miscContext.SetModal(true, '', 'unit');
};
return (
<authContext.Provider
value={{
currentUser,
currentClient,
loading,
Signin,
Signup,
}}
>
{children}
</authContext.Provider>
);
};
// Private route component
import React, { useContext } from 'react';
import { Redirect, Route } from 'react-router-dom';
import { authContext } from '../context/auth/AuthState';
interface Props {
component: any;
exact: any;
path: any;
}
export const PrivateRoute: React.FC<Props> = ({ component: Componenet, ...rest }) => {
const _authContext = useContext(authContext);
const { currentUser, loading } = _authContext;
console.log(currentUser);
return <Route {...rest} render={(props) => (!currentUser && !loading ? <Redirect to='/' /> : <Componenet />)} />;
};