How to restrict pages to logged in users only - reactjs

Question

I want to protect some urls so users can't access them without login in first. This is my Auth.js
export const AuthContext = React.createContext();
export const AuthProvider = ({ children }) => {
const [currentUser, setCurrentUser] = useState(null);
useEffect(() => {
firebase.auth().onAuthStateChanged(setCurrentUser);
}, []);
return (
<AuthContext.Provider
value={{ currentUser }}
>
{children}
</AuthContext.Provider>
);
};
And this is my App.jsx
function App() {
return (
<AuthProvider>
<Router>
<div>
<Route path="/citas" exact>
<CitasPage />
</Route>
<Route path="/citasDetalladas" exact>
<CitaDetallada />
</Route>
<Route path="/crearCita" exact>
<CrearCitasPage />
</Route>
<PrivateRoute path="/index" exact >
<Index />
</PrivateRoute>
</div>
</Router>
</AuthProvider>
);
}
export default App;
Since I'm new to React, I've been following a tutorial for doing the login and logout using Firebase and React, but it didn't help with this issue. Any ideas?

Answer 1

You can use this auth flow to protect routes from unauthenticated users.
I have created global context with maintain currentUser.
By this currentUser, routes are decided.
AuthProvider.js
import React, { createContext, useState, useEffect } from "react";
import firebase from "./firebase";
export const AuthContext = createContext();
export function AuthProvider({ children }) {
useEffect(() => {
setIsLoading(true);
firebase.auth().onAuthStateChanged((user) => {
if (user) {
setCurrentUser(user);
setIsLoading(false);
} else {
setIsLoading(false);
setCurrentUser(null);
}
});
}, [setCurrentUser, setRole, setIsLoading]);
return (
<AuthContext.Provider value={{ currentUser }}>
{children}
</AuthContext.Provider>
);
App.js
import React from "react";
import { HashRouter as Router } from "react-router-dom";
import { AuthProvider } from "./data/auth";
function App() {
return (
<AuthProvider>
<Router>
<Routes />
</Router>
</AuthProvider>
);
}
export default App;
Routes.js
import React, { useContext } from 'react'
import { Switch, Redirect, Route } from 'react-router-dom';
import { AuthContext } from "../data/auth";
const Routes = () => {
const { currentUser } = useContext(AuthContext);
if (currentUser) {
return (
<Switch>
<Route path='/dashboard' component={dashboard} />
<Route path='/report' component={report} />
<Route path='/profile' component={profile} />
<Redirect to='/report' />
</Switch>
)
} else {
return (
<Switch>
<Route path='/login' component={login} />
<Route path='/register' component={register} />
<Redirect to='/login' />
</Switch>
)
}
}
export default Routes;

Answer 2

You need to do something to determine whether the user is currently authenticated. I'm not sure exactly how firebase.auth() works but you need to check on each route (or use a higher-order component) whether the user is authenticated and if not, return <Redirect to='somewhereElse' />