src/AppRouter.tsx

@@ -2,6 +2,7 @@ import { Routes, Route, useParams, useLocation, useNavigate } from 'react-router
 import { motion, AnimatePresence } from 'motion/react';
 
 // Import all your pages
+import { ProtectedRoute } from './components/ProtectedRoute';
 import { MelbournePage } from './pages/MelbournePage';
 import { PassesPage } from './pages/PassesPage';
 import { AttractionsPage } from './pages/AttractionsPage';
@@ -178,31 +179,43 @@ export function AppRouter({
                     {/* User Routes */}
                     <Route path="/profile" element={
                         <motion.div key="profile" {...pageTransition}>
-                            <ProfilePage {...commonNavHandlers} />
+                            <ProtectedRoute>
+                                <ProfilePage {...commonNavHandlers} />
+                            </ProtectedRoute>
                         </motion.div>
                     } />
                     <Route path="/view-card-details/:cardId" element={
                         <motion.div key="profile" {...pageTransition}>
-                            <ViewCardDetailsPage {...commonNavHandlers} />
+                            <ProtectedRoute>
+                                <ViewCardDetailsPage {...commonNavHandlers} />
+                            </ProtectedRoute>
                         </motion.div>
                     } />
-               
+
 
                     {/* Itinerary Routes */}
                     <Route path="/create-itinerary" element={
                         <motion.div key="create-itinerary" {...pageTransition}>
-                            <CreateMagicItineraryPage {...commonNavHandlers} />
+                            <ProtectedRoute>
+
+                                <CreateMagicItineraryPage {...commonNavHandlers} />
+                            </ProtectedRoute>
                         </motion.div>
                     } />
 
                     <Route path="/view-itinerary/:itineraryId" element={
                         <motion.div key="itinerary-view" {...pageTransition}>
-                            <ItineraryViewPage {...commonNavHandlers} />
+                            <ProtectedRoute>
+                                <ItineraryViewPage {...commonNavHandlers} />
+                            </ProtectedRoute>
                         </motion.div>
                     } />
                     <Route path="/itinerary-summary/:itineraryId" element={
                         <motion.div key="itinerary-summary" {...pageTransition}>
-                            <ItinerarySummaryPage {...commonNavHandlers} />
+                            <ProtectedRoute>
+
+                                <ItinerarySummaryPage {...commonNavHandlers} />
+                            </ProtectedRoute>
                         </motion.div>
                     } />
 
@@ -276,12 +289,17 @@ export function AppRouter({
 
                     <Route path="/cart" element={
                         <motion.div key="super-savings" {...pageTransition}>
-                            <CartPage {...commonNavHandlers} />
+                            <ProtectedRoute>
+
+                                <CartPage {...commonNavHandlers} />
+                            </ProtectedRoute>
                         </motion.div>
                     } />
                     <Route path="/checkout" element={
                         <motion.div key="super-savings" {...pageTransition}>
-                            <CheckoutPage {...commonNavHandlers} />
+                            <ProtectedRoute>
+                                <CheckoutPage {...commonNavHandlers} />
+                            </ProtectedRoute>
                         </motion.div>
                     } />
                     <Route path="/register" element={
@@ -289,11 +307,13 @@ export function AppRouter({
                             <RegisterPage {...commonNavHandlers} />
                         </motion.div>
                     } />
-                 
+
                     <Route path="/payment/:bookingId" element={
                         <motion.div key="super-savings" {...pageTransition}>
-                            <PaymentDetailsPage {...commonNavHandlers} />
-                    </motion.div>
+                            <ProtectedRoute>
+                                <PaymentDetailsPage {...commonNavHandlers} />
+                            </ProtectedRoute>
+                        </motion.div>
                     } />
                     <Route path="/super-savings/:id" element={
                         <motion.div key="super-savings" {...pageTransition}>
@@ -305,26 +325,32 @@ export function AppRouter({
 
                     <Route path="/success" element={
                         <motion.div key="super-savings" {...pageTransition}>
-                            <PaymentSuccessPage
-                                // onHomeClick={onHomeClick}
-                                // onPassesClick={onPassesClick}
-                                onSignInClick={onSignInClick}
-                                onSignOutClick={onSignOutClick}
-                                currentPage="success"
-                                user={user}
-                            />
+                            <ProtectedRoute>
+
+                                <PaymentSuccessPage
+                                    // onHomeClick={onHomeClick}
+                                    // onPassesClick={onPassesClick}
+                                    onSignInClick={onSignInClick}
+                                    onSignOutClick={onSignOutClick}
+                                    currentPage="success"
+                                    user={user}
+                                />
+                            </ProtectedRoute>
                         </motion.div>
                     } />
                     <Route path="/cancel" element={
                         <motion.div key="super-savings" {...pageTransition}>
-                            <PaymentCancelPage
-                                // onHomeClick={onHomeClick}
-                                // onPassesClick={onPassesClick}
-                                onSignInClick={onSignInClick}
-                                onSignOutClick={onSignOutClick}
-                                currentPage="cancel"
-                                user={user}
-                            />
+                            <ProtectedRoute>
+
+                                <PaymentCancelPage
+                                    // onHomeClick={onHomeClick}
+                                    // onPassesClick={onPassesClick}
+                                    onSignInClick={onSignInClick}
+                                    onSignOutClick={onSignOutClick}
+                                    currentPage="cancel"
+                                    user={user}
+                                />
+                            </ProtectedRoute>
                         </motion.div>
                     } />
                 </Routes>

src/components/LoginModal.tsx

@@ -1,3 +1,4 @@
+// LoginModal.tsx
 import { useState, useEffect } from 'react';
 import { motion, AnimatePresence } from 'motion/react';
 import { X } from 'lucide-react';

src/components/ProtectedRoute.tsx

@@ -0,0 +1,29 @@
+// ProtectedRoute.tsx
+import { useState } from 'react';
+import { useAuth } from '../context/AuthContext';
+import { LoginModal } from './LoginModal';
+import { useNavigate } from 'react-router-dom';
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+}
+
+export function ProtectedRoute({ children }: ProtectedRouteProps) {
+  const { user } = useAuth();
+  const navigate = useNavigate();
+  const [isLoginOpen, setIsLoginOpen] = useState(!user);
+
+  if (!user) {
+    return (
+      <LoginModal
+        isOpen={isLoginOpen}
+        onClose={() => {
+          setIsLoginOpen(false);
+          navigate(-1);
+        }}
+      />
+    );
+  }
+
+  return <>{children}</>;
+}

src/components/RegisterPage.tsx

@@ -1,3 +1,4 @@
+//RegisterPage.tsx
 import { useState } from 'react';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
@@ -8,9 +9,10 @@ import Navbar from './Navbar';
 import { Footer } from './Footer';
 import { useNavigate } from 'react-router-dom';
 import { Label } from './ui/label';
+import { useEffect } from 'react';
 
 export default function RegisterPage() {
-    const { login } = useAuth();
+    const { login, user } = useAuth();
     const email = localStorage.getItem("userEmail")
     const [formData, setFormData] = useState({
         firstName: '',
@@ -31,6 +33,13 @@ export default function RegisterPage() {
 
     const navigate = useNavigate()
 
+    useEffect(() => {
+        const pendingEmail = localStorage.getItem("userEmail");
+        if (user || !pendingEmail) {
+            navigate("/");
+        }
+    }, [user]);
+
     const [register, { isLoading: isRegistering }] = useRegisterMutation();
 
     const handleInputChange = (field: string, value: string) => {

src/context/AuthContext.tsx

@@ -1,3 +1,4 @@
+// AuthContext.tsx
 import React, { createContext, useContext, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom';