Skip to main content
In this lesson we demonstrate Autonomous Task Completion with Claude Code by building a complete authentication system from a single high-level instruction. Claude Code goes beyond simple code completion — it can create files, install dependencies, run shell commands, scaffold full apps, and orchestrate multi-component projects (backend + frontend) based on your prompt. What you’ll see demonstrated
  • How to craft a single explicit prompt to generate a full auth system
  • The typical to‑do list Claude Code composes before acting
  • Project scaffolding, dependency installation, and file creation
  • How to run and inspect the generated backend (Express + MongoDB) and frontend (React + TypeScript)
  • Important security and production considerations
Be explicit: start with a high-level goal, then add concrete requirements (frameworks, database, auth flows, security constraints). Specify technologies and constraints to avoid unintended defaults and control Claude Code’s assumptions.

​
Starting from an empty folder

Begin in an empty project folder. Claude Code will request permission to read and execute files in your workspace before proceeding. The approval prompt looks like this: 
jeremy@MACSTUDIO Simple-React-App %
Do you trust the files in this folder?
/Users/jeremy/Repos/Claude Code Course/Simple-React-App

Claude Code may read files in this folder. Reading untrusted files may lead Claude Code to behave in unexpected ways.
With your permission Claude Code may execute files in this folder. Executing untrusted code is unsafe.

https://docs.anthropic.com/s/claude-code-security

1. Yes, proceed
2. No, exit

Enter to confirm · Esc to exit
After granting permission, issue a single clear instruction. Example: 
Create a complete authentication system for a React application. Include user registration, login, password reset, JWT tokens, email verification, and a simple frontend. Use Express, MongoDB, and modern security best practices.
Claude Code inspects the workspace and then composes a to‑do list before generating files and running commands.

​
Typical to‑do list Claude Code creates

Claude Code often presents a plan that outlines the steps it will take. Example items:
  • Analyze existing project structure and dependencies
  • Set up Express.js backend with MongoDB connection
  • Install security dependencies (bcryptjs, jsonwebtoken, nodemailer, etc.)
  • Create User model with MongoDB schema and secure password hashing
  • Implement registration with email verification
  • Implement login with JWT token generation
  • Implement password reset flow (email tokens)
  • Create authentication middleware for protected routes
  • Scaffold React (TypeScript) frontend for Login, Register, Reset Password
  • Implement JWT handling in frontend (storage, refresh, expiry)
  • Add security headers, rate limiting, and input validation

​
Project initialization and scaffolding

Claude Code will create a directory layout and initialize backend and frontend projects. It asks for confirmation before running commands. Typical commands include: 
# Create project directories and initialize backend
bash -c "mkdir -p backend frontend && cd backend && npm init -y"

# Scaffold a React frontend (TypeScript)
bash -c "cd /Users/jeremy/Repos/Claude\ Code\ Course/Simple-React-App/frontend && npx create-react-app . --template typescript"
If a relative path fails, Claude Code may retry with an absolute path. If create-react-app is deprecated in your environment, it may adapt the command and notify you. Example backend dependency installation: 
cd /Users/jeremy/Repos/Claude\ Code\ Course/Simple-React-App/backend && \
npm install express mongoose bcryptjs jsonwebtoken nodemailer express-rate-limit helmet cors dotenv express-validator
Claude Code typically updates package.json with convenient scripts: 
{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": []
}
A sample .env.example is added so you can quickly configure environment variables: 
PORT=5000
MONGODB_URI=mongodb://localhost:27017/auth_app
JWT_SECRET=your_super_secret_jwt_key_change_this_in_production
JWT_EXPIRE=24h
EMAIL_FROM=noreply@yourapp.com
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=your_email@gmail.com
EMAIL_PASS=your_app_password
FRONTEND_URL=http://localhost:3000
Claude Code creates core backend files (e.g., server.js, routes/auth.js, models/User.js, utils/email.js) and frontend React components, contexts, and styles. It reports file sizes as it writes them so you can inspect large generated files. Example header for server.js: 
// server.js
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const helmet = require('helmet');
const rateLimit = require('express-rate-limit');
require('dotenv').config();

const authRoutes = require('./routes/auth');

const app = express();
app.use(helmet());
app.use(express.json());
app.use(cors());

