Kit Components

Kit is a collection of production-grade, fullstack components for AdonisJS. Each component gives you the complete implementation of a feature as code you own and can modify. This includes database migrations, model configuration, validators, controllers, routes, email templates, and Edge templates for server-rendered pages.

Kit components are not a library you import. They are real application code that gets added to your project. Once added, you maintain it alongside the rest of your app. There is no abstraction layer between you and the behavior. When you need to change how login works, you edit SessionController directly.

What's inside a component

Each component handles the edge cases and security patterns that production applications need. Consider login as an example. Beyond email and password verification, the login component includes:

• Dual-key rate limiting: IP-based limiting (10 attempts/min) prevents distributed attacks. Email+IP limiting (5 attempts/min, 20-minute block) prevents targeted brute-force. The penalize strategy counts only failed attempts, so legitimate retries are not punished.

• Timing attack protection: Constant-time password comparison prevents attackers from inferring valid emails through response time differences.

• Inactive account handling: Users with unverified emails can log in but are redirected to activate their account, rather than being shown a confusing "invalid credentials" error.

• Two-factor integration: When 2FA is enabled, credential verification is decoupled from session creation. The user ID is stored in the session (not flashed, because the flow spans multiple requests) and the user completes verification on a separate challenge page.

Every component follows this same approach. The code handles the scenarios that real applications encounter, not just the happy path.

Your code, your rules

Kit components are added to your project as regular application files. Controllers, validators, and Edge views live in your directories, follow your conventions, and show up in your editor's file tree. There is no Kit runtime, no configuration object, no version coupling. You can rename files, refactor methods, add fields, or delete entire sections. The code is yours from the moment it is added.

Fullstack, not just frontend

Each component covers the entire vertical of a feature. A "forgot password" component is not a form. It is the password reset token migration, the token generation logic, the email template, the rate-limited controller that sends the email, the token verification endpoint, the password update validator, and the Edge template that ties it all together. You get every layer, wired up and working.

Bare templates, by design

Kit components ship with structural UI templates containing forms, labels, error displays, buttons, and page layouts, with no styling applied. This is intentional.

When you apply your design system, you are adding classes to semantic markup, not stripping out someone else's opinions first. Whether you use Tailwind, vanilla CSS, or any other approach, the templates work as a starting point without fighting an existing aesthetic.

Composable features

Components are designed to layer. Each one is self-contained but builds on a shared foundation:

• Setup establishes the base: packages, model mixins, middleware, rate limiters
• Login, Signup, Email Verification add core auth flows
• Two-Factor Auth layers on top of login with its own controllers and pages
• Profile Management and Change Password extend the authenticated experience

Add what you need, in the order the guides specify. Each component tells you exactly which previous components it depends on.