Use Supabase Auth with Next.js
Learn how to configure Supabase Auth for the Next.js App Router.
Create a new Supabase project
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
1select * from auth.users;Create a Next.js app
Use the create-next-app command and the with-supabase template, to create a Next.js app pre-configured with:
-
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
Terminal
1npx create-next-app -e with-supabaseDeclare Supabase Environment Variables
Rename .env.example to .env.local and populate with your Supabase connection variables:
Project URL
Publishable key
.env.local
1NEXT_PUBLIC_SUPABASE_URL=your-project-url2NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_... keyYou can also get the Project URL and key from the project's Connect dialog.
Get API details#
Now that you've created some database tables, you are ready to insert data using the auto-generated API.
To do this, you need to get the Project URL and key from the project Connect dialog.
Read the API keys docs for a full explanation of all key types and their uses.
Changes to API keys
Supabase is changing the way keys work to improve project security and developer experience. You can read the full announcement, but in the transition period, you can use both the current anon and service_role keys and the new publishable key with the form sb_publishable_xxx which will replace the older keys.
The legacy keys will be deprecated shortly, so we strongly encourage switching to and using the new publishable and secret API keys.
In most cases, you can get the correct key from the Project's Connect dialog, but if you want a specific key, you can find all keys in the API Keys section of a Project's Settings page:
For new keys, open the API Keys tab, if you don't have a publishable key already, click Create new API Keys, and copy the value from the Publishable key section.
Start the app
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.
Terminal
1npm run devLearn more#
- Setting up Server-Side Auth for Next.js for a Next.js deep dive
- Supabase Auth docs for more Supabase authentication methods