type
status
date
slug
summary
tags
category
icon
password
Edited
Mar 29, 2023 04:14 PM
Created
Mar 29, 2023 01:20 PM
NextAuth.js 是 Next.js 应用程序的完整开源身份验证解决方案，专门为 Next.js 设计，NextAuth 的特点：
- 灵活且易于使用，支持 OAuth1.0 OAuth2.0 和 OpenId 链接；
- 灵活数据管理，可以不使用数据库，也可以选择使用 MySQL, MariaDB, Postgres, SQL Server, MongoDB 以及 SQLite。
- 默认安全，默认 Cookie 机制，可开启 JSON Web Token；
- NextAuth 推进无密码的登录机制
- 支持 serverless 部署
使用
1. 安装
2. 授权（JWT）
3. 配置 pages/_app.ts
为了让所有页面能够获取到
Session， 我们需要在 pages/_app.ts 外层加SessionProvider4. 客户端获取信息
SSR获取登录信息
到目前位置就可以使用了。。。
下面讲一下Github授权登录
Github授权
注册 GitHub OAuth Application
环境变量可以在 Github 开发者中申请，点击注册一个新 OAuth Application：
回调地址填
http://localhost:3000/api/auth/callback/github地址可以先填开发环境地址，待上前线前可以修改为正式域名地址，或者开发环境和生产环境单独申请。
注册成功过后，在页面上复制
Client ID 和 Client secrets 到 .env 文件中使用
Prisma 适配
prisma配置可以看之前文章配置
- 安装
prisma适配器
- 在 NextAuth.js 配置 prisma 适配器
- 添加 prisma Schema 中添加模型
在生成prisma时，务必重启nextjs服务，否则无效
自定义登录页面
有同学会说，这个页面怎么这么丑，既有中文也有英文呢？显然在国内是不合适的， Next-auth 帮我们考虑到了，它支持配置自定义页面。
在
pages/api/auth/[...nextauth].ts 添加 pages 参数就可以实现自定义自定义界面 ，可配置
signIn，signOut，error，verifyRequest 和 newUser，在这里，我们只配置登录页面。T3
The best way to start a full-stack, typesafe Next.js app
参考链接
- 作者:JinSo
- 链接:https://jinso365.top/article/nextauth
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。