React集成logto.io获取JWT遇invalid_target错误求助

我正在使用logto.io管理React应用的认证。仅前端认证时流程正常，对应AuthProvider组件代码如下：

const config: LogtoConfig = {
    endpoint: AUTH_ENDPOINT,
    appId: AUTH_APP_ID,
};

export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
    return <LogtoProvider config={config}>{children}</LogtoProvider>;
};

认证流程：

• 访客身份正常识别
• 点击登录跳转至logto登录页
• 回调组件获取查询参数并正确识别用户

问题：获取到的token并非可用于后端身份识别的JWT。

添加resources和scopes后，配置变为：

const config: LogtoConfig = {
    endpoint: AUTH_ENDPOINT,
    appId: AUTH_APP_ID,
    resources: [API_URL],
    scopes: ['account', 'profile'],
};

export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
    return <LogtoProvider config={config}>{children}</LogtoProvider>;
};

修改后跳转登录页前出现错误：

"invalid_target"
"resource indicator is missing, or unknown"

我尝试了多种resources组合：logto核心应用URL、后端URL、前端URL、上述组合、应用ID替换URL、有无scopes的情况，但均无效。请问问题出在哪里？

解决思路与方案 #

这个错误的核心原因是你在Logto控制台中没有将配置的API_URL注册为有效的资源（Resource）。Logto要求前端resources数组中指定的所有资源，必须先在后台完成注册配置，否则会被识别为未知资源，抛出invalid_target错误。

具体操作步骤：

1. 登录Logto管理控制台
2. 进入「资源」页面，点击「创建资源」
3. 将你的API_URL（后端服务的基础URL，例如https://api.your-domain.com）填写为资源标识符（Resource Indicator）
4. 保存资源配置，同时可根据需求为该资源启用对应的权限范围（Scopes），比如你用到的account、profile
5. 回到前端代码，保持现有resources和scopes配置，重新测试登录流程

额外注意事项：

• 资源标识符必须是完整的URL格式，不能用应用ID替代
• 前端配置的scopes需确保是该资源已启用的权限范围，若使用自定义scopes，需提前在Logto控制台的资源权限中添加
• 登录成功后，可通过useLogto钩子的getAccessToken()获取用于后端API认证的Bearer令牌，getIdTokenClaims()可获取用户身份信息的JWT

内容的提问来源于stack exchange，提问作者David Meir-Levy