认证

在 Next.js 中使用 Supabase 认证

学习如何为 Next.js App Router 配置 Supabase 认证


1

创建新的Supabase项目

前往 database.new 创建一个新的Supabase项目。

您的新数据库已包含用于存储用户的表。您可以通过在SQL编辑器中运行SQL来查看当前该表为空。

SQL_EDITOR
1
select * from auth.users;
2

创建Next.js应用

使用 create-next-app 命令和 with-supabase 模板创建一个预配置好的Next.js应用,包含:

查看GitHub仓库

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

配置Supabase环境变量

.env.example 重命名为 .env.local 并填入您项目的URL和Anon Key

.env.local
1
2
NEXT_PUBLIC_SUPABASE_URL=your-project-url NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
4

启动应用

启动开发服务器,在浏览器中访问 http://localhost:3000,您应该能看到 app/page.tsx 的内容。

要注册新用户,请访问 http://localhost:3000/sign-up 并点击 Sign up注意:必须先重命名.env.example为.env.local才能访问此路由

Terminal
1
npm run dev

了解更多