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.

SQL_EDITOR

 select * from auth.users;

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

Terminal

npx create-next-app -e with-supabase

Rename .env.local.example to .env.local and populate with your project's URL and Anon Key.

.env.local

  NEXT_PUBLIC_SUPABASE_URL=your-project-url
  NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

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/login, and click Sign Up Now.

Check out the Supabase Auth docs for more authentication methods.

Terminal

npm run dev