Security Checklist for React Apps Built with AI

React is the foundation of most AI-generated frontends, whether through Next.js, Vite, or standalone SPAs. Its component model is excellent for building UIs, but AI tools generate React patterns that expose sensitive data, skip input sanitization, and implement security checks that only exist in the browser.

10-point security checklist

1. 1.

   No dangerouslySetInnerHTML with user content

   critical

   React's dangerouslySetInnerHTML bypasses XSS protection. AI tools use it to render rich text, markdown, or HTML from APIs. If any of that content comes from user input, it's a direct XSS vulnerability. Use a sanitization library like DOMPurify before rendering user-generated HTML.

2. 2.

   Auth checks happen on the server, not just in components

   critical

   AI tools love to generate PrivateRoute or AuthGuard components that check if a user is logged in before rendering. These checks only hide UI — the API endpoints behind them must independently verify authentication. A curl command bypasses every React auth guard.

3. 3.

   No API keys in React component code

   critical

   Search for API keys, tokens, and secrets in your src/ directory. Anything in a React component is bundled into the JavaScript served to browsers. Common violations: Stripe secret keys, database URLs, third-party API keys with write permissions.

4. 4.

   Form validation exists on the server side

   high

   AI-generated forms always have client-side validation (required fields, email format, etc.). But client-side validation is cosmetic — it can be bypassed by sending requests directly to the API. Every form submission must be validated again on the server.

5. 5.

   No sensitive data in React state or localStorage

   high

   AI tools store auth tokens, user roles, and permissions in React state or localStorage. These are readable by any JavaScript on the page, including third-party scripts and browser extensions. Tokens should be in httpOnly cookies; roles should be verified server-side.

6. 6.

   RBAC is enforced server-side

   high

   If your app has roles (admin, user, editor), the role checks must happen on the API. AI tools generate React components that conditionally render admin features based on user.role, but the API behind those features accepts requests from any authenticated user.

7. 7.

   API error responses are sanitized

   medium

   When API calls fail, AI-generated error handlers often display the raw error message to the user. Server errors can contain file paths, SQL queries, stack traces, and internal configuration. Catch errors and show generic messages; log the details server-side.

8. 8.

   Third-party dependencies are audited

   medium

   AI tools install npm packages liberally. Run npm audit or pnpm audit and address critical and high vulnerabilities. Pay special attention to packages you don't recognize — AI sometimes references packages that have been deprecated or compromised.

9. 9.

   Environment files are gitignored

   high

   Check that .env, .env.local, and .env.production are in your .gitignore. AI tools create .env files during setup but don't always gitignore them. If you've already committed a .env file with secrets, those secrets are in your git history even after removing the file.

10. 10.

    URL parameters are sanitized

    medium

    React Router parameters and query strings are user-controlled input. AI-generated components often use URL parameters directly in API calls, database queries, or dangerouslySetInnerHTML without sanitization. Always validate and sanitize URL-derived data.