React应用启用Inrupt Session Provider的restorePreviousSession时遇重定向URI不匹配错误

问题场景 #

为大学团队开发Web应用，基于Inrupt框架对接Solid POD存储用户数据，使用SessionProvider管理用户账户。尝试添加restorePreviousSession={true}实现页面刷新后保持登录状态时，触发以下错误导致应用崩溃：

{"error":"invalid_request","error_description":"Mismatching redirect uri"}

错误原因 #

启用restorePreviousSession后，Inrupt会话管理器会从本地存储恢复之前的会话状态，其中包含登录时使用的重定向URI。如果出现以下任一情况，就会触发该错误：

• 当前应用的访问地址（协议、域名、端口、路径）与登录时记录的重定向URI不一致
• 所使用的Solid身份提供商（IDP，如Inrupt PodSpaces、NSS等）的允许重定向列表中，未包含当前应用的回调URI

解决方案 #

1. 确保重定向URI完全一致 #

• 登录时配置的redirectUri必须和当前应用的实际访问地址完全匹配，比如不能混用http://localhost:3000和http://127.0.0.1:3000（域名不同），也不能遗漏路径后缀（如/login-callback）。
• 避免硬编码固定地址，优先通过window.location.origin动态获取应用根地址。

2. 在IDP后台添加允许的重定向URI #

登录你使用的Solid IDP管理后台，找到应用设置页面，将当前应用的完整回调URI添加到允许列表中。例如本地开发时添加http://localhost:3000/login-callback，生产环境添加对应线上域名的回调地址。

3. 显式配置SessionProvider的redirectUri #

修改App.tsx代码，给SessionProvider明确指定redirectUri属性，避免框架自动推断时出现偏差：

import {SessionProvider} from "@inrupt/solid-ui-react";
import React from 'react';
import './App.css';
import ViewPaths from "./components/ViewPaths";

function App(): JSX.Element {
    // 根据实际回调页面路径调整后缀
    const redirectUri = window.location.origin + "/login-callback";

    return (
        <SessionProvider 
            session-id="login"
            restorePreviousSession={true}
            redirectUri={redirectUri}
        >
            <ViewPaths/>
        </SessionProvider>
    );
}

4. 清除旧的本地存储数据 #

之前存储的会话数据可能包含错误的重定向URI，导致恢复失败：

1. 打开浏览器开发者工具，切换到Application标签
2. 在Local Storage中删除所有以solid-client-authn-browser开头的键值对
3. 重新登录应用测试

5. 环境一致性检查 #

如果在开发/生产环境切换，需确保：

• 两个环境的重定向URI都已添加到IDP的允许列表
• 代码中redirectUri通过动态方式生成（如window.location.origin），而非硬编码固定地址

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