Bearalise's Blog

自定义Next auth的登陆字段

2024-06-26

背景

用next auth可以方便的编写用户登陆逻辑，但如果我们不想用email作为登陆主字段，就要做一些定制化开发。
使用 CredentialsProvider 时，你可以完全自定义认证逻辑，包括不使用 email。你可以设置一个只使用用户名和密码的认证系统，而不需要 email。以下是如何实现这一点的步骤：

1. 配置 CredentialsProvider：

在你的 NextAuth.js 配置文件中（通常是 pages/api/auth/[...nextauth].js 或 app/api/auth/[...nextauth]/route.js），你可以这样设置 CredentialsProvider：

import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials"

export default NextAuth({
  providers: [
    CredentialsProvider({
      name: 'Credentials',
      credentials: {
        username: { label: "Username", type: "text", placeholder: "jsmith" },
        password: { label: "Password", type: "password" }
      },
      async authorize(credentials, req) {
        // 这里添加你的认证逻辑
        const user = await authenticateUser(credentials.username, credentials.password)
        
        if (user) {
          // 返回的对象将被保存在 JWT 的 user 属性中
          return {
            id: user.id,
            username: user.username,
            // 不包含 email 字段
          }
        } else {
          return null
        }
      }
    })
  ],
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.id = user.id
        token.username = user.username
      }
      return token
    },
    async session({ session, token }) {
      session.user = {
        id: token.id,
        username: token.username,
      }
      return session
    }
  },
  // 其他配置...
})

2. 修改类型定义：

如果你使用 TypeScript，你可能需要修改类型定义以反映这种变化。创建或编辑 types/next-auth.d.ts 文件：

import "next-auth"

declare module "next-auth" {
  interface User {
    id: string
    username: string
  }

  interface Session {
    user: User
  }
}

declare module "next-auth/jwt" {
  interface JWT {
    id: string
    username: string
  }
}

3. 实现认证逻辑：

你需要实现 authenticateUser 函数来验证用户名和密码。这可能涉及检查数据库或其他认证服务。

如何使用 Jest 和 React-Testing-Library 对 Next.js 13+ App Router API 路由进行单元测试

2024-06-25

当日所学

简介

本文中使用的所有示例都在此存储库中。

将介绍以下内容：

单元测试 Next.js API GET 路由
单元测试 Next.js API POST/PUT/DELETE 路由

单元测试 Next.js GET 路由

📁app/api/items/route.ts:

import { NextResponse } from 'next/server';

export async function GET() {
  const items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
  ];
  return NextResponse.json(items, { status: 200 });
}

这是一个简单的 GET 端点，它将返回一些项目的 json 对象。在您的情况下，这可能会从数据库或其他一些 API 调用获取数据，然后将其返回给客户端。本文的最后一个示例将介绍这一点。也就是说，让我们看看这个测试会是什么样子：

More...

使用 Next.js 设置 Jest 完成单元测试

2024-06-24

当日所学

背景

Jest 和 React 测试库经常一起用于单元测试和快照测试。本指南将向您展示如何使用 Next.js 设置 Jest 并编写您的第一个测试。

快速开始

您可以将 create-next-app 与 Next.js with-jest 示例结合使用来快速入门：

1	npx create-next-app@latest --example with-jest with-jest-app

手动设置

要设置 Jest，请安装 jest 和以下软件包作为开发依赖项：

1	npm install -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom

通过运行以下命令生成基本的 Jest 配置文件：

1	npm init jest@latest

More...

学习总结 Build and Deploy TWITTER clone Application

2024-06-21

日常练习

背景

最近看到一个很棒的视频教程，从0开的搭建一个类似Twitter的应用，用到了 React, Tailwind, Next, Prisma, Mongo, NextAuth & Vercel 等技术，都是最近比较流行的技术
视频地址

学习过程

一开始学习时遇到不少困难，比如Next的版本和视频不一样，MongoDB不好用，非Get的环境拿不到Session等，最后都被我克服了，换用了mysql和一些方法，实现了类似效果。
后来我又根据最新的NextJS版本，重新自己写了一个，放到了Github上，并部署到了Vercel。果然很简单。

GitHub地址

最新可以运行的程序源码： link

CSS布局教程

2024-06-19

有趣资源

推荐一下 Josh Comeau 的经典三篇教程，我有搞不懂的属性经常拿出来看看，常看常新，我认为是最好的交互式教程，比MDN等都要好，可以按顺序阅读：

Flexbox 交互式指南：link
CSS Grid 交互式指南：link
CSS 居中终极指南：link

看了这三篇对于现代 CSS 最关键的知识点之一：布局就几乎搞定了。

Cloudflare服务的开源工具

2024-06-19

有趣资源

背景

不用到处找基于 Cloudflare 服务的开源工具了，来看看这个超赞列表，我看里面已经收集不少的免费项目。
Awesome Cloudflare - 为白嫖 Cloudflare 提供一个省心省时的资源工具清单。

awesome-cloudflare

介绍

选几个我感兴趣的介绍一下：

免费图床 cf-image-hosting ：在 Telegraph 上免费无限制地托管图像，部署在 Cloudflare 上。试用地址：https://images.mingming.dev
网站分析 analytics_with_cloudflare ：免费开源网页访客计数器, Webviso 是一个基于Cloudflare worker服务+Cloudflare D1数据库实现的完全免费的在线web访客统计服务。功能与目前常用的不蒜子 - 极简网页计数器相同。Webviso完全开源，你可以实现自定义需求。基于Cloudflare的微服务架构可快速自行部署上线。
免费Workers： Cloudflare Workers优秀项目收集。