basic auth ui setup with protected routing

Author: amitjimiwal

package-lock.json

@@ -13,14 +13,17 @@
   "dependencies": {
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-slot": "^1.0.2",
+    "@reduxjs/toolkit": "^2.2.2",
     "@types/jest": "^29.5.12",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "jest-environment-jsdom": "^29.6.2",
     "lucide-react": "^0.350.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.3",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",

package.json

@@ -1,6 +1,10 @@
 import { createBrowserRouter } from 'react-router-dom';
 import App from './App';
 import HomeScreen from './pages/Homepage/HomeScreen';
+import SignupScreen from './pages/SignupScreen/SignupScreen';
+import LoginScreen from './pages/LoginScreen/LoginScreen';
+import EmailVerification from './pages/EmailVerification/EmailVerification';
+import Protected from './components/Protected';
 const router = createBrowserRouter([
   {
     path: "/",
@@ -10,6 +14,17 @@ const router = createBrowserRouter([
         path: "/",
         element: <HomeScreen />,
       },
+      {
+        path: "/signup",
+        element:<Protected authentication={false}><SignupScreen /></Protected>,
+      },{
+        path: "/login",
+        element: <Protected authentication={false}><LoginScreen /></Protected>,
+      },
+      {
+        path: "/verify",
+        element: <Protected authentication={true}><EmailVerification /></Protected>,
+      }
     ],
   },
 ]);

src/approutes.tsx

@@ -0,0 +1,58 @@
+import { Button } from "@/components/ui/button";
+import { SVGProps } from "react";
+
+export default function Pricing() {
+  return (
+    <section className="w-full py-12 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-zinc-900 dark:to-zinc-800 flex items-center justify-center">
+      <div className="relative flex flex-col p-6 bg-white shadow-lg rounded-lg dark:bg-zinc-850 justify-between border border-purple-500">
+        <div className="px-3 py-1 text-sm text-white bg-gradient-to-r from-pink-500 to-purple-500 rounded-full inline-block absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+          Popular
+        </div>
+        <div>
+          <h3 className="text-2xl font-bold text-center">Pro</h3>
+          <div className="mt-4 text-center text-zinc-600 dark:text-zinc-400">
+            <span className="text-4xl font-bold">$59</span>/ month
+          </div>
+          <ul className="mt-4 space-y-2">
+            <li className="flex items-center dark:text-black">
+              <CheckIcon className="text-white text-2xs bg-green-500 rounded-full mr-2 p-1 " />
+              100 daily Limit
+            </li>
+            <li className="flex items-center dark:text-black">
+              <CheckIcon className="text-white text-xs bg-green-500 rounded-full mr-2 p-1" />
+              Unlimited Usage
+            </li>
+            <li className="flex items-center dark:text-black">
+              <CheckIcon className="text-white text-xs bg-green-500 rounded-full mr-2 p-1" />
+              24/7 Support
+            </li>
+          </ul>
+        </div>
+        <div className="mt-6">
+          <Button className="w-full bg-gradient-to-r from-pink-500 to-purple-500">
+            Get Started
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function CheckIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+}

src/components/Pricing.tsx

@@ -0,0 +1,25 @@
+import React, { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { AuthState } from "@/redux-store/store";
+import { useNavigate } from "react-router-dom";
+interface Props {
+  children: React.ReactNode;
+  authentication: boolean;
+}
+const Protected = ({ children, authentication }: Props) => {
+  const authStatus = useSelector((state: AuthState) => state.auth.status);
+  const navigate = useNavigate();
+  const [loading, setloading] = useState<boolean>(true);
+  useEffect(() => {
+    if (authentication && authStatus != true) {
+      navigate("/login");
+    }
+    if (!authentication && authStatus === true) {
+      navigate("/");
+    }
+    setloading(false);
+  }, [authStatus, authentication, navigate]);
+  return loading ? null : <>{children}</>;
+};
+
+export default Protected;

src/components/Protected.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }