Created_routing_login_logout

client/src/App.js

@@ -1,4 +1,4 @@
-import { Route, Routes } from "react-router-dom";
+import { Route, Routes, Outlet, Navigate } from "react-router-dom";
 import { useEffect, useState } from "react";
 
 import About from "./pages/About";
@@ -10,13 +10,23 @@ import History from "./pages/History";
 
 const App = () => {
 	const [user, setUser] = useState();
+	const [isAuthenticated, setIsAuthenticated] = useState();
+	const [loading, setLoading] = useState(true);
+
+	const PrivateWrapper = () => {
+		return isAuthenticated ? <Outlet /> : <Navigate to="LandingPage" />;
+	};
+
+	const LoginWrapper = () => {
+		return !isAuthenticated ? <Outlet /> : <Navigate to="/" />;
+	};
 
 	useEffect(() => {
 		const fetchUser = async () => {
 			try {
 				const response = await fetch(
-					"http://localhost:3000/api/auth/login/success" ??
-						"/api/auth/login/success",
+					"/api/auth/login/success" ??
+						"http://localhost:3000/api/auth/login/success",
 					{
 						method: "GET",
 						credentials: "include",
@@ -40,13 +50,60 @@ const App = () => {
 		fetchUser();
 	}, []);
 
+	//useEffect for checking authentication used to work!
+	/*useEffect(() => {
+		const getProfile = () => {
+			user ? setIsAuthenticated(true) : setIsAuthenticated(false);
+			setLoading(false);
+		};
+		getProfile();
+	}, [user]);*/
+
+	//!!SETTING authentication using fetch and backend! Keep here please for possible use!!
+	useEffect(() => {
+		const fetchProfile = async () => {
+			try {
+				const response = await fetch(
+					"/api/auth/login/profile" ??
+						"http://localhost:3000/api/auth/login/profile",
+					{
+						method: "GET",
+						credentials: "include",
+						headers: {
+							Accept: "application/json",
+							"Content-type": "application/json",
+							"Access-Control-Allow-Credentials": true,
+						},
+					}
+				);
+				const json = await response.json();
+				const result = json;
+				setIsAuthenticated(result);
+				setLoading(false);
+			} catch (error) {
+				//console.log("error", error);
+				return error;
+			}
+		};
+		fetchProfile();
+	}, []);
+
+	if (loading) {
+		return <div className="App">Loading...</div>;
+	}
+
+	//wrappers for different safe and default routing
 	return (
 		<div>
 			{/* <Header /> */}
 			<Routes>
-				<Route path="/" element={<Home user={user} />} />
-				<Route path="/LandingPage" element={<LandingPage />} />
-				<Route path="/history" element={<History user={user} />} />
+				<Route element={<LoginWrapper />}>
+					<Route path="/LandingPage" element={<LandingPage />} />
+				</Route>
+				<Route element={<PrivateWrapper />}>
+					<Route path="/" element={<Home user={user} />} />
+					<Route path="/history" element={<History user={user} />} />
+				</Route>
 				<Route path="/about/this/site" element={<About />} />
 			</Routes>
 			{/* <Footer /> */}

client/src/Components/MainContent.js

@@ -109,9 +109,9 @@ const MainContent = () => {
 		} else if (value === content) {
 			alert("update text please");
 		} else {
-			let x = onAdd(content);
-			console.log(x);
-			console.log(content);
+			/*let x = onAdd(content);
+			console.log(x);*/
+			onAdd(content);
 			setContent(content);
 			setValue(content);
 		}
@@ -129,7 +129,7 @@ const MainContent = () => {
 	// async to the backend with fetch and post
 
 	const onAdd = async (content) => {
-		console.log(content);
+		//console.log(content);
 		try {
 			const response = await fetch("/api/corrections", {
 				method: "POST",
@@ -147,7 +147,7 @@ const MainContent = () => {
 			const result = data.msg.choices[0].message.content;
 			//enter you logic when the fetch is successful
 			setResponse(result);
-			console.log(data);
+			//console.log(data);
 		} catch (error) {
 			//enter your logic for when there is an error (ex. error toast)
 

client/src/Components/ProfileIcone.js

@@ -5,7 +5,10 @@ const ProfileIcone = ({ user }) => {
 	const [show, setShow] = useState(false);
 
 	const logout = () => {
-		window.open("http://localhost:3000/api/auth/logout", "_self");
+		window.open(
+			"/api/auth/logout" ?? "http://localhost:3000/api/auth/logout",
+			"_self"
+		);
 	};
 
 	return (

client/src/pages/History.js

@@ -105,7 +105,10 @@ const History = ({ user }) => {
 
 	return (
 		<>
-			<Header text="Refresh your memory with all your saved corrections" />
+			<Header
+				user={user}
+				text="Refresh your memory with all your saved corrections"
+			/>
 			<Container style={{ paddingBottom: "75px" }}>
 				<Row
 					className="m-0 my-5 d-flex justify-content-center"

client/src/pages/LandingPage.js

@@ -7,7 +7,10 @@ import gitIcon from "../assets/github.png";
 // import Header from "../Components/Header";
 const LandingPage = () => {
 	const github = () => {
-		window.open("http://localhost:3000/api/auth/github", "_self");
+		window.open(
+			"/api/auth/github" ?? "http://localhost:3000/api/auth/github",
+			"_self"
+		);
 	};
 
 	return (

server/api.js

@@ -23,6 +23,20 @@ router.get("/auth/login/success", (req, res) => {
 	}
 });
 
+//RETURN for the frontend authentication fetch method! Don't delete please!
+router.get("/auth/login/profile", (req, res) => {
+	try {
+		if (!req.session.user) {
+			res.json(false);
+			throw new Error("no profile");
+		} else {
+			res.json(true);
+		}
+	} catch (error) {
+		return error;
+	}
+});
+
 router.get("/auth/logout", (req, res) => {
 	req.session = null;
 	res.redirect("/LandingPage");

server/passport.js

@@ -21,8 +21,8 @@ passport.use(
 			clientID: process.env.GITHUB_CLIENT_ID ?? "",
 			clientSecret: process.env.GITHUB_CLIENT_SECRET ?? "",
 			callbackURLa:
-				"http://localhost:3000/api/auth/github/callback" ??
-				"api/auth/github/callback",
+				"/api/auth/github/callback" ??
+				"http://localhost:3000/api/auth/github/callback",
 		},
 		function (accessToken, refreshToken, profile, done) {
 			const user = {