Skip to content
Auth

在 Next.js 中使用 Supabase Auth

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

快速入门 #

🌐 Quickstart

1
Create a new Supabase project

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

你的新数据库有一个用于存储用户的表。你可以通过在 SQL 编辑器 中运行一些 SQL 来看到这个表目前是空的。

SQL_EDITOR
1
select * from auth.users;
2
Create a Next.js app

使用 create-next-app 命令和 with-supabase 模板，创建一个预配置了以下内容的 Next.js 应用：

  • 基于 Cookie 的认证

  • TypeScript

  • Tailwind CSS

Terminal
1
npx create-next-app -e with-supabase
3
Declare Supabase Environment Variables

将 .env.example 重命名为 .env.local 并填写你的 Supabase 连接变量：

Project URL
Publishable key
.env.local
1
NEXT_PUBLIC_SUPABASE_URL=your-project-url
2
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_... key

获取 API 详情 #

🌐 Get API details

要与数据库表中的数据进行交互，你可以使用封装了自动生成的数据 API 端点的客户端库，并使用来自项目 Connect 对话框的项目 URL 和密钥进行认证。

🌐 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.

Project URL
Publishable key
4
Start the app

启动开发服务器，在浏览器中打开 http://localhost:3000，你就应该能看到 app/page.tsx 的内容。

要注册新用户，访问 http://localhost:3000/auth/sign-up，然后点击 Sign up。

Terminal
1
npm run dev

了解更多 #

🌐 Learn more