在Next.js+NextAuth.js中使用MemberStack认证的非hack方案及选型咨询

问题背景 #

我正从Webflow+MemberStack的网站迁移到Next.js+MUI项目，项目已配置NextAuth.js认证示例。为减少迁移工作量，想继续使用MemberStack，但发现它仅提供前端DOM登录API，没有后端可用的登录接口。目前通过自定义NextAuth.js的CredentialsProvider实现登录，但MemberStack库会将登录结果写入localStorage，Node后端不存在该对象，不得不模拟global.localStorage作为临时hack，代码如下：

CredentialsProvider({
  id: 'login',
  name: 'Login',
  credentials: {
    email: { label: 'Email', type: 'email', placeholder: 'Enter Email' },
    password: { label: 'Password', type: 'password', placeholder: 'Enter Password' }
  },
  async authorize(credentials) {
    try {
      console.log("Logging into memberstack");

      // 临时hack：模拟localStorage
      global.localStorage = {
        setItem: (key, value) => {
          console.log(key);
          console.log(value);
        }
      };

      let loginResult = await memberstack.loginMemberEmailPassword({
        password: credentials?.password,
        email: credentials?.email,
      });
      console.log(loginResult);

      return loginResult?.data;
    } catch (error) {
      console.error("Error happened");
      console.error(error);
      throw error;
    }
  }
}),

想请教有没有更优的非hack实现方式，或者是否应该更换更适配NextAuth.js的认证服务商。

解决方案 #

一、无hack适配MemberStack的实现思路 #

MemberStack的前端库依赖浏览器环境（需localStorage），因此可以将登录逻辑拆分到前端客户端执行，后端仅负责校验用户合法性：

1. 前端完成登录流程：在React组件中调用MemberStack的登录API，拿到用户信息和token
2. 传递凭证给NextAuth：调用NextAuth的signIn方法，将用户标识和token传给后端
3. 后端校验合法性：用MemberStack的用户信息查询接口验证token和用户ID的有效性

前端登录代码示例

// 前端登录组件中
import { signIn } from "next-auth/react";
import memberstack from "@memberstack/dom";

const handleLogin = async (email, password) => {
  try {
    const loginResult = await memberstack.loginMemberEmailPassword({ email, password });
    if (loginResult.data) {
      // 将MemberStack返回的用户信息传给NextAuth
      await signIn('login', {
        email: loginResult.data.email,
        memberId: loginResult.data.id,
        token: loginResult.data.token,
        redirect: true,
        callbackUrl: "/"
      });
    }
  } catch (err) {
    console.error("登录失败:", err);
  }
};

修改后的NextAuth CredentialsProvider

CredentialsProvider({
  id: 'login',
  name: 'Login',
  credentials: {
    email: { type: 'email' },
    memberId: { type: 'text' },
    token: { type: 'text' }
  },
  async authorize(credentials) {
    // 校验必要参数
    if (!credentials?.token || !credentials?.memberId) return null;

    try {
      // 后端调用MemberStack的getMember接口验证用户合法性
      const member = await memberstack.getMember({
        memberId: credentials.memberId,
        token: credentials.token
      });
      // 验证通过则返回用户信息，NextAuth会处理会话
      return member.data;
    } catch (err) {
      console.error("用户校验失败:", err);
      return null;
    }
  }
}),

这种方式完全避开了在Node环境中模拟localStorage的问题，同时保证了登录流程的安全性（后端二次校验用户身份）。

二、更换适配NextAuth.js的认证服务商 #

如果不想为适配MemberStack额外开发，推荐以下原生支持NextAuth.js的服务商，集成成本更低：

• Auth0：NextAuth官方支持的Provider，配置简单，支持邮箱密码、社交登录等多种方式，后端API完善
• Supabase Auth：自带NextAuth集成，同时提供PostgreSQL数据库，适合全栈项目快速搭建
• Clerk：专为Next.js优化的认证服务，开箱即用，支持多租户、MFA等高级功能
• Firebase Auth：NextAuth有官方Provider，生态成熟，适合已有Firebase生态的项目

这些服务商均提供完整的前后端认证接口，无需hack即可与NextAuth无缝配合，减少后续维护成本。

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