ReactCLI
add
Add sign-in, sign-up, or modal features (or presets) to an initialized SimpleAuth React project.
Synopsis
npx @simpleauthjs/react add <featureOrPreset> [flags]Run init first so components/simpleauth/index.ts exists.
Features
| Id | Description | Files written | Styles | Default style |
|---|---|---|---|---|
google-auth | Google sign-in hook and branded button plus style sheet. | hooks/use-google-auth.ts, ui/google-button.tsx, styles/google-button.css (+ styles/tokens.css for token variants) | minimal & modern (docs); CLI accepts more | minimal |
github-auth | GitHub sign-in hook and branded button plus style sheet. | hooks/use-github-auth.ts, ui/github-button.tsx, styles/github-button.css (+ tokens.css when applicable) | minimal & modern (docs); CLI accepts more | minimal |
sign-in | Email and password sign-in hook and form plus style sheet. | hooks/use-sign-in.ts, ui/sign-in-form.tsx, styles/sign-in-form.css (+ tokens.css when applicable) | minimal & modern (docs); CLI accepts more | minimal |
sign-up | Registration hook, VerifyEmailPrompt, form, and style sheet. | hooks/use-sign-up.ts, ui/verify-email-prompt.tsx, ui/sign-up-form.tsx, styles/sign-up-form.css (+ tokens.css when applicable) | minimal & modern (docs); CLI accepts more | minimal |
modal | Sign-in and sign-up modal components plus modal style sheet. | modals/sign-in-modal.tsx, modals/sign-up-modal.tsx, styles/simpleauth-modal.css (+ tokens.css when applicable) | minimal & modern (docs); CLI accepts more | minimal |
forgot-password | Forgot password hook, page form, modal, and CSS. | hooks/use-forgot-password.ts, ui/forgot-password-form.tsx, modals/forgot-password-modal.tsx, styles/forgot-password-form.css, styles/forgot-password-modal.css (+ tokens.css when applicable) | minimal & modern (docs); CLI accepts more | minimal |
reset-password | Reset password hook, form, and CSS. | hooks/use-reset-password.ts, ui/reset-password-form.tsx, styles/reset-password-form.css (+ tokens.css when applicable) | minimal & modern (docs); CLI accepts more | minimal |
verify-email | Verify and resend hooks plus callback UI (requires sign-up first for VerifyEmailPrompt). | hooks/use-verify-email.ts, hooks/use-send-verification-email.ts, ui/verify-email-callback.tsx, styles/verify-email-callback.css (+ tokens.css when applicable) | minimal & modern (docs); CLI accepts more | minimal |
sign-out | Sign-out hook and unstyled button. | hooks/use-sign-out.ts, ui/sign-out-button.tsx | minimal & modern (docs); CLI accepts more (style flag; no extra CSS) | minimal |
delete-account | Delete account hook, form, and CSS. | hooks/use-delete-account.ts, ui/delete-account-form.tsx, styles/delete-account-form.css (+ tokens.css when applicable) | minimal & modern (docs); CLI accepts more | minimal |
session | useAuth, SignedIn, SignedOut, Protected, Show. | hooks/use-auth.ts, ui/signed-in.tsx, ui/signed-out.tsx, ui/protected.tsx, ui/show.tsx | minimal & modern (docs); CLI accepts more (style flag; no CSS) | minimal |
Presets
| Preset | Expands to (stable order) |
|---|---|
basic | google-auth, github-auth, sign-in, sign-up, forgot-password, reset-password, verify-email |
full | basic features, then modal, sign-out, delete-account, session |
Flags
| Name | Type | Default | Description |
|---|---|---|---|
--cwd | string | Current working directory | Project root. |
--force | boolean | false | Overwrite files if they already exist. |
--style | string | minimal | Visual variant for styled features. This site documents minimal and modern with live previews on Style variants. Run npx @simpleauthjs/react add --help for every slug the CLI accepts. |
Documented --style slugs on this site:
minimal
modern# examples
npx @simpleauthjs/react add sign-in --style modern
npx @simpleauthjs/react add modal --style minimalComposition rules
- Running
addwith the same feature and style skips existing files unless you pass--force;index.tsexport lines are deduplicated when the CLI appends exports. - Presets always expand features in the order listed above so file outputs stay predictable.