# Remove Supabase

> Guide for removing Supabase authentication and Drizzle ORM from the template when database and auth features are not needed. Use when you want to use this template as a simple static site or with alternative authentication solutions. Use when this capability is needed.

- Skill: `tomevault-io/remove-supabase` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/remove-supabase`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/remove-supabase/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/remove-supabase

---


# Remove Supabase & Database Setup Guide

This template includes Supabase authentication and Drizzle ORM, but if you don't need database or authentication features, you can remove them following these steps.

---

## Features Removed

When you remove database and authentication features, the following functionality will no longer be available:
- User authentication (login/logout)
- Profile management
- Avatar image uploads
- User-specific data management
- Database operations (Drizzle ORM)

---

## Removal Steps

### 1. Delete Unnecessary Files

```bash
# Authentication-related files
rm -rf src/app/login
rm -rf src/app/auth
rm -rf src/app/profile

# Authentication actions
rm -rf src/actions/auth.ts
rm -rf src/actions/profile.ts

# Supabase-related libraries
rm -rf src/lib/supabase
rm -rf src/lib/auth.ts

# Entities and gateways
rm -rf src/entities/user
rm -rf src/gateways/user

# Authentication-related components
rm -rf src/components/shared/header/auth-navigation
rm -rf src/components/shared/header/user-menu
rm -rf src/components/features/profile-page

# Supabase configuration
rm -rf supabase

# Drizzle ORM related
rm -rf src/lib/drizzle
rm -f drizzle.config.ts
```

### 2. Remove Dependencies

Remove the following packages and scripts from `package.json`:

**Remove packages:**
```bash
bun remove @supabase/supabase-js @supabase/ssr supabase drizzle-orm drizzle-kit postgres
```

**Remove scripts (manually delete from package.json):**
- `db:typegen` (Supabase type generation)
- `supabase:push` (Push to Supabase)
- `db:generate` (Drizzle migration generation)
- `db:push` (Apply Drizzle migrations)
- `db:studio` (Launch Drizzle Studio)
- `db:pull` (Pull Drizzle schema)

### 3. Simplify Header Component

Update `src/components/shared/header/Header.tsx` as follows:

```tsx
import Link from "next/link";
import { ModeToggle } from "@/components/shared/mode-toggle/ModeToggle";

export const Header = () => {
  return (
    <header className="sticky top-0 z-50 bg-transparent backdrop-blur-md">
      <div className="flex items-center justify-between px-6 py-6">
        <div>
          <h1 className="font-medium text-2xl">
            <Link href="/">Title</Link>
          </h1>
        </div>
        <div className="flex items-center gap-5">
          <Link href="/link1" className="text-gray-400 text-sm">
            Link1
          </Link>
          <Link href="/link2" className="text-gray-400 text-sm">
            Link2
          </Link>
          <ModeToggle />
        </div>
      </div>
    </header>
  );
};
```

**Note**: The theme toggle feature (`ModeToggle`) is not related to authentication, so it's recommended to keep it. Remove it if not needed.

### 4. Remove Environment Variables

Delete the following variables from `.env.local` (or delete the file itself):

```
NEXT_PUBLIC_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY
```

### 5. Adjust Layout Component

Remove the Toaster component from `src/app/layout.tsx` (if authentication-related notifications are not needed):

```tsx
import type { Metadata } from "next";
import "./globals.css";
import { Geist_Mono } from "next/font/google";
import { Header } from "@/components/shared/header/Header";

const geistMono = Geist_Mono({
  subsets: ["latin"],
  variable: "--font-geist-mono",
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ja">
      <body className={`dark antialiased ${geistMono.className}`}>
        <Header />
        <div className="flex min-h-screen w-full justify-center px-6 md:px-0">
          <div className="w-full max-w-7xl">{children}</div>
        </div>
      </body>
    </html>
  );
}
```

### 6. Verify Changes

After removal, verify that everything works correctly:

```bash
# Check for TypeScript errors
bun run typecheck

# Check for lint errors
bun run check

# Start development server
bun run dev
```

---

## Alternatives

### Other Authentication Options

If you need authentication but don't want to use Supabase:

1. **NextAuth.js** - Authentication library supporting various providers
2. **Auth0** - Enterprise authentication service
3. **Firebase Auth** - Google's authentication service
4. **Clerk** - Authentication platform for developers

### Using as a Simple Static Site

After removing authentication features, the following features remain available:

- Next.js 16 App Router
- TypeScript
- Tailwind CSS
- shadcn/ui components
- Biome (linting & formatting)
- Vitest (testing)
- Storybook

---

## Frequently Asked Questions

### Q: Can I keep only some authentication features?

A: Yes, you can selectively remove specific features. For example, you can keep login functionality while removing only the profile feature.

### Q: Can I add authentication features later?

A: Yes, you can reverse these steps or follow the Supabase setup guide to add them again.

### Q: Do I need a database?

A: This guide removes both Supabase and Drizzle ORM. If you need a database separately, you can introduce an ORM like Prisma or keep Drizzle ORM and combine it with another database (PostgreSQL, MySQL, etc.).

### Q: Can I keep only Drizzle ORM?

A: Yes, you can remove only Supabase authentication while keeping Drizzle ORM. In that case, don't delete Drizzle-related files and packages, and connect to another PostgreSQL database (Neon, Vercel Postgres, self-hosted PostgreSQL, etc.).

---

## Important Notes

- Always back up your project before deletion
- After deletion, TypeScript errors may occur, so verify with `bun run typecheck`
- Don't forget to remove unnecessary import statements
- Run the verification steps (Step 6) after completing all removal steps

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/imaimai17468) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->