React Native 对接Next.js+NextAuth认证方案咨询

核心结论 #

完全可以复用现有Next.js应用的NextAuth API，无需重新搭建独立认证体系，这是最高效的方案。

具体实现步骤 #

1. 配置NextAuth支持跨域 #

在Next.js项目的next.config.js中添加跨域规则，允许React Native应用的访问地址：

module.exports = {
  async headers() {
    return [
      {
        source: '/api/auth/:path*',
        headers: [
          { key: 'Access-Control-Allow-Credentials', value: 'true' },
          { key: 'Access-Control-Allow-Origin', value: 'http://localhost:8081' }, // 本地调试地址，生产环境替换为APP域名/真机IP
          { key: 'Access-Control-Allow-Methods', value: 'GET,OPTIONS,PATCH,DELETE,POST,PUT' },
          { key: 'Access-Control-Allow-Headers', value: 'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version' },
        ],
      },
    ];
  },
};

2. React Native中调用NextAuth认证接口 #

直接通过HTTP请求调用NextAuth的标准端点：

• 登录：POST请求到/api/auth/signin/[provider]（如使用credentials登录则为/api/auth/signin/credentials）
• 获取会话：GET请求到/api/auth/session
• 登出：POST请求到/api/auth/signout

示例代码（基于axios）：

import axios from 'axios';

// 邮箱密码登录
const signInWithCredentials = async (email, password) => {
  const response = await axios.post(
    'https://your-nextjs-domain/api/auth/signin/credentials',
    { email, password, callbackUrl: 'https://your-nextjs-domain/api/auth/session' },
    { withCredentials: true }
  );
  return response.data;
};

// 获取当前会话状态
const fetchSession = async () => {
  const response = await axios.get(
    'https://your-nextjs-domain/api/auth/session',
    { withCredentials: true }
  );
  return response.data;
};

3. 会话持久化处理 #

NextAuth默认用HttpOnly Cookie存储会话，React Native请求时需开启withCredentials: true携带Cookie。同时可借助AsyncStorage或MMKV缓存会话信息，避免APP重启后重复请求。

4. OAuth第三方登录适配（可选） #

如果使用Google、Facebook等OAuth服务商，需用react-native-app-auth或expo-auth-session处理授权跳转，将回调返回的授权码传给NextAuth的/api/auth/callback/[provider]端点完成认证。

备选方案（不复用API的情况） #

若因特殊需求不想复用现有API，可基于Prisma和MySQL搭建独立JWT认证服务：生成JWT令牌返回给React Native，后端接口通过验证JWT实现权限控制。但此方式需额外维护一套认证逻辑，效率低于复用NextAuth。

注意事项 #

• 生产环境必须配置HTTPS，防止Cookie被拦截
• 跨域Origin需严格限制，避免使用通配符*
• 真机调试时，需将React Native的IP地址加入Next.js的跨域允许列表

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