Método para definir rotas privadas

stag.io/src/App.js

@@ -1,21 +1,43 @@
 import "./App.css";
 import { Routes, Route, Navigate } from "react-router-dom";
+import { Children, useContext } from "react";
 
 import Inicio from "./pages/Inicio/Inicio";
 import CadastroCandidato from "./pages/Cadastro/cadastroCandidato";
 import CadastroEmpresa from "./pages/Cadastro/cadastroEmpresa";
-import {AuthProvider} from "./contexts/auth"
+import {AuthProvider, AuthContext} from "./contexts/auth";
+
 
 
 
 function App() {
+
+  //Função para definir as rotas privadas do navegador, para utiliza-la basta colocar <Private></Private>
+  const Private = ({children}) => {
+    const {authenticated, loading} = useContext(AuthContext);
+
+    if(loading){
+      return <div className="loading">Carregando...</div>;
+    }
+
+    if(!authenticated){
+      return <Navigate to="/" />
+    }
+
+    return children
+  }
+
   return (
     <div className="App">
       <AuthProvider>
         <Routes>  
 
         <Route path="/" element={<Inicio/>}></Route>
-        <Route path="/cadastroCandidato" element={<CadastroCandidato/>}></Route>
+        <Route path="/cadastroCandidato" element={
+          //<Private>
+            <CadastroCandidato/> //Exemplo de uso da função Private
+          //</Private> 
+        }></Route>
         <Route path="/cadastroEmpresa" element={<CadastroEmpresa/>}></Route>
 
         </Routes>

stag.io/src/contexts/auth.jsx

@@ -1,28 +1,48 @@
-import React, {createContext, useState} from "react";
+import React, {createContext, useEffect, useState} from "react";
 import { useNavigate } from "react-router-dom";
 
 export const AuthContext = createContext();
 
 export const AuthProvider = ({children}) => {
     const [user, setUser] = useState(null);
     const navigate = useNavigate();
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+      const recoveredUser = localStorage.getItem("user");
+
+      if(recoveredUser){
+        setUser(JSON.parse(recoveredUser));
+      }
+
+      setLoading(false);
+    }, []);
 
     const login = (cpf, password) => {
       console.log("login auth", {cpf, password});
 
+      const loggedUser = {
+        id: "123",
+        cpf,
+      };
+
+      localStorage.setItem("user", JSON.stringify(loggedUser));
+
       if(password === "secret"){ //Senha para verificar a validação de login
         console.log("Vc descobriu a senha secreta!");
-        setUser({id:"123", cpf});
+        setUser(loggedUser);
         navigate("/cadastroCandidato"); //Mudar a página de destino quando for unir o Front-end
       }
     };
     const logout = () => {
       console.log("logout");
+      localStorage.removeItem("user");
       setUser(null);
+      navigate("/");
     };
 
     return(
-        <AuthContext.Provider value={{authenticated: Boolean(user), user, login, logout}}>
+        <AuthContext.Provider value={{authenticated: Boolean(user), user, loading, login, logout}}>
             {children}
         </AuthContext.Provider>
     )