Web
🥇NextAuth
00 分钟
2023-3-29
2023-3-29
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 的特点：
  1. 灵活且易于使用，支持 OAuth1.0 OAuth2.0 和 OpenId 链接；
  1. 灵活数据管理，可以不使用数据库，也可以选择使用 MySQL, MariaDB, Postgres, SQL Server, MongoDB 以及 SQLite。
  1. 默认安全，默认 Cookie 机制，可开启 JSON Web Token；
  1. NextAuth 推进无密码的登录机制
  1. 支持 serverless 部署
 

使用

1. 安装

2. 授权（JWT）

3. 配置 pages/_app.ts

为了让所有页面能够获取到 Session， 我们需要在 pages/_app.ts 外层加SessionProvider

4. 客户端获取信息

SSR获取登录信息

到目前位置就可以使用了。。。
下面讲一下Github授权登录

Github授权

notion image

注册 GitHub OAuth Application

环境变量可以在 Github 开发者中申请，点击注册一个新 OAuth Application：
notion image
回调地址填http://localhost:3000/api/auth/callback/github
地址可以先填开发环境地址，待上前线前可以修改为正式域名地址，或者开发环境和生产环境单独申请。
notion image
注册成功过后，在页面上复制 Client ID 和 Client secrets 到 .env 文件中

使用

 

Prisma 适配

prisma 配置可以看之前文章配置
  1. 安装 prisma 适配器
  1. 在 NextAuth.js 配置 prisma 适配器
  1. 添加 prisma Schema 中添加模型
📌
在生成prisma时，务必重启nextjs服务，否则无效
 

自定义登录页面

有同学会说，这个页面怎么这么丑，既有中文也有英文呢？显然在国内是不合适的， Next-auth 帮我们考虑到了，它支持配置自定义页面。
在 pages/api/auth/[...nextauth].ts 添加 pages 参数就可以实现自定义
自定义界面 ，可配置 signIn，signOut，error，verifyRequest 和 newUser，在这里，我们只配置登录页面。

T3

Create T3 App
The best way to start a full-stack, typesafe Next.js app.
Create T3 App
https://create.t3.gg/
Create T3 App
The best way to start a full-stack, typesafe Next.js app
notion image
 

参考链接

  1. 使用 NextAuth.js 给 Next.js 应用添加鉴权与认证 - 掘金 (juejin.cn)
 
上一篇
生活 —— 南京红山动物园
下一篇
tRPC & Zod
评论
Loading...