在现代 Web 应用程序中，用户身份验证是必不可少的功能。在 Next.js 中，我们可以使用多种方式来实现用户身份验证。本文将介绍使用 Next.js 官方推荐的身份验证库 next-auth 来实现用户身份验证的步骤以及注意事项。
什么是 next-auth？
next-auth 是一个开源的身份验证库，它提供了一种简单而灵活的方式来实现身份验证。它支持多种身份验证提供者，如 Google、Facebook、GitHub 等，也可以自定义身份验证提供者。
步骤
1. 安装 next-auth
在项目中安装 next-auth：
npm install next-auth
2. 创建身份验证提供者
在 pages/api/auth/[...nextauth].js 中创建身份验证提供者：
-- -------------------- ---- -------
------ -------- ---- ------------
------ --------- ---- ----------------------
------ ------- ----------
---------- -
------------------
--------- -----------------------------
------------- ---------------------------------
---
--
---这里使用了 Google 作为身份验证提供者，可以根据需要添加其他提供者。
3. 创建登录页面
在 pages/login.js 中创建登录页面：
-- -------------------- ---- -------
------ - ------ - ---- -------------------
------ ------- -------- ------- -
------ -
-----
------- ----------- -- ---------------------- -- ---- ---------------
------
--
-这里使用了 signIn 函数来实现登录功能。在点击按钮时，调用 signIn 函数并传入身份验证提供者名称，这里是 'google'。
4. 创建受保护页面
在 pages/protected.js 中创建受保护页面：
-- -------------------- ---- -------
------ - ---------- - ---- -------------------
------ ------- -------- ----------- -
----- --------- -------- - -------------
-- --------- -
------ ----------------------
-
-- ---------- -
------ -------- ---- -- ---- ---------
-
------ ----------- --------------------------
-这里使用了 useSession 钩子来获取当前用户信息。如果用户未登录，页面将显示一条消息提示用户需要登录。如果用户已登录，页面将显示用户的姓名。
5. 添加身份验证中间件
在 _app.js 中添加身份验证中间件：
-- -------------------- ---- -------
------ - -------- - ---- -------------------
-------- ------- ---------- --------- -- -
------ -
--------- ----------------------------
---------- -------------- --
-----------
--
-
------ ------- ------这里使用了 Provider 组件来将当前用户信息传递给应用程序的其他部分。
注意事项
1. 配置环境变量
在使用 Google 等身份验证提供者时，需要在环境变量中设置客户端 ID 和客户端密钥。可以在 .env.local 文件中添加以下内容：
GOOGLE_CLIENT_ID=your_client_id GOOGLE_CLIENT_SECRET=your_client_secret
2. 自定义页面
next-auth 默认提供了登录和注销页面，但是我们也可以自定义这些页面。只需在 pages 目录下创建一个与页面路径匹配的文件即可。例如，如果要自定义登录页面，可以在 pages/api/auth/signin.js 中创建文件。
3. 调用 API
在需要在服务器端调用 API 的情况下，可以使用 getSession 函数来获取当前用户的会话信息。例如：
-- -------------------- ---- -------
------ - ---------- - ---- -------------------
------ ------- ----- -------- ------------ ---- -
----- ------- - ----- ------------ --- ---
-- --------- -
---------------- -----------------------
- ---- -
------------- ---- -- ---- -----
-
-示例代码
完整的示例代码可以在 GitHub 上找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d399b2a941bf71346df923
