React中Magic Link认证问题：点击链接直接登录失败

问题场景 #

实现Magic Link直接登录功能，流程如下：

1. 点击登录按钮调用magic.auth.loginWithMagicLink，传入邮箱和重定向URI：

if (email) {
   await magic.auth.loginWithMagicLink({ email, redirectURI: `${window.location.origin}/callback` });
}

2. 重定向到/callback页面后，从URL获取magic_credential并传入magic.auth.loginWithCredential：

const { magic_credential = null } = router.query;

if (magic_credential) {
  const magic = new Magic(process.env.MAGIC_PUBLIC_KEY);
  await magic.auth.loginWithCredential(magic_credential);
}

initMagic(); // 调用此方法获取userMetadata时触发未认证错误

触发错误：

initMagic start Error: Magic RPC Error: [-32603] Internal error: User denied account access.

可能的原因及解决办法 #

1. Magic实例未复用 #

在/callback页面重新创建了Magic实例，但initMagic方法中使用的是另一个独立实例，导致认证会话无法共享（Magic的认证状态是绑定在实例上的）。

解决：全局初始化并复用同一个Magic实例：

• 在项目公共模块中创建实例：

// magic.js
import { Magic } from 'magic-sdk';
export const magic = new Magic(process.env.MAGIC_PUBLIC_KEY);

• 在/callback和initMagic中导入该实例，而非重新创建：

// callback页面
import { magic } from './magic.js';

const { magic_credential = null } = router.query;
if (magic_credential) {
  await magic.auth.loginWithCredential(magic_credential);
  initMagic();
}

2. 认证时序问题 #

loginWithCredential执行完成后，会话可能尚未完全初始化就调用了initMagic，导致获取用户元数据时认证状态未生效。

解决：在调用initMagic前先校验认证状态：

if (magic_credential) {
  await magic.auth.loginWithCredential(magic_credential);
  const isLoggedIn = await magic.user.isLoggedIn();
  if (isLoggedIn) {
    initMagic();
  }
}

3. 重定向会话丢失 #

单页应用重定向刷新页面时，Magic的会话存储（如localStorage）可能未被正确保留，或浏览器隐私设置阻止了存储写入。

解决：

• 检查浏览器是否允许localStorage，清除浏览器缓存后重试；
• 在initMagic中先打印localStorage，确认是否存在Magic相关的会话键值对。

4. Magic Credential无效或过期 #

URL中的magic_credential可能被篡改、编码错误或已过期。

解决：

• 打印router.query.magic_credential确认格式是否正确；
• 检查Magic Dashboard中是否将redirectURI添加到允许的重定向列表中，未添加会导致凭证无效。

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