Supabase Starter

This starter configures Supabase Auth to use cookies, making the user's session available throughout the entire Next.js app - Client Components, Server Components, Route Handlers, Server Actions and Middleware.

Deploy your own

The Vercel deployment will guide you through creating a Supabase account and project. After installation of the Supabase integration, all relevant environment variables will be set up so that the project is usable immediately after deployment 🚀

How to use

1. Create a new Supabase project
2. Run npx create-next-app -e with-supabase to create a Next.js app using the Supabase Starter template
3. Use cd to change into the app's directory
4. Run npm install to install dependencies
5. Rename .env.local.example to .env.local and update the values for NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY from your Supabase project's API settings
6. Run npm run dev to start the local development server

Check out the docs for Local Development to also run Supabase locally.

Create a Supabase client

Check out the /app/_examples folder for an example of creating a Supabase client in:

• Client Components
• Server Components
• Route Handlers
• Server Actions

Create todo table and seed with data (optional)

Navigate to your project's SQL Editor, click New query, paste the contents of the init.sql file and click RUN.

This will create a basic todos table, enable Row Level Security (RLS), and write RLS policies enabling select and insert actions for authenticated users.

To seed your todos table with some dummy data, run the contents of the seed.sql file.

Feedback and issues

Please file feedback and issues over on the Supabase GitHub org.

More Supabase examples

• Next.js Subscription Payments Starter
• Cookie-based Auth and the Next.js 13 App Router (free course)
• Supabase Auth and the Next.js App Router
• Next.js Auth Helpers Docs