Supabase by example

This is a NextJS/Supabase project demonstrating how to create a user profile along with how to store sensitive data that only the user of that data should be able to view using a one-to-one relationship and row level security (RLS). This project also demonstrates how to use a Postgres function to update two tables (which is done in a transaction so that if one fails there should be a rollback) using a .rpc function call. We also demonstrate how to use a generated column for the slug inside the database by making use of a Postgres function we create.

Features:

Social auth
Email/Password auth
Magic Link auth
OTP auth
Password reset
User Profile

This project makes use of:

Zod Schema Validation library
Supabase SSR
DaisyUI
tailwindcss
Playwright e2e testing
pgTAP Postgres unit testing
Tailwind Profile from Codepen

Getting Started

You can get started with this locally by using the Supabase CLI. Make sure you have the CLI installed before continuing. You can find installation instructions here.

Create a copy of this project using the commands below:

npx degit silentworks/supabase-nextjs-navupdate-demo project-name
cd project-name
npm install # or pnpm install or yarn install

Run the command below to start your local Supabase docker instance

npx supabase start

Copy .env.example file and rename it .env. Now copy the credentials you were given when you ran supabase start into this file.

Now we can start the project dev server:

npm run dev # or yarn dev or pnpm dev

We can now navigate to the /auth/signup url to create an account.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.