React Security
Hardening Guide

$ npm install react-hook-form zod @hookform/resolvers

import { z } from 'zod';

export const loginSchema = z.object({
  email: z.string()
    .min(1, 'Email is required')
    .email('Must be a valid email address')
    .max(254, 'Email too long')
    .toLowerCase()
    .trim(),

  password: z.string()
    .min(8,  'Minimum 8 characters')
    .max(128, 'Password too long'),
});

export const profileSchema = z.object({
  name: z.string()
    .min(1).max(100)
    .regex(/^[\p{L}\p{M} '-]+$/u, 'Name contains invalid characters'),

  bio: z.string()
    .max(500, 'Bio limited to 500 characters')
    .optional(),

  website: z.string()
    .url('Must be a valid URL')
    .startsWith('https://', 'Only HTTPS URLs allowed')
    .optional(),

  age: z.number()
    .int().min(13).max(120)
    .optional(),
});

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { loginSchema } from '../schemas/auth.schema';

export function LoginForm({ onSubmit }) {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(loginSchema),
    mode: 'onBlur',          // validate on blur, not on every keystroke
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate>
      <input
        type="email"
        autoComplete="email"
        aria-invalid={!!errors.email}
        {...register('email')}
      />
      {errors.email && <span role="alert">{errors.email.message}</span>}

      <input
        type="password"
        autoComplete="current-password"
        aria-invalid={!!errors.password}
        {...register('password')}
      />
      {errors.password && <span role="alert">{errors.password.message}</span>}

      <button type="submit">Login</button>
    </form>
  );
}

import axios from 'axios';

// ─────────────────────────────────────────────────────────────
// ✗ NEVER — token theft via XSS is possible here:
//   localStorage.setItem('token', jwt)
//   axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('token')}`
//
// ✓ ALWAYS — httpOnly cookies sent automatically by browser:
// ─────────────────────────────────────────────────────────────
const api = axios.create({
  baseURL: '/api',
  withCredentials: true,   // sends httpOnly cookie on every request
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    'X-Requested-With': 'XMLHttpRequest',  // helps CSRF detection
  },
});

export default api;

import { Navigate, useLocation } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';

/**
 * ProtectedRoute — redirects unauthenticated users to /login
 * and blocks insufficient-role users with a 403 page.
 */
export function ProtectedRoute({ children, requiredRoles = [] }) {
  const { user, loading } = useAuth();
  const location = useLocation();

  // Don't render anything while checking auth (prevents flash)
  if (loading) return <div aria-busy="true">Checking session…</div>;

  // Not authenticated → redirect to login, save intended path
  if (!user) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  // Authenticated but insufficient role → 403 page
  if (requiredRoles.length > 0 && !requiredRoles.includes(user.role)) {
    return <Navigate to="/403" replace />;
  }

  return children;
}

// Usage in router:
// <Route path="/admin" element={
//   <ProtectedRoute requiredRoles={['admin']}>
//     <AdminDashboard />
//   </ProtectedRoute>
// } />

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { ProtectedRoute } from '../components/ProtectedRoute';

export function AppRouter() {
  return (
    <BrowserRouter>
      <Routes>
        <!-- Public routes -->
        <Route path="/"      element={<Home />} />
        <Route path="/login" element={<Login />} />
        <Route path="/403"   element={<Forbidden />} />

        <!-- Auth required: any logged-in user -->
        <Route path="/profile" element={
          <ProtectedRoute>
            <UserProfile />
          </ProtectedRoute>
        } />

        <!-- Admin only -->
        <Route path="/admin/*" element={
          <ProtectedRoute requiredRoles={['admin']}>
            <AdminLayout />
          </ProtectedRoute>
        } />

        <!-- Catch-all: 404 -->
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

import axios from 'axios';

const api = axios.create({
  baseURL:         '/api',
  withCredentials: true,
  timeout:         15000,
});

// ─── Request interceptor ─────────────────────────────────────
api.interceptors.request.use(async (config) => {
  // Fetch CSRF token and attach to every mutating request
  if (['post','put','patch','delete'].includes(config.method)) {
    try {
      const { data } = await axios.get('/api/csrf-token', { withCredentials: true });
      config.headers['X-CSRF-Token'] = data.csrfToken;
    } catch (e) {
      console.warn('CSRF token fetch failed');
    }
  }
  // Never attach tokens from localStorage — cookie handles auth
  return config;
});

// ─── Response interceptor ────────────────────────────────────
let isRefreshing = false;
let refreshQueue = [];

api.interceptors.response.use(
  (response) => response,
  async (error) => {
    const original = error.config;

    // Handle 401 — attempt token refresh once
    if (error.response?.status === 401 && !original._retried) {
      if (isRefreshing) {
        return new Promise((res, rej) =>
          refreshQueue.push({ resolve: res, reject: rej })
        ).then(() => api(original));
      }
      original._retried = true;
      isRefreshing = true;
      try {
        await axios.post('/api/auth/refresh', {}, { withCredentials: true });
        refreshQueue.forEach(({ resolve }) => resolve());
        refreshQueue = [];
        return api(original);
      } catch (refreshErr) {
        refreshQueue.forEach(({ reject }) => reject(refreshErr));
        refreshQueue = [];
        // Redirect to login on refresh failure
        window.location.assign('/login?session=expired');
      } finally {
        isRefreshing = false;
      }
    }

    // Sanitize error before logging — never log raw responses
    const safeError = {
      status:  error.response?.status,
      message: error.response?.data?.error || error.message,
      url:     original.url,
    };
    console.error('API Error:', safeError);

    return Promise.reject(safeError);
  }
);

export default api;

import { configureStore, combineReducers } from '@reduxjs/toolkit';
import { persistStore, persistReducer, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

// ✓ WHITELIST only non-sensitive slices for persistence
const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['ui', 'preferences'],   // ONLY these slices persist
  // ✗ NEVER whitelist: auth, payment, userData with PII, tokens
};

const rootReducer = combineReducers({
  ui:          uiReducer,          // ✓ Safe to persist (theme, locale)
  preferences: prefReducer,        // ✓ Safe (layout settings)
  auth:        authReducer,        // ✗ NOT persisted — re-fetch on mount
  user:        userReducer,        // ✗ NOT persisted — minimal in-memory
});

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  devTools: process.env.NODE_ENV !== 'production',  // Disable DevTools in prod
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
});

import { createSlice } from '@reduxjs/toolkit';

const authSlice = createSlice({
  name: 'auth',
  initialState: {
    user:    null,   // Only: { id, name, role, email } — no passwords!
    // ✗ NEVER: token, password, refreshToken, creditCard
  },
  reducers: {
    setUser:   (state, { payload }) => { state.user = payload },
    clearUser: (state) => { state.user = null },
  },
});

# ✓ SAFE — public, non-sensitive, read-only config
VITE_API_BASE_URL=https://api.your-app.com
VITE_APP_NAME=YourApp
VITE_GOOGLE_MAPS_PUBLIC_KEY=AIza...    # restrict by HTTP referrer in GCP!
VITE_SENTRY_DSN=https://public@sentry.io/123

# ✗ NEVER in frontend .env (goes in backend only!)
# VITE_DB_PASSWORD=secret        ← exposed in bundle
# VITE_JWT_SECRET=mysecret       ← exposed in bundle
# VITE_STRIPE_SECRET_KEY=sk_live ← exposed in bundle
# VITE_SMTP_PASSWORD=pass        ← exposed in bundle