Merge pull request #185 from HarK-github/pr-public-route

 Added check for authenticated users access to public pages

Author: sumagnadas

app/src/App.jsx

@@ -23,6 +23,7 @@ import Dashboard from "./components/discussion-forum/dashboard.jsx";
 import { SidebarProvider } from "./components/ui/sidebar.jsx";
 import { ThemeProvider } from "@/Context/ThemeProvider.jsx";
 import { NavMenu } from "./components/NavMenu";
+import PublicRoute from "./Context/PublicRoute";
 import ContestCalendar from "./components/ContestCalendar";
 
 const BACKEND = import.meta.env.VITE_BACKEND;
@@ -95,8 +96,9 @@ function App() {
             <div className="App bg-background w-full">
               <NavMenu />
               <Routes>
-                <Route exact path="/register" element={<Register />} />
-                <Route exact path="/login" element={<Login />} />
+
+                <Route exact path="/register" element={<PublicRoute><Register /></PublicRoute>} />
+                <Route exact path="/login" element={<PublicRoute><Login /></PublicRoute>} />
                 <Route
                   exact
                   path="/leetcoderankingsccps"

app/src/Context/AuthContext.jsx

@@ -1,4 +1,4 @@
-import { createContext, useState, useContext } from "react";
+import { createContext, useState, useContext, useEffect } from "react"; // add useEffect
 import { jwtDecode } from "jwt-decode";
 import { useNavigate } from "react-router-dom";
 import {
@@ -28,12 +28,24 @@ export const AuthProvider = ({ children }) => {
     authTokens ? jwtDecode(authTokens.access) : null,
   );
   const navigate = useNavigate();
- const [loading] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const isAuthenticated = Boolean(authTokens?.access);
   let [userNames, setUserNames] = useState(
     localStorage.getItem("userNames")
       ? JSON.parse(localStorage.getItem("userNames"))
       : null,
   );
+  useEffect(() => {
+  if (authTokens) {
+    setUser(jwtDecode(authTokens.access));
+  } else {
+    setUser(null);
+  }
+  setLoading(false);
+}, [authTokens]);
+
+
   let getUsernamesData = async (authToken) => {
     let usernames_response = await fetch(BACKEND + "/userDetails/", {
       method: "GET",
@@ -227,6 +239,7 @@ export const AuthProvider = ({ children }) => {
   let contextData = {
     user: user,
     authTokens: authTokens,
+    isAuthenticated, 
     loginUser: loginUser,
     registerUser: registerUser,
     logoutUser: logoutUser,
@@ -238,6 +251,7 @@ export const AuthProvider = ({ children }) => {
     loading,
     userNames: userNames,
   };
+  
   // useEffect(() => {
 
   //     const token = async (username) => {

app/src/Context/PublicRoute.jsx

@@ -0,0 +1,23 @@
+// PublicRoute.jsx
+import { Navigate } from "react-router-dom";
+import { useAuth } from "./AuthContext.jsx";
+
+const PublicRoute = ({ children }) => {
+  const { isAuthenticated, loading } = useAuth();
+  
+  if (loading) {
+    return (
+      <div className="flex h-screen items-center justify-center">
+        <div>Loading...</div>
+      </div>
+    );
+  }
+  
+  if (isAuthenticated) {
+    return <Navigate to="/" replace />;
+  }
+  
+  return children;
+};
+
+export default PublicRoute;

app/src/components/Login.jsx

@@ -3,6 +3,7 @@ import { useSidebar } from "@/components/ui/sidebar";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
+import { useEffect } from "react"; 
 
 import { Button } from "@/components/ui/button";
 import {
@@ -26,20 +27,48 @@ const FormSchema = z.object({
 });
 
 const Login = () => {
-  let { SignInWithGoogle, loginUser } = useAuth();
+  let { SignInWithGoogle, loginUser, isAuthenticated, loading } = useAuth(); // Get isAuthenticated and loading
   const { open, isMobile } = useSidebar();
   const navigate = useNavigate();
+   
+  useEffect(() => {
+    if (isAuthenticated && !loading) {
+      navigate("/");
+    }
+  }, [isAuthenticated, loading, navigate]);
+
   const form = useForm({
     resolver: zodResolver(FormSchema),
     defaultValues: {
       username: "",
       password: "",
     },
   });
+  
   async function handleGoogleAuth(e) {
     e.preventDefault();
     await SignInWithGoogle();
     navigate("/");
+  } 
+  if (loading) {
+    return (
+      <div
+        className="text-foreground flex h-full flex-col"
+        style={{
+          width:
+            open && !isMobile
+              ? "calc(100vw - var(--sidebar-width))"
+              : "100vw",
+        }}
+      >
+        <div className="m-auto">Loading...</div>
+      </div>
+    );
+  }
+
+  // Don't render login form if already authenticated (will redirect)
+  if (isAuthenticated) {
+    return null; // Or a loading spinner since useEffect will redirect
   }
 
   return (
@@ -101,4 +130,4 @@ const Login = () => {
     </div>
   );
 };
-export default Login;
+export default Login;