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:
Terminal
1npx create-next-app -e with-supabaseDeclare Supabase Environment Variables
Rename .env.example to .env.local and populate with your project's URL and Key.
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.
To get the key values, open the API Keys section of a project's Settings page and do the following:
- For legacy keys, copy the
anonkey for client-side operations and theservice_rolekey for server-side operations from the Legacy API Keys tab. - 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.
.env.local
12NEXT_PUBLIC_SUPABASE_URL=your-project-urlNEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_... or anon keyStart 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/sign-up, and click Sign up. NOTE: .env.example must be renamed to .env.local before this route becomes available
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