1 Auth.js

1.1 简介

Auth.js is a runtime agnostic library based on standard Web APIs that integrates deeply with multiple modern JavaScript frameworks to provide an authentication experience that’s simple to get started with, easy to extend, and always private and secure!

以上是Auth.js官方简介。总而言之，Auth.js能够很方便地使用第三方账号登录网站,例如本网站使用的GitHub账号，或是Google账号等等。

除了高集成的账号认证功能，省略繁琐的业务代码，还能使用Supabase本身的行级策略验证（RLS策略验证），细粒度划分用户权限。对于非专业人士来说，易于操作和维护。

1.2 Auth.js配置

设置环境,唯一必不可少的环境变量是 AUTH_SECRET。这是一个随机值，库使用它来加密令牌和电子邮件验证哈希。您可以通过官方 Auth.js CLI 运行来生成一个:

npx auth secret

这也会将它添加到您的 .env 文件中，并尊重框架约定（例如：Next.js 的 .env.local）。

接下来，创建 Auth.js 配置文件和对象。在这里，您可以控制库的行为并指定自定义身份验证逻辑、适配器等。我们建议所有框架在项目中创建一个 auth.ts 文件。在这个文件中，我们将所有选项传递给框架特定的初始化函数，然后导出路由处理程序、登录和登出方法等。¹

首先，在您的应用程序的根目录中创建一个新的 auth.ts 文件，内容如下：

import NextAuth from "next-auth"
 
export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [],
})

在 /app/api/auth/[...nextauth]/route.ts 下添加一个路由处理程序:

import { handlers } from "@/auth" // Referring to the auth.ts we just created
export const { GET, POST } = handlers

挑选provider和adapter（以GitHub和Supabase为例，同时选择JWT策略）：

import NextAuth from "next-auth"
import GitHub from "next-auth/providers/github"
import { SupabaseAdapter } from "@auth/supabase-adapter"
import jwt from "jsonwebtoken"

export const { handlers, auth, signIn, signOut } = NextAuth({ 
    providers: [ GitHub ],
    session:{
        strategy: "jwt",
    },
    adapter: SupabaseAdapter({
        url: process.env.NEXT_PUBLIC_SUPABASE_URL,
        secret: process.env.SUPABASE_SERVICE_ROLE_KEY,
    }),
    secret: process.env.AUTH_SECRET,
    callbacks: {
        async jwt({ token, account, profile, user }) {

            ... more codes 

            return token
        },
        session: async ({ session, token, user }) => {
            const signingSecret = process.env.SUPABASE_JWT_SECRET
            const userId = user?.id || token?.uid
            const userEmail = user?.email || token?.email
            if (signingSecret && userId) {
                const payload = {
                    aud: "authenticated",
                    exp: Math.floor(new Date(session.expires).getTime() / 1000),
                    sub: userId,
                    email: userEmail,
                    role: "authenticated",
                }
                session.supabaseAccessToken = jwt.sign(payload, signingSecret)
            }

            ... more codes 

            return session
        }
    }
})

1.3 Supabase配置

可以注意到之前步骤中还有Supabase的相关密钥配置，这需要我们同时配置好Supabase（使用Vercel自动配置和连接）。²

由于我的项目托管于Vercel上，并且Vercel中集成了多种数据库，我们可以直接在Vercel中创建数据库、连接项目、生成环境配置文件。

接下来就是在项目文件路径下运行指令：

# link to the project locally
vercel link

# Run these following code instructions to make the latest environment variables available to your project locally
vercel env pull .env.development.local

至此，我们就成功配置好了Supabase的数据库地址和各个密钥。Supabase数据库可视化可以在其官网³直接实现；官网还能够脱离SQL语句，实现傻瓜式操作数据库；官网后台还可以完成数据库密钥的查询、修改，并同步到Vercel环境变量中。

1 Auth.js

1.1 简介

1.2 Auth.js配置

1.3 Supabase配置

Footnotes