Enhance onboarding process with Redux state management

- Integrated Redux state management into the Onboarding component by dispatching the setOnboarded action upon completion.
- Updated authSlice to include isOnboarded state, allowing for tracking of onboarding status.
- Modified the Redux store configuration to persist the onboarding status alongside the token, improving user experience and state consistency.

These changes streamline the onboarding process and enhance state management for user authentication.

src/components/ProtectedRoute.tsx

@@ -0,0 +1,36 @@
+import { Navigate } from 'react-router-dom';
+import { useAppSelector } from '../store/hooks';
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+  requireAuth?: boolean;
+  requireOnboarded?: boolean;
+  redirectTo?: string;
+}
+
+/**
+ * Protected route component that handles authentication and onboarding checks
+ */
+const ProtectedRoute = ({
+  children,
+  requireAuth = true,
+  requireOnboarded = false,
+  redirectTo,
+}: ProtectedRouteProps) => {
+  const token = useAppSelector((state) => state.auth.token);
+  const isOnboarded = useAppSelector((state) => state.auth.isOnboarded);
+
+  // If auth is required but user is not logged in
+  if (requireAuth && !token) {
+    return <Navigate to={redirectTo || '/'} replace />;
+  }
+
+  // If onboarding is required but user is not onboarded
+  if (requireOnboarded && !isOnboarded) {
+    return <Navigate to={redirectTo || '/onboarding'} replace />;
+  }
+
+  return <>{children}</>;
+};
+
+export default ProtectedRoute;

src/components/PublicRoute.tsx

@@ -0,0 +1,32 @@
+import { Navigate } from 'react-router-dom';
+import { useAppSelector } from '../store/hooks';
+
+interface PublicRouteProps {
+  children: React.ReactNode;
+  redirectTo?: string;
+}
+
+/**
+ * Public route component that redirects authenticated users
+ * If logged in and onboarded -> redirect to /home
+ * If logged in but not onboarded -> redirect to /onboarding
+ */
+const PublicRoute = ({ children, redirectTo }: PublicRouteProps) => {
+  const token = useAppSelector((state) => state.auth.token);
+  const isOnboarded = useAppSelector((state) => state.auth.isOnboarded);
+
+  // If user is logged in and onboarded, redirect to home
+  if (token && isOnboarded) {
+    return <Navigate to={redirectTo || '/home'} replace />;
+  }
+
+  // If user is logged in but not onboarded, redirect to onboarding
+  if (token && !isOnboarded) {
+    return <Navigate to="/onboarding" replace />;
+  }
+
+  // User is not logged in, show public route
+  return <>{children}</>;
+};
+
+export default PublicRoute;

src/pages/onboarding/Onboarding.tsx

@@ -1,5 +1,7 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useAppDispatch } from '../../store/hooks';
+import { setOnboarded } from '../../store/authSlice';
 import ProgressIndicator from '../../components/ProgressIndicator';
 import LottieAnimation from '../../components/LottieAnimation';
 import FeaturesStep from './steps/FeaturesStep';
@@ -10,6 +12,7 @@ import GetStartedStep from './steps/GetStartedStep';
 
 const Onboarding = () => {
   const navigate = useNavigate();
+  const dispatch = useAppDispatch();
   const [currentStep, setCurrentStep] = useState(1);
   const totalSteps = 5;
 
@@ -29,6 +32,7 @@ const Onboarding = () => {
   };
 
   const handleComplete = () => {
+    dispatch(setOnboarded(true));
     navigate('/home');
   };
 

src/store/authSlice.ts

@@ -2,10 +2,12 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 
 interface AuthState {
   token: string | null;
+  isOnboarded: boolean;
 }
 
 const initialState: AuthState = {
   token: null,
+  isOnboarded: false,
 };
 
 const authSlice = createSlice({
@@ -17,9 +19,13 @@ const authSlice = createSlice({
     },
     clearToken: (state) => {
       state.token = null;
+      state.isOnboarded = false;
+    },
+    setOnboarded: (state, action: PayloadAction<boolean>) => {
+      state.isOnboarded = action.payload;
     },
   },
 });
 
-export const { setToken, clearToken } = authSlice.actions;
+export const { setToken, clearToken, setOnboarded } = authSlice.actions;
 export default authSlice.reducer;

src/store/index.ts

@@ -8,8 +8,8 @@ import socketReducer from './socketSlice';
 const authPersistConfig = {
   key: 'auth',
   storage,
-  // Only persist the token
-  whitelist: ['token'],
+  // Persist token and onboarding status
+  whitelist: ['token', 'isOnboarded'],
 };
 
 const persistedAuthReducer = persistReducer(authPersistConfig, authReducer);