private routing v6 react - reactjs

Question

I am trying to implement private routing to my react web application. I have a login, a sign app and a home page, and i want the user to access the homepage only if he is logged in or signed in. I am using Firebase authentication.
I know that my private route component is wrong but because i am new i don't know how to fix it.
I get the error that currentuser is undefined.
Thank you!
PrivateRoute.js
export default function PrivateRoute({ children }) {
const currentUser = useAuth()
console.log(currentUser.email)
return currentUser ?(
<Navigate to="/home" />
) : (
<Navigate to="/signin" />
);
App.js
function App() {
return (
<Routes>
<Route restricted={true} path='/signin' element={<SignInSide/>}/>
<Route
path="/home"
element={
<PrivateRoute>
<Home/>
</PrivateRoute>
}
/>
<Route path='/signup' element={<SignUpside/>}/>
</Routes>
useAuth function in firebase.js
// Initialize Firebase
export const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export function useAuth() {
const [ currentUser, setCurrentUser ] = useState();
useEffect(() => {
const unsub = onAuthStateChanged(auth, user => setCurrentUser(user));
return unsub;
}, [])
return currentUser;
}

Answer 1

Your PrivateRoute component does not make sense, since it is not using the children prop. You should either redirect to the signin page when you don't have a user, or display the children, when you have a user, isn't it ?
It could look like this :
export const PrivateRoute = ({ children }) => {
const currentUser = useAuth()
return currentUser ? children : <Navigate to="/signin" />;
};
However, your error doesn't come from the router, but rather from your useAuth hook it seems. Initially, your user is undefined, so it is normal that you get an error saying this.
If you want to logout the email of the user, try to do the following instead:
if(currentUser)
console.log(currentUser.email)
This way, it will not be undefined.
Furthermore, there is no restricted prop in the Route component of react-router, in the v6.
I hope it solves your issue, otherwise please provide a reproducible example, so it is easier to locate the issue you are facing.

Answer 2

I actually found the problem.
i needed to use context provider and then wrap the app with it
export const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
const [currentUser, setCurrentUser] = useState(null);
const [pending, setPending] = useState(true);
useEffect(() => {
auth.onAuthStateChanged((user) => {
setCurrentUser(user)
setPending(false)
});
}, []);
if(pending){
return <>Loading...</>
}
return (
<AuthContext.Provider
value={{
currentUser
}}
>
{children}
</AuthContext.Provider>
);
};