在nextjs app router中使用NextAuth.js由于NextAuth.js官方文档目前(2023.11.

由于NextAuth.js官方文档目前(2023.11.29)并未涉及nextjs app router如何使用，本文在此做一定补充

reference: Auth.js

引入SessionProvider

由于nextjs app router默认目录下所有组件都是React Server Component，NextAuth.js基于浏览器缓存的SessionProvider不能直接使用，有两种方法加载SessionProvider

创建一个authProvider.tsx组件，在这个组件顶部声明’use client’；在layout.tsx中引入这个组件
在所有使用到authentic status的组件的最近公共client component中导入SessionProvider，并包裹这个公共component

接下来我们给出两种方法的实现代码

第一种方法：

// src/app/AuthProvider.tsx
import { SessionProvider } from 'next-auth/react'

export defalut function AuthProvider({ children }:{ children:Reacr.ReactNode }) {
	return (
		<SessionProvider>
			{children}
		</SessionProvider>
	)
}

// app/src/layout.tsx
import AuthProvider from './AuthProvider'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
				<AuthProvider>
					{children}
				</AuthProvider>
			</body>
    </html>
  )
}

❗这种方法不推荐使用，虽然它的确能work，但破坏了nextjs默认的server component

第二种方法

// src/app/page.tsx
import { SessionProvider } from 'next-auth/react'

export default function Page() {
	return (
		<SessionProvider>
			// other child component
		</SessionProvider>
	)
}

设置api

由于nextjs app router的api设置规则发生了一定变化，原本文档基于page router的api设置方法也需要做一定修改

// src/app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth";
import { authOptions } from "@/conf/auth";

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

// src/conf/auth.ts
import { NextAuthOptions } from "next-auth";
import GithubProvider from "next-auth/providers/github";

export const authOptions: NextAuthOptions = {
  // Configure one or more authentication providers
  // TODO: 偶发bug(<https://github.com/nextauthjs/next-auth/discussions/3186>)
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_CLIENT_ID as string,
      clientSecret: process.env.GITHUB_SECRET_ID as string,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET as string,
};

这里可能有人疑惑为什么要把auth.ts单独写一个文件出来，如果你的项目是部署在vercel上的话，把authOptions与api写在一起很可能导致一下build error：

github.com/vercel/next…

虽然目前我还不知道是怎么回事，但是把authOptions和api分开写可以避免以上问题ಠ_ಠ

在完成以上两步后，你就可以参考官方文档继续code了！