// Add rate limiting, connect to MongoDB, mount auth routes, etc.
When generating models and routes, Claude Code often implements fully functional endpoints for register, login, verify email, and reset password, along with middleware and an email utility for delivery.

​
Running the applications

Claude Code supplies a “get started” summary and recommended commands:
  1. Start MongoDB (locally or via MongoDB Atlas)
  2. Configure SMTP credentials in .env
  3. Start backend: cd backend && npm run dev
  4. Start frontend: cd frontend && npm start
  5. Open http://localhost:3000
Example backend startup with nodemon: 
cd backend && npm run dev

> backend@1.0.0 dev
> nodemon server.js

[nodemon] 3.1.10
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] starting `node server.js`
[dotenv@17.2.1] injecting env (10) from .env — tip: write to custom object with { processEnv: myObject }
Server running on port 5000
MongoDB connected
You may see runtime warnings when connecting to MongoDB or working with Mongoose. Example warnings: 
(node:51439) [MONGOOSE] Warning: Duplicate schema index on {"email":1} found. ...
(node:51439) [MONGODB DRIVER] Warning: useNewUrlParser is a deprecated option ...
(node:51439) [MONGODB DRIVER] Warning: useUnifiedTopology is a deprecated option ...
Front-end startup can produce ESLint or TypeScript warnings for unused variables in generated code: 
WARNING in [eslint]
src/components/auth/Register.tsx
  Line 16:9: 'navigate' is assigned a value but never used  @typescript-eslint/no-unused-vars

src/contexts/AuthContext.tsx
  Line 2:25: 'AuthResponse' is defined but never used  @typescript-eslint/no-unused-vars

src/services/api.ts
  Line 163:1: Assign instance to a variable before exporting as module default  import/no-anonymous-default-export
If SMTP credentials are not configured, actions that require sending email (verification or password reset) will fail and the UI may show a “Network error” until SMTP is configured.
A browser window showing a "Create Account" registration form with fields for full name, email, password and a pink "Network error" alert. The form sits on a purple gradient background over a code editor/IDE visible behind it.

​
What was generated (summary)

Below is a concise summary table of the typical artifacts Claude Code generates for an authentication system.
ComponentPurposeTypical Files / Features
Backend (Express + MongoDB)API and auth logicserver.js, routes/auth.js, models/User.js, middleware, utils/email.js
AuthenticationUser flows & securityRegistration, login, email verification, password reset, JWT issuance
SecurityHardening & validationhelmet, rate limiting, input validation, password hashing (bcryptjs)
Frontend (React + TypeScript)UI & client-side authLogin, Register, ForgotPassword, ResetPassword, AuthContext, protected routes
Dev toolingRun & test locallynodemon dev script, .env.example, build/start scripts
Key details included in generated code
  • Secure password hashing and comparison (bcrypt)
  • JWT token generation and expiry handling
  • Email-based verification and reset token flows (via nodemailer)
  • Auth middleware for protected routes
  • Basic responsive UI and loading/error states in React

​
Auditing and production considerations

Claude Code can scaffold a working prototype quickly, but generated code contains assumptions that require manual review. Before deploying:
Generated code may include defaults and assumptions. Always audit authentication flows, secrets handling, input validation, token storage, and email configuration. Verify secure storage for JWTs, use HTTPS in production, and rotate any example secrets.
Important production checklist
  • Review JWT secret management and consider using a secrets manager
  • Enforce HTTPS and secure cookie flags if using cookies
  • Harden rate limiting and account lockout policies
  • Validate and sanitize all inputs; add strong password policies
  • Configure robust SMTP or transactional email provider (e.g., SendGrid, SES)
  • Add monitoring, logging, and alerting for auth failures and suspicious activity
  • Run security tests, static analysis, and dependency vulnerability scans

​
Key lessons from autonomous building

  • Independent problem solving: Claude Code selects architectures and implements features — prompt precision controls assumptions.
  • Multi-component orchestration: It can scaffold backend & frontend, install dependencies, and wire systems together.
  • Time savings: Boilerplate that normally takes days can be scaffolded in minutes; use the output as a starting point.
  • Control assumptions: Explicitly state technologies, constraints, and security requirements to get predictable results.
This lesson showed how to instruct Claude Code to build a full authentication system from a single prompt, inspect the generated files, run the apps locally, and identify where manual review and hardening are required. Future lessons will cover prompt techniques to refine results and iterate on generated code.

Watch Video