如何使用next-auth实现GitHub登录后避免Next.js页面重载？

解决NextAuth GitHub登录后页面重载的问题 #

问题出在GitHub OAuth授权流程本身需要跳转到第三方页面，授权完成后NextAuth默认的重定向逻辑会触发页面刷新。要实现无重载登录，需要调整会话策略和客户端状态监听逻辑，具体方案如下：

1. 修改NextAuth配置文件

import NextAuth from 'next-auth/next';
import GitHubProvider from 'next-auth/providers/github';

export default NextAuth({
  providers: [
    GitHubProvider({
      clientId: process.env.MY_ID!,
      clientSecret: process.env.MY_SECRET!,
    }),
  ],
  // 改用JWT会话策略，避免依赖服务器端会话触发页面重载
  session: {
    strategy: 'jwt',
  },
  callbacks: {
    // 自定义重定向逻辑，授权后返回当前页面
    async redirect({ url, baseUrl }) {
      if (url.startsWith('/')) return `${baseUrl}${url}`;
      if (new URL(url).origin === baseUrl) return url;
      return baseUrl;
    },
    // 同步JWT信息到会话对象，确保客户端能拿到完整用户数据
    async session({ session, token }) {
      if (session.user) {
        session.user.id = token.sub!;
      }
      return session;
    },
  },
});

2. 重构页面组件，用状态监听替代页面重载

import { signIn, signOut, useSession } from 'next-auth/react';

const Navbar = () => {
  // 监听会话状态变化，自动更新UI
  const { data: session } = useSession();

  return (
    <nav>
      <ul>
        {!session ? (
          <li>
            <button
              onClick={() => {
                signIn('github', {
                  redirect: false,
                  // 指定回调地址为当前页面，避免跳转到默认登录页
                  callbackUrl: window.location.href,
                });
              }}
            >
              登录
            </button>
          </li>
        ) : (
          <li>
            <button
              onClick={() => {
                signOut({
                  redirect: false,
                  callbackUrl: window.location.href,
                });
              }}
            >
              登出
            </button>
          </li>
        )}
      </ul>
    </nav>
  );
};

export default Navbar;

3. 确保全局会话上下文配置

在_app.tsx中添加SessionProvider，让useSession能正常工作：

import { SessionProvider } from 'next-auth/react';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <SessionProvider session={pageProps.session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

原理说明

• 改用JWT会话策略后，用户会话状态存储在客户端的token中，授权完成后NextAuth会在客户端静默更新token，无需页面重载。
• useSession钩子会实时监听会话状态变化，自动触发UI更新，替代了传统的页面刷新同步方式。
• 移除Link组件改用普通按钮，避免了不必要的路由跳转逻辑干扰。

内容的提问来源于stack exchange，提问作者YellowBlue