supabase setup without dashboard hopping

Auth scaffolding, not another starter kit.

PlugNPlay is a small npm CLI that connects an existing project to Supabase, writes the right environment variables, and drops in framework-specific auth files without overwriting your work.

npm install path source code
fresh-project/auth-setup 
npx plugnplay-cli init
detecting package.json...

? What framework is this project using?
  Next.js App Router
  Vite + React
  Express

? How do you want to connect?
  Paste Supabase access token
  Enter URL + anon key manually

created .env.local
created Supabase client files
created auth pages and helpers
next: install SDKs and test /login

What the command actually does.

The CLI is intentionally narrow. It does not create a full app, own your routing, or hide Supabase behind a new abstraction. It automates the tedious wiring you would otherwise copy from docs.

1

Detects the stack

Reads the target project's package.json and checks for Next.js, Vite, or Express dependencies.

2

Connects to Supabase

Uses a temporary access token to list projects, or accepts a manual project URL and anon key.

3

Fetches the anon key

Calls the Management API for the chosen project and avoids writing service role keys into generated code.

4

Writes files safely

Creates env files and auth templates only when those paths do not already exist.

5

Prints next steps

Shows the SDK install command and the exact page or route to wire into the app.

Generated output by framework.

Each target receives files that match how that framework normally handles environment variables, sessions, and auth routes.

Next.js App Router
.env.local middleware.ts src/lib/supabase/client.ts src/lib/supabase/server.ts src/lib/supabase/middleware.ts src/lib/auth.ts src/lib/auth-server.ts app/login/page.tsx app/signup/page.tsx app/auth/callback/route.ts

Session refresh, protected routes, login, signup, sign-out, and OAuth callback support.

Vite + React
.env.local src/lib/supabase.ts src/lib/auth.ts src/context/AuthContext.tsx src/pages/LoginPage.tsx

Browser client, auth helpers, provider state, login UI, and OAuth helpers.

Express
.env src/lib/supabase.ts src/routes/auth.ts

REST endpoints for signup, login, and logout that can be mounted in an existing server.

Security posture.

PlugNPlay treats credentials as setup material, not app state. It keeps the powerful token out of the generated project and writes only browser-safe Supabase configuration.

Access token stays temporary

The Supabase personal access token is used for the current CLI session and is never written to disk.

No service role output

Generated files use anon or publishable keys. Service role keys are deliberately avoided.

Non-destructive writes

Existing files are skipped and reported instead of silently overwritten.

Response validation

Project lists, API key lists, and project refs are checked before the generator trusts them.

Safer env formatting

Environment values that need escaping are quoted before they are written.

User-owned security

The scaffold is a starting point. Apps still need RLS policies, provider settings, and production review.

Package and deploy notes.

The npm package is a Node 18+ ESM CLI with a small dependency surface. This page is separate from the package and can be served by Vercel as a static root page.

  • Install: run npx plugnplay-cli init inside an existing app.
  • Binary: the installed command is plugnplay, with init, help, and version.
  • Output: generated files are skipped when matching paths already exist, so the CLI can be rerun.
  • Vercel: use no build command. The included vercel.json rewrites all routes to /index.html.
  • Next.js: open /login after installing @supabase/ssr and @supabase/supabase-js.
  • Vite React: wrap the app with the generated AuthProvider and mount the login page in your router.
  • Express: mount the generated authRouter at /auth.
  • Supabase: review RLS policies and auth provider settings before production use.