create-supa-kit

Scaffold a React + Vite + Supabase Auth app in seconds.

npx create-supa-kit

What it does

create-supa-kit is an interactive CLI that generates a ready-to-use React project with Supabase authentication already wired up — login, sign up, persistent sessions, and a protected dashboard, all out of the box.

Templates

Four templates are available based on your answers:

| TypeScript | Tailwind CSS | Template used | |:---:|:---:|---| | No | No | react-supabase | | Yes | No | react-supabase-ts | | No | Yes | react-supabase-tailwind | | Yes | Yes | react-supabase-ts-tailwind |

Usage

npx create-supa-kit

The CLI will ask three questions:

? Project name?          my-app
? Use TypeScript?        No
? Include Tailwind CSS?  No

Then it scaffolds the project and prints the next steps:

cd my-app
npm install
cp .env.example .env    # add your Supabase keys
npm run dev

Environment variables

Open .env and fill in your project credentials from app.supabase.com → Settings → API:

VITE_SUPABASE_URL      = https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY = eyJ...

What's included in every template

src/
├── lib/
│   └── supabaseClient.js   # single Supabase client instance
├── components/
│   ├── Login.jsx            # email/password login + sign up (toggle)
│   └── Dashboard.jsx        # protected page
├── App.jsx                  # session control via onAuthStateChange
└── main.jsx
.env.example                 # env variable template

Auth features

| Feature | How | |---|---| | Login | supabase.auth.signInWithPassword | | Sign up | supabase.auth.signUp | | Persistent session | Automatic — stored in localStorage | | Logout | supabase.auth.signOut | | Protected route | App.jsx renders Dashboard only when session exists |

Requirements

• Node.js >= 18

Local development

git clone https://github.com/your-github-user/create-supa-kit
cd create-supa-kit
npm install
npm link

# now available globally
create-supa-kit

License

MIT