Use Supabase Auth with Next.js

Learn how to configure Supabase Auth for the Next.js App Router.

Head over to database.new and create a new Supabase project.

Your new database has a table for storing your users. You can see that this table is currently empty by running some SQL in the SQL Editor.

1
select * from auth.users;

Use the create-next-app command and the with-supabase template, to create a Next.js app pre-configured with:

Cookie-based Auth
TypeScript
Tailwind CSS

Explore drop-in UI components for your Supabase app.
UI components built on shadcn/ui that connect to Supabase via a single command.
Explore Components

1
npx create-next-app -e with-supabase

Rename .env.example to .env.local and populate with your Supabase connection variables:

1
NEXT_PUBLIC_SUPABASE_URL=your-project-url
2
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_... key

To interact with data in database tables, you use the client libraries that wrap the auto-generated Data API endpoints, authenticating using the Project URL and key from the project Connect dialog.

Read the API keys docs for a full explanation of all key types, their uses, and where to find them.

Start the development server, go to http://localhost:3000 in a browser, and you should see the contents of app/page.tsx.

To sign up a new user, navigate to http://localhost:3000/auth/sign-up, and click Sign up.

1
npm run dev

Learn more#