Security Best Practices Checklist

A comprehensive security checklist for React Starter Kit applications. Review this checklist during development, before deployment, and regularly in production.

Development Phase

Code Security

Input Validation

• Validate all user inputs on both client and server
• Use Zod schemas for type-safe validation
• Sanitize HTML content to prevent XSS
• Validate file uploads (type, size, content)
• Implement rate limiting on forms and APIs

// Example: tRPC input validation with Zod
export const userRouter = router({
  create: publicProcedure
    .input(
      z.object({
        email: z.string().email(),
        name: z.string().min(1).max(100),
        age: z.number().int().positive().max(120),
      }),
    )
    .mutation(async ({ input }) => {
      // Input is already validated
    }),
});

Authentication & Authorization

• Use Better Auth for authentication
• Implement proper session management
• Use secure session storage (httpOnly cookies)
• Implement CSRF protection
• Check permissions on every protected route
• Log authentication events

// Example: Protected tRPC procedure
export const protectedProcedure = t.procedure.use(async ({ ctx, next }) => {
  if (!ctx.session?.user) {
    throw new TRPCError({ code: "UNAUTHORIZED" });
  }
  return next({ ctx: { ...ctx, user: ctx.session.user } });
});

Data Protection

• Never log sensitive data (passwords, tokens, PII)
• Use parameterized queries (Drizzle ORM)
• Encrypt sensitive data at rest
• Implement proper error handling without data leaks
• Use HTTPS for all communications
• Validate and sanitize database queries

// Example: Safe database query with Drizzle
const users = await db
  .select()
  .from(usersTable)
  .where(eq(usersTable.email, email)); // Parameterized, prevents SQL injection

Secret Management

Environment Variables

• Store secrets in .env.local (never commit)
• Use .env only for non-sensitive defaults
• Document required variables in .env
• Validate environment variables at startup
• Use different secrets for each environment

// Example: Environment validation
const env = z
  .object({
    DATABASE_URL: z.string().url(),
    JWT_SECRET: z.string().min(32),
    SMTP_PASSWORD: z.string(),
    PUBLIC_API_URL: z.string().url(), // Safe for client
  })
  .parse(process.env);

Production Secrets

• Use Cloudflare Workers secrets for production
• Rotate secrets regularly
• Never hardcode secrets in code
• Audit secret access logs
• Use secret scanning in CI/CD

Dependencies

Package Management

• Run bun audit regularly
• Review new dependencies before adding
• Check dependency licenses
• Enable Dependabot alerts
• Keep dependencies up to date
• Use lock files (bun.lockb)

# Security audit commands
bun audit                    # Check for vulnerabilities
bun update --latest          # Update dependencies
bun pm ls                    # List all dependencies

Supply Chain Security

• Verify package authenticity
• Use specific versions (not wildcards)
• Review dependency source code for critical packages
• Monitor for dependency hijacking
• Use SubResource Integrity (SRI) for CDN resources

Pre-Deployment Phase

Security Headers

Configure Headers

• Content Security Policy (CSP)
• X-Frame-Options
• X-Content-Type-Options
• Strict-Transport-Security (HSTS)
• Referrer-Policy
• Permissions-Policy

// Example: Security headers in Hono
app.use("*", async (c, next) => {
  await next();
  c.header("X-Frame-Options", "DENY");
  c.header("X-Content-Type-Options", "nosniff");
  c.header("Strict-Transport-Security", "max-age=31536000");
  c.header("Content-Security-Policy", "default-src 'self'");
});

API Security

tRPC Security

• Validate all inputs with Zod
• Implement rate limiting
• Use proper error codes
• Don't expose internal errors
• Log suspicious activities
• Implement request timeouts

// Example: Rate limiting middleware
const rateLimiter = new Map();

export const rateLimit = middleware(async ({ ctx, next }) => {
  const key = ctx.ip;
  const limit = rateLimiter.get(key) || 0;

  if (limit > 10) {
    throw new TRPCError({ code: "TOO_MANY_REQUESTS" });
  }

  rateLimiter.set(key, limit + 1);
  setTimeout(() => rateLimiter.delete(key), 60000);

  return next();
});

CORS Configuration

• Configure allowed origins explicitly
• Don't use wildcard (*) in production
• Validate Origin header
• Configure allowed methods and headers
• Use credentials carefully

Client Security

React Security

• Avoid dangerouslySetInnerHTML
• Sanitize user-generated content
• Use Content Security Policy
• Validate URLs before navigation
• Implement proper error boundaries
• Don't expose sensitive data in state

// Example: Safe HTML rendering
import DOMPurify from 'isomorphic-dompurify'

function SafeHTML({ content }: { content: string }) {
  const sanitized = DOMPurify.sanitize(content)
  return <div dangerouslySetInnerHTML={{ __html: sanitized }} />
}

Browser Storage

• Don't store sensitive data in localStorage
• Use httpOnly cookies for sessions
• Encrypt sensitive client-side data
• Clear storage on logout
• Implement storage quotas

Deployment Phase

Infrastructure Security

Cloudflare Workers

• Configure WAF rules
• Enable DDoS protection
• Set up rate limiting
• Configure security headers
• Enable bot protection
• Monitor security events

# Example: wrangler.toml security config
[env.production]
compatibility_date = "2024-01-01"
compatibility_flags = ["nodejs_compat"]

[env.production.rate_limiting]
enabled = true
requests_per_minute = 60

CI/CD Security

• Use least privilege for CI/CD tokens
• Store secrets securely (GitHub Secrets)
• Enable branch protection
• Require code reviews
• Run security checks in pipeline
• Sign commits and releases

# Example: GitHub Actions security
- name: Run security audit
  run: |
    bun audit
    bun test:security

- name: SAST Scan
  uses: github/super-linter@v5
  env:
    VALIDATE_JAVASCRIPT_ES: true
    VALIDATE_TYPESCRIPT_ES: true

Monitoring & Logging

Security Monitoring

• Log authentication attempts
• Monitor for suspicious patterns
• Set up security alerts
• Track rate limit violations
• Monitor dependency vulnerabilities
• Review logs regularly

// Example: Security event logging
function logSecurityEvent(event: {
  type: string;
  user?: string;
  ip: string;
  details: Record<string, any>;
}) {
  console.log(
    JSON.stringify({
      timestamp: new Date().toISOString(),
      severity: "SECURITY",
      ...event,
    }),
  );
}

Incident Response

• Have incident response plan ready
• Configure security notifications
• Set up backup and recovery
• Document security contacts
• Test incident procedures
• Keep security playbook updated

Production Phase

Ongoing Security

Regular Tasks

• Weekly: Review security alerts
• Monthly: Run dependency audits
• Quarterly: Security assessment
• Annually: Penetration testing
• Ongoing: Security training

Security Updates

• Monitor security advisories
• Apply patches promptly
• Test updates in staging
• Document security changes
• Communicate with users about security

Compliance

Data Protection

• Implement GDPR compliance (if applicable)
• Add privacy policy
• Implement data deletion
• Log data access
• Encrypt personal data

Security Documentation

• Maintain SECURITY.md
• Document security procedures
• Keep incident log
• Update security checklist
• Train team on security

Quick Security Wins

For immediate security improvements:

1. Run Security Audit

   bashCopy

   bun audit
   

2. Add Security Headers

   typescriptCopy

   // apps/api/src/index.ts
   app.use(securityHeaders());
   

3. Implement Rate Limiting

   typescriptCopy

   // apps/api/src/middleware.ts
   app.use(rateLimit({ limit: 100, window: "1m" }));
   

4. Enable HTTPS Redirect

   typescriptCopy

   // apps/web/src/index.ts
   if (location.protocol === "http:") {
     location.replace("https:" + window.location.href.substring(5));
   }
   

5. Add Input Validation

   typescriptCopy

   // Use Zod everywhere
   const schema = z.object({
     /* ... */
   });
   const validated = schema.parse(input);
   

Security Resources

Tools

• OWASP ZAP – Security scanning
• Snyk – Dependency scanning
• GitHub Security – Security features
• Mozilla Observatory – Security assessment

Documentation

• OWASP Top 10
• React Security
• Cloudflare Security
• Better Auth Docs

Emergency Contacts

• Security Issues: [email protected]
• GitHub Security: Security Advisories
• CVE Database: MITRE CVE

Review this checklist regularly and update based on new threats and best practices.