fix: fixed authorization with localstorage

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",

src/App.jsx

@@ -3,12 +3,7 @@ import { Outlet } from "react-router-dom";
 import LoadingBar from "react-top-loading-bar";
 
 import "./index.css";
-import {
-  AppContext,
-  Container,
-  Sidebar,
-  Spinner,
-} from "@/components/Index";
+import { AppContext, Container, Sidebar, Spinner } from "@/components/Index";
 
 function App() {
   const { progress, setProgress, loading } = useContext(AppContext);

src/components/AuthLayout.jsx

@@ -0,0 +1,21 @@
+import React, { useEffect, useState } from "react";
+import { App, Spinner } from "./Index";
+import { useNavigate } from "react-router-dom";
+
+const AuthLayout = () => {
+  const [loading, setLoading] = useState(true);
+  const navigate = useNavigate();
+  useEffect(() => {
+    if (!localStorage.getItem("accessToken")) {
+      navigate("/login");
+      setLoading(false);
+    } else {
+      navigate("/");
+      setLoading(false);
+    }
+  }, [navigate, setLoading]);
+
+  return loading ? <Spinner /> : <App />;
+};
+
+export default AuthLayout;

src/components/Index.jsx

@@ -26,6 +26,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox"
 
 import Login from "@/pages/auth/Login.jsx";
 import App from "@/App";
@@ -90,4 +91,5 @@ export {
   PassStrengthBar,
   Tweets,
   BookmarkedTweets,
+  Checkbox
 };

src/components/ui/checkbox.jsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}>
+    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+      <CheckIcon className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

src/main.jsx

@@ -11,16 +11,16 @@ import {
   TweetDetails,
   Profile,
   UserDetails,
-  Tweets,
-  BookmarkedTweets
+  Tweets,BookmarkedTweets,
 } from "@/components/Index";
 import "./index.css";
 import LikedTweets from "./pages/LikedTweets";
+import AuthLayout from "./components/AuthLayout";
 
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <App />,
+    element: <AuthLayout />,
     children: [
       { path: "/", element: <Home /> },
       { path: "/tweet/:id", element: <TweetDetails /> },
@@ -29,21 +29,24 @@ const router = createBrowserRouter([
         element: <Profile />,
         children: [
           { path: "/profile/:username/", element: <Tweets /> },
-          { path: "/profile/:username/bookmarkedTweets", element: <BookmarkedTweets /> },
+          {
+            path: "/profile/:username/bookmarkedTweets",
+            element: <BookmarkedTweets />,
+          },
           { path: "/profile/:username/likedTweets", element: <LikedTweets /> },
           { path: "/profile/:username/edit", element: <UserDetails /> },
         ],
       },
-      {
-        path: "/register",
-        element: <Register />,
-      },
-      {
-        path: "/login",
-        element: <Login />,
-      },
     ],
   },
+  {
+    path: "/login",
+    element: <Login />,
+  },
+  {
+    path: "/register",
+    element: <Register />,
+  },
 ]);
 
 ReactDOM.createRoot(document.getElementById("root")).render(

src/pages/auth/Login.jsx

@@ -23,6 +23,7 @@ import { AppContext } from "@/context/AppContext";
 import { Separator } from "@/components/ui/separator";
 import Container from "@/components/Container";
 import InputDiv from "@/components/InputDiv";
+import { Checkbox } from "@/components/Index";
 
 const loginSchema = z.object({
   username: z
@@ -40,6 +41,7 @@ const Login = () => {
   const navigate = useNavigate();
   const [showPassword, setShowPassword] = useState(null);
   const [loader, setLoader] = useState(false);
+  const [rememberMe, setRememberMe] = useState(true);
   const { progress, setProgress } = useContext(AppContext);
 
   const {
@@ -66,6 +68,10 @@ const Login = () => {
         },
         { withCredentials: true }
       );
+      if (rememberMe === true) {
+        localStorage.setItem("accessToken", response.data.data.accessToken);
+        console.log(rememberMe);
+      }
       toast({
         title: "success",
         description: `welcome back ${response.data.data.user.username}`,
@@ -133,6 +139,19 @@ const Login = () => {
                 Forget password?
               </Link>
             </div>
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                defaultChecked={true}
+                onCheckedChange={(value) => setRememberMe(value)}
+                id="rememberMe"
+              />
+              <label
+                htmlFor="rememberMe"
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                Remember me
+              </label>
+            </div>
             <div>
               <Button disabled={isSubmitting} className="w-full">
                 {loader && <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />}

yarn.lock

@@ -302,6 +302,21 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/react-checkbox@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-checkbox/-/react-checkbox-1.0.4.tgz#98f22c38d5010dd6df4c5744cac74087e3275f4b"
+  integrity sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    "@radix-ui/react-use-previous" "1.0.1"
+    "@radix-ui/react-use-size" "1.0.1"
+
 "@radix-ui/react-collection@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.3.tgz#9595a66e09026187524a36c6e7e9c7d286469159"