Initial commit

src/components/protected-route/index.tsx

@@ -0,0 +1,40 @@
+import { Navigate, Outlet, useLocation } from "react-router"
+import { useAppSelector } from "@/store"
+
+/**
+ * Renders child routes if the user is unauthenticated, otherwise redirects authenticated users to
+ * the root path.
+ *
+ * This component's logic allows unauthenticated users to access nested routes rendered
+ * via `Outlet`. Conversely, if a user is authenticated, they are redirected to the application's
+ * root path (`""`). This behaviour is inverse to the typical implementation of a 'protected route',
+ * which usually grants access to authenticated users and redirects unauthenticated users to a
+ * login page.
+ */
+export default function ProtectedRoute() {
+  /**
+   * Retrieves the authentication status from the Redux store.
+   */
+  const isAuthenticated = useAppSelector((state) => state.auth.isAuthenticated)
+
+  /**
+   * Retrieves the current location object from React Router.
+   */
+  const location = useLocation()
+
+  if (isAuthenticated) {
+    /**
+     * Redirects authenticated users to the application's root path (`""`).
+     *
+     * The redirection includes the current location's state, allowing the
+     * target route to know where the user was redirected from. The
+     * `replace` prop ensures the current history entry is replaced.
+     */
+    return <Navigate to="" state={{ from: location }} replace />
+  }
+
+  /**
+   * Renders the child routes if the user is unauthenticated.
+   */
+  return <Outlet />
+}