Hi! I’m currently developing a webapp for a university teamwork, where we are using a Session Provider in order to manage each user’s account. We are currently using inrupt, cause we are also using SOLID POD’s so every user can store its personal data. The problem comes at the momment of restoring a session, I mean, when you refresh the page, you would expecto to still have your account logged in. This is our App.tsx:
function App(): JSX.Element {
return (
<SessionProvider session-id="login">
<Router>
<NavBar/>
<Routes>
<Route
path='/'
element={
<HomePage/>
}
/>
<Route
path='/login'
element={
<LoginPage/>
}
/>
<Route
path='/map'
element={
<MapPage/>
}
/>
<Route
path='/help'
element={
<HelpPage/>
}
/>
<Route
path='/about'
element={
<AboutPage/>
}
/>
<Route
path='/profile'
element={
<UserProfile/>
}
/>
</Routes>
</Router>
</SessionProvider>
);
}
This is our NavBar:
function NavBar() {
const { session, sessionRequestInProgress } = useSession();
const {t} = useTranslation();
const [isNavExpanded, setIsNavExpanded] = useState(false);
if (session.info.webId === undefined) {
session.info.webId = "";
}
function handleNavToggle() {
setIsNavExpanded(!isNavExpanded);
}
useEffect(() => {
function handleResize() {
if (window.innerWidth >= 992 && isNavExpanded) {
setIsNavExpanded(false);
}
}
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, [isNavExpanded]);
return (
<nav className={`navbar navbar-expand-lg navbar-dark ${isNavExpanded ? 'nav-expanded' : 'nav-normal'}`}>
<div className="container-fluid">
<a className="navbar-brand" href="/">
<img src={GOMapLogo} alt="GOMap Logo" height={128} width={256}/>
</a>
<button
className="navbar-toggler"
type="button"
onClick={handleNavToggle}
>
<span className="navbar-toggler-icon"></span>
</button>
<div className={`collapse navbar-collapse ${isNavExpanded ? 'show' : ''}`}>
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
<NavItem to={"/"} text={t("home")}/>
<NavItem to={"/map"} text={t("map")}/>
<NavItem to={"/help"} text={t("help")}/>
<NavItem to={"/about"} text={t("about")}/>
</ul>
<LanguageMenu/>
<div id="login-manage">
{
(session.info.isLoggedIn) ?
<OurAvatar webId={session.info.webId}/>
:
<Link to="/login">
<Button variant="contained" color="primary" id="login">
{t("login")}
</Button>
</Link>
}
</div>
</div>
</div>
</nav>
);
}
And finally, this is our LoginPage, where we select our POD Provider and then proceed to log in:
function LoginPage() {
const {t} = useTranslation();
const [idp, setIdp] = useState("https://inrupt.net");
const providers = [
{name: "Inrupt", value: "https://inrupt.net"},
{name: "SolidCommunity", value: "https://solidcommunity.net"},
];
function changeProvider() {
let provider = (document.getElementById("selectProvider") as HTMLSelectElement).value;
console.log(provider)
setIdp(provider)
}
return (
<div id="loginBody">
<div id="loginForm">
<h1>LoMap</h1>
<h2>Sign In</h2>
<form>
<p>{t("provider")}</p>
<select onChange={changeProvider} id="selectProvider">
<option value={providers[0].value}>{providers[0].name}</option>
<option value={providers[1].value}>{providers[1].name}</option>
</select>
<a href={idp + "/register"}>{t("register")}</a>
<div id="loginButton">
<LoginButton oidcIssuer={idp} redirectUrl={window.location.origin}>
<Button variant="contained" color="primary" id="login">
{t("login")}
</Button>
</LoginButton>
</div>
</form>
</div>
</div>
)
}
I know that the solution should be easy, If just added:
restorePreviousSession={true}
To the SessionProvider element, but right after I add this, my app just crashes and returns this:
{"error":"invalid_request","error_description":"Mismatching redirect uri"}
So it just does not work as anyone would expect, I’ve tried searching for it but got nothing…
Has anyone had this problem before or know what should I do in order to fix it and be able to store a user’s session?
Thank you!
