使用Magic SDK认证时遇[-32603]错误：不支持Magic Connect方法

核心问题分析 #

你的代码存在两个关键问题，直接触发了该错误：

1. 重复调用登录方法：连续两次调用magic.auth.loginWithMagicLink，第一次未加await，重复的RPC请求会导致服务端返回"不支持的方法"错误。
2. Magic实例初始化时机错误：在Next.js 13组件顶层直接初始化Magic实例，可能在服务器端渲染阶段执行（Magic SDK仅支持浏览器环境），引发环境不匹配问题。

修复步骤 #

1. 修正登录逻辑，移除重复调用 #

只需要调用一次loginWithMagicLink并使用await等待结果：

'use client'; // App Router模式下必须添加，标记为客户端组件
import { Magic } from 'magic-sdk';
import { useEffect, useRef } from 'react';

export default function LoginComponent() {
  // 用useRef确保Magic实例仅在浏览器环境初始化一次
  const magicRef = useRef(null);

  useEffect(() => {
    if (typeof window !== 'undefined') {
      magicRef.current = new Magic(process.env.NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY);
    }
  }, []);

  const handleLogin = async (email) => {
    if (!magicRef.current) return;
    
    try {
      // 仅调用一次登录方法
      const didToken = await magicRef.current.auth.loginWithMagicLink({
        email
      });
      console.log({ didToken });
      // 此处可添加后续逻辑，比如将didToken发送到后端验证
    } catch (error) {
      console.error('登录错误:', error);
    }
  };

  return (
    <div>
      <button onClick={() => handleLogin('user@example.com')}>发送Magic登录链接</button>
    </div>
  );
}

2. 额外检查项 #

• 确认NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY已正确写入.env文件，且重启了Next.js开发服务器。
• 检查Magic Dashboard中已配置正确的授权域名（如http://localhost:3000），否则会触发跨域或权限错误。

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