NextAuth.js会话在移动应用WebView中无法正常工作

针对你遇到的「常规环境登录正常，移动WebView中登录返回200但会话为空」的问题，结合你的配置，可从以下几个方向排查修复：

1. 修复CORS配置的核心冲突 #

你的next.config.mjs中设置了Access-Control-Allow-Origin: *，但当Access-Control-Allow-Credentials: true时，浏览器（包括WebView）不允许使用通配符作为Origin，这会导致Cookie等凭证无法被携带。

修改next.config.mjs的headers配置，指定具体的允许源：

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: false,
    async headers() {
        return [
            {
                source: "/api/auth/:path*",
                headers: [
                    { key: "Access-Control-Allow-Credentials", value: "true" },
                    // 替换为你的生产环境域名，开发环境可设为http://localhost:3000
                    { key: "Access-Control-Allow-Origin", value: process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000" },
                    { key: "Access-Control-Allow-Methods", value: "GET, POST, OPTIONS" },
                    { key: "Access-Control-Allow-Headers", value: "Authorization, Content-Type, X-CSRF-Token" },
                  ],
            },
        ];
    },
};

export default nextConfig;

2. 调整NextAuth Cookie适配WebView #

WebView对Cookie的安全策略比普通浏览器更严格，你当前的Cookie配置可能存在以下问题：

• __Secure-和__Host-前缀要求域名必须是HTTPS且不能有子域名，若你的部署环境不符合，会导致Cookie无法写入。
• 未指定domain属性，跨域WebView可能无法识别Cookie归属。

修改lib/auth.ts的cookies配置：

cookies: process.env.NODE_ENV === "production" ? {
    sessionToken: {
        name: "next-auth.session-token", // 先移除__Secure-前缀测试
        options: {
            httpOnly: true,
            sameSite: 'None',
            secure: true,
            path: '/',
            domain: process.env.NEXT_PUBLIC_COOKIE_DOMAIN, // 例如".your-domain.com"，适配子域名或WebView跨域
        },
    },
    csrfToken: {
        name: "next-auth.csrf-token",
        options: {
            httpOnly: true,
            sameSite: 'None',
            secure: true,
            path: '/',
            domain: process.env.NEXT_PUBLIC_COOKIE_DOMAIN,
        },
    },
} : {
    // 开发环境放宽Cookie限制
    sessionToken: {
        name: "next-auth.session-token",
        options: {
            httpOnly: true,
            sameSite: 'lax',
            secure: false,
            path: '/',
        },
    },
    csrfToken: {
        name: "next-auth.csrf-token",
        options: {
            httpOnly: true,
            sameSite: 'lax',
            secure: false,
            path: '/',
        },
    },
},

3. 配置移动端WebView的凭证权限 #

WebView默认可能禁用第三方Cookie或跨域凭证，需要在移动端代码中开启：

• Android WebView：

  WebSettings settings = webView.getSettings();
  settings.setJavaScriptEnabled(true);
  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
      CookieManager.getInstance().setAcceptThirdPartyCookies(webView, true);
  } else {
      CookieManager.getInstance().setAcceptCookie(true);
  }
  

• iOS WKWebView：

  let configuration = WKWebViewConfiguration()
  configuration.websiteDataStore = WKWebsiteDataStore.default()
  let webView = WKWebView(frame: .zero, configuration: configuration)
  

4. 调试NextAuth会话生成流程 #

在lib/auth.ts中添加日志，确认会话生成各环节是否正常：

async authorize(credentials, req) {
    console.log("接收的凭证:", credentials);
    // 你的验证逻辑
    const user = // ...验证逻辑
    console.log("验证通过的用户:", user);
    return user ? user : null;
},
async jwt({ token, trigger, user }) {
    console.log("JWT回调 - 当前token:", token, "登录用户:", user);
    if (!token.user && user) {
        token.user = user;
    }
    // ...其他逻辑
    return token;
},
async session({ session, token }) {
    console.log("Session回调 - 原始session:", session, "关联token:", token);
    if (token?.user) {
        session.user = token.user;
    }
    return session;
},

同时检查登录请求的响应头，确认Set-Cookie字段是否包含正确的Cookie属性。

5. 确保CSRF令牌正常传递 #

WebView中可能无法自动携带CSRF令牌，需确保登录请求中包含该令牌：

• 若使用NextAuth的内置登录页面，确保页面正确渲染csrfToken隐藏字段；
• 若自定义登录请求，需在请求头中添加X-CSRF-Token，值可通过getCsrfToken()方法获取。

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