# How to Build Passkey Authentication with WebAuthn, Next.js and NestJS

- 发布方：freeCodeCamp；作者：Roland Mweze
- 形式：文章 · en
- 原始资源：[https://www.freecodecamp.org/news/how-to-build-passkey-authentication-with-webauthn-next-js-and-nestjs/](<https://www.freecodecamp.org/news/how-to-build-passkey-authentication-with-webauthn-next-js-and-nestjs/>)
- 本站页面：[https://oplearnx.com/resources/res\_hvcq3kqz9rtf](<https://oplearnx.com/resources/res_hvcq3kqz9rtf>)
- 学习主题：计算机科学 / 编程与软件工程 / Web 与全栈开发；计算机科学 / 编程与软件工程；计算机科学 / 计算机安全
- 内容状态：状态待核验
- 原始发布时间：2026-10-28 01:44
- 本站首次收录：2026-10-28 05:00

## 能学到什么

能理解 passkey/WebAuthn 的原理与密码认证的痛点，并用 Next.js \+ NestJS \+ PostgreSQL 实现基于公钥的 passkey 注册与登录，同时避开常见安全实现错误。

- 解释密码认证在钓鱼、密码复用、数据泄露、隐私与凭据疲劳上的问题，以及 passkey 如何缓解
- 说明 passkey 基于公私钥对与 WebAuthn 标准的工作流程
- 搭建 NestJS 后端并连接 PostgreSQL 存储用户与 passkey
- 在服务端生成注册与认证选项并校验客户端响应
- 用 JWT 保护需要登录的路由
- 在 Next.js 前端实现注册页与登录页并给出友好错误提示
- 识别编码 credential ID 两次、未校验 owner 等 passkey 实现安全误区

## 适合我吗

- 适合：适合已有 TypeScript/React 基础、想为 Web 应用加上无密码登录的开发者，教程按步骤覆盖前后端实现。
- 需要留意：不适合完全没有 Web 开发基础、想学 Python 数据科学或机器学习方向的初学者。

## 前置条件与费用

- 知识前置：需要熟悉 TypeScript 和 React；了解 controller 与 service 概念有助于理解 NestJS 部分。
- 软件、账号与硬件：Node.js 22 及以上、PostgreSQL（可用 Postgres.app 或 pgAdmin），以及支持 passkey 的设备（Touch ID、Windows Hello、Android/iPhone 等）。
- 内容费用：免费：节选正文即为完整教程内容，可直接阅读全部步骤，未见付费墙或登录拦截。
- 实践费用：实践费用待核验：练习需在本地安装 Node.js 与 PostgreSQL，网页未说明是否产生云服务或 API 费用。
- 转载与修改：按材料分别核对，见本页“来源核验与开课实跑”；仓库许可不自动适用于教材或视频。

## 准备工具

- [Node.js 22\+](<https://nodejs.org/>)：运行 NestJS 与 Next.js 项目
- [PostgreSQL](<https://www.postgresql.org/download/>)：存储用户与 passkey 凭据
- [SimpleWebAuthn 文档](<https://simplewebauthn.dev/docs/>)：处理 WebAuthn 参数生成与响应校验
- [作者示例代码仓库](<https://github.com/RolandM99/passwordless-auth>)：对照完整实现

## 学习指南

开课检查：提示词由本站整理，尚未按提示词实际完成开课检查。

### 开课提示词（Windows）

```text
请帮我把「How to Build Passkey Authentication with WebAuthn, Next.js and NestJS」的学习环境一次准备好，让我之后只需要按顺序学习和做练习。
开始前先问我：课程放在哪个目录（等我给出完整路径），确认我的操作系统和已有工具。确认前不要创建文件或安装软件。

课程入口：https://www.freecodecamp.org/news/how-to-build-passkey-authentication-with-webauthn-next-js-and-nestjs/
我的系统：Windows。如果实际不符，先调整方案。
本次路线：Windows：本机动手。只准备这条路线需要的工具；只读路线不安装运行环境、不配置模型密钥。
练习：按教程在本地搭建 NestJS + Next.js 项目，用 PostgreSQL 保存用户与 passkey，并用真实设备完成注册与登录测试。
课节（官方顺序）：
1. How to Build Passkey Authentication with WebAuthn, Next.js and NestJS：https://www.freecodecamp.org/news/how-to-build-passkey-authentication-with-webauthn-next-js-and-nestjs/

1. 环境
- Node.js 22 及以上
- PostgreSQL 数据库
- 支持 passkey 的浏览器与设备
- 安装前先列出要装的软件和命令，等我同意；已装好的直接复用。
2. 材料
- 官方课程页面：只记录链接 https://www.freecodecamp.org/news/how-to-build-passkey-authentication-with-webauthn-next-js-and-nestjs/
3. 目录（最外层放在我确认的位置）
passkey-auth-webauthn-nextjs-nestjs/
├── README.md        # 课程入口、课节清单、每次怎么开始
├── progress.md      # 每课：读讲义 / 做练习 / 记笔记
├── questions.md     # 待解决的问题
├── check-env.ps1     # 环境自检，按 README 操作
├── data/            # 练习用到的样例数据
└── lessons/         # 每课一个文件夹：notes.md + exercises/
    └── 01-01-how-to-build-passkey-authentication/
- 每课文件夹里建 notes.md（顶部写本课官方链接）和 exercises/；课节文件夹名称与上面一致。
- 已有课程目录先检查并复用；不覆盖笔记、作业或 progress.md，不重置已有进度。尚未发布的课节保留入口并注明未发布，不能代写讲义或虚构练习。
4. 自检
- 创建 check-env.ps1，逐项检查并记录“通过/未通过”：
- 在课程根目录运行；每项检查独立执行，进入子目录不能影响下一项。将下面检查转换为 PowerShell 命令，不使用 Bash 语法。
  - node -v  → 输出 v22 或更高版本
  - psql --version  → 能打印 PostgreSQL 版本，说明数据库工具就绪
  - 打开教程页确认目录中的后端、前端、测试章节均可阅读  → 能看到完整步骤内容而非付费提示
- 标注为人工检查、浏览器操作或 notebook 单元的项目，按相应方式操作，不直接粘贴进 shell；脚本只包含当前系统可执行的命令。
- 仅在当前路线需要、对应材料已获准保存、工具已安装时运行该项；需要登录、付费或尚未开放的材料记为“需要我操作/未验证”，不能伪报通过。不执行会调用付费 API、提交作业或修改云服务的检查。
- 运行一次，把结果给我看；未通过的项目说明原因和修复办法。
5. 学习计划
- README.md：课程入口、课节清单（带链接）、每次学习怎么开始（使用“每课提示词”）。
- progress.md：每课三项勾选——读讲义、做练习、记笔记。
6. 最后分三部分汇报：已完成、需要我自己操作的、尚未验证的。

边界：
- 需要管理员权限、会产生费用或需要填写密钥的操作，先告诉我原因，等我同意。密钥由我在本机配置，不发到聊天，不写进笔记或版本库；原项目需要 .env 时确认已被 Git 忽略。
- 不替我写练习或作业答案，也不替我提交。我卡住时只给提示；我明确要求时才给解答。
- 只下载许可允许个人保存的材料；其余只放链接。不把未运行的命令说成成功。
如果你不能直接操作我的文件系统，请在确认目录后给出适用于我的系统、可直接执行的命令和需要保存的文件内容。
```

### 开课提示词（macOS）

```text
请帮我把「How to Build Passkey Authentication with WebAuthn, Next.js and NestJS」的学习环境一次准备好，让我之后只需要按顺序学习和做练习。
开始前先问我：课程放在哪个目录（等我给出完整路径），确认我的操作系统和已有工具。确认前不要创建文件或安装软件。

课程入口：https://www.freecodecamp.org/news/how-to-build-passkey-authentication-with-webauthn-next-js-and-nestjs/
我的系统：macOS。如果实际不符，先调整方案。
本次路线：macOS：本机动手。只准备这条路线需要的工具；只读路线不安装运行环境、不配置模型密钥。
练习：按教程在本地搭建 NestJS + Next.js 项目，用 PostgreSQL 保存用户与 passkey，并用真实设备完成注册与登录测试。
课节（官方顺序）：
1. How to Build Passkey Authentication with WebAuthn, Next.js and NestJS：https://www.freecodecamp.org/news/how-to-build-passkey-authentication-with-webauthn-next-js-and-nestjs/

1. 环境
- Node.js 22 及以上
- PostgreSQL 数据库
- 支持 passkey 的浏览器与设备
- 安装前先列出要装的软件和命令，等我同意；已装好的直接复用。
2. 材料
- 官方课程页面：只记录链接 https://www.freecodecamp.org/news/how-to-build-passkey-authentication-with-webauthn-next-js-and-nestjs/
3. 目录（最外层放在我确认的位置）
passkey-auth-webauthn-nextjs-nestjs/
├── README.md        # 课程入口、课节清单、每次怎么开始
├── progress.md      # 每课：读讲义 / 做练习 / 记笔记
├── questions.md     # 待解决的问题
├── check-env.sh     # 环境自检，按 README 操作
├── data/            # 练习用到的样例数据
└── lessons/         # 每课一个文件夹：notes.md + exercises/
    └── 01-01-how-to-build-passkey-authentication/
- 每课文件夹里建 notes.md（顶部写本课官方链接）和 exercises/；课节文件夹名称与上面一致。
- 已有课程目录先检查并复用；不覆盖笔记、作业或 progress.md，不重置已有进度。尚未发布的课节保留入口并注明未发布，不能代写讲义或虚构练习。
4. 自检
- 创建 check-env.sh，逐项检查并记录“通过/未通过”：
- 在课程根目录运行；每项检查独立执行，进入子目录不能影响下一项。使用当前系统的终端运行。
  - node -v  → 输出 v22 或更高版本
  - psql --version  → 能打印 PostgreSQL 版本，说明数据库工具就绪
  - 打开教程页确认目录中的后端、前端、测试章节均可阅读  → 能看到完整步骤内容而非付费提示
- 标注为人工检查、浏览器操作或 notebook 单元的项目，按相应方式操作，不直接粘贴进 shell；脚本只包含当前系统可执行的命令。
- 仅在当前路线需要、对应材料已获准保存、工具已安装时运行该项；需要登录、付费或尚未开放的材料记为“需要我操作/未验证”，不能伪报通过。不执行会调用付费 API、提交作业或修改云服务的检查。
- 运行一次，把结果给我看；未通过的项目说明原因和修复办法。
5. 学习计划
- README.md：课程入口、课节清单（带链接）、每次学习怎么开始（使用“每课提示词”）。
- progress.md：每课三项勾选——读讲义、做练习、记笔记。
6. 最后分三部分汇报：已完成、需要我自己操作的、尚未验证的。

边界：
- 需要管理员权限、会产生费用或需要填写密钥的操作，先告诉我原因，等我同意。密钥由我在本机配置，不发到聊天，不写进笔记或版本库；原项目需要 .env 时确认已被 Git 忽略。
- 不替我写练习或作业答案，也不替我提交。我卡住时只给提示；我明确要求时才给解答。
- 只下载许可允许个人保存的材料；其余只放链接。不把未运行的命令说成成功。
如果你不能直接操作我的文件系统，请在确认目录后给出适用于我的系统、可直接执行的命令和需要保存的文件内容。
```

### 开课提示词（Linux）

```text
请帮我把「How to Build Passkey Authentication with WebAuthn, Next.js and NestJS」的学习环境一次准备好，让我之后只需要按顺序学习和做练习。
开始前先问我：课程放在哪个目录（等我给出完整路径），确认我的操作系统和已有工具。确认前不要创建文件或安装软件。

课程入口：https://www.freecodecamp.org/news/how-to-build-passkey-authentication-with-webauthn-next-js-and-nestjs/
我的系统：Linux。如果实际不符，先调整方案。
本次路线：Linux：本机动手。只准备这条路线需要的工具；只读路线不安装运行环境、不配置模型密钥。
练习：按教程在本地搭建 NestJS + Next.js 项目，用 PostgreSQL 保存用户与 passkey，并用真实设备完成注册与登录测试。
课节（官方顺序）：
1. How to Build Passkey Authentication with WebAuthn, Next.js and NestJS：https://www.freecodecamp.org/news/how-to-build-passkey-authentication-with-webauthn-next-js-and-nestjs/

1. 环境
- Node.js 22 及以上
- PostgreSQL 数据库
- 支持 passkey 的浏览器与设备
- 安装前先列出要装的软件和命令，等我同意；已装好的直接复用。
2. 材料
- 官方课程页面：只记录链接 https://www.freecodecamp.org/news/how-to-build-passkey-authentication-with-webauthn-next-js-and-nestjs/
3. 目录（最外层放在我确认的位置）
passkey-auth-webauthn-nextjs-nestjs/
├── README.md        # 课程入口、课节清单、每次怎么开始
├── progress.md      # 每课：读讲义 / 做练习 / 记笔记
├── questions.md     # 待解决的问题
├── check-env.sh     # 环境自检，按 README 操作
├── data/            # 练习用到的样例数据
└── lessons/         # 每课一个文件夹：notes.md + exercises/
    └── 01-01-how-to-build-passkey-authentication/
- 每课文件夹里建 notes.md（顶部写本课官方链接）和 exercises/；课节文件夹名称与上面一致。
- 已有课程目录先检查并复用；不覆盖笔记、作业或 progress.md，不重置已有进度。尚未发布的课节保留入口并注明未发布，不能代写讲义或虚构练习。
4. 自检
- 创建 check-env.sh，逐项检查并记录“通过/未通过”：
- 在课程根目录运行；每项检查独立执行，进入子目录不能影响下一项。使用当前系统的终端运行。
  - node -v  → 输出 v22 或更高版本
  - psql --version  → 能打印 PostgreSQL 版本，说明数据库工具就绪
  - 打开教程页确认目录中的后端、前端、测试章节均可阅读  → 能看到完整步骤内容而非付费提示
- 标注为人工检查、浏览器操作或 notebook 单元的项目，按相应方式操作，不直接粘贴进 shell；脚本只包含当前系统可执行的命令。
- 仅在当前路线需要、对应材料已获准保存、工具已安装时运行该项；需要登录、付费或尚未开放的材料记为“需要我操作/未验证”，不能伪报通过。不执行会调用付费 API、提交作业或修改云服务的检查。
- 运行一次，把结果给我看；未通过的项目说明原因和修复办法。
5. 学习计划
- README.md：课程入口、课节清单（带链接）、每次学习怎么开始（使用“每课提示词”）。
- progress.md：每课三项勾选——读讲义、做练习、记笔记。
6. 最后分三部分汇报：已完成、需要我自己操作的、尚未验证的。

边界：
- 需要管理员权限、会产生费用或需要填写密钥的操作，先告诉我原因，等我同意。密钥由我在本机配置，不发到聊天，不写进笔记或版本库；原项目需要 .env 时确认已被 Git 忽略。
- 不替我写练习或作业答案，也不替我提交。我卡住时只给提示；我明确要求时才给解答。
- 只下载许可允许个人保存的材料；其余只放链接。不把未运行的命令说成成功。
如果你不能直接操作我的文件系统，请在确认目录后给出适用于我的系统、可直接执行的命令和需要保存的文件内容。
```

### 每课提示词

```text
继续学习「How to Build Passkey Authentication with WebAuthn, Next.js and NestJS」。课程目录是 passkey-auth-webauthn-nextjs-nestjs/（不知道完整路径就先问我）。
1. 读 progress.md，找到下一课；如果我指定了第几课，就准备那一课。
2. 打开这一课的官方页面和本地讲义，列出本课练习要用的工具、文件和样例数据。缺少的先告诉我，等我同意再安装或下载。
3. 在 lessons/ 对应的课节文件夹里准备好练习：exercises/ 里给每道题建一个文件，写上题号和题目原文链接，不写答案；已有文件保留，样例数据放到 data/。拿不到官方题目或起始代码时记录限制，不编造替代品。
4. 按 README 运行开课时生成的自检脚本或在线检查清单，并检查本课新增工具能否正常使用。
5. 告诉我：本课先读哪几节、从哪道练习开始、大约需要多久。我学完后，帮我在 progress.md 勾选并把问题整理到 questions.md。

边界：
- 需要管理员权限、会产生费用或需要填写密钥的操作，先告诉我原因，等我同意。密钥由我在本机配置，不发到聊天，不写进笔记或版本库；原项目需要 .env 时确认已被 Git 忽略。
- 不替我写练习或作业答案，也不替我提交。我卡住时只给提示；我明确要求时才给解答。
- 只下载许可允许个人保存的材料；其余只放链接。不把未运行的命令说成成功。
```

### 课节（官方顺序）

1. [How to Build Passkey Authentication with WebAuthn, Next.js and NestJS](<https://www.freecodecamp.org/news/how-to-build-passkey-authentication-with-webauthn-next-js-and-nestjs/>)

## 指南参考

- [课程主页](<https://www.freecodecamp.org/news/how-to-build-passkey-authentication-with-webauthn-next-js-and-nestjs/>)

## 来源、许可与验证记录

- **开课提示词未完整验证，需要自备账号或资源**：Node.js 22 或更高版本；PostgreSQL 数据库（可选 Postgres.app 或 pgAdmin）；支持 passkey 的设备（Touch ID、Windows Hello、Android 或 iPhone）；GitHub 账号访问作者示例代码仓库（可选）
- 转载与修改 · 课程页面与材料：未找到明确许可。网页未给出本文或示例代码的具体许可名称；示例代码托管在作者 GitHub 仓库，许可未在节选中说明 [依据](<https://www.freecodecamp.org/news/how-to-build-passkey-authentication-with-webauthn-next-js-and-nestjs/>)
- 链接检查：1/1 个可以访问

## 来源与推荐

- 编辑整理收录

---
来源：LearnMap · 学径（https://oplearnx.com